English
How to make a favicon for your website
A favicon generator gives you the small icon that shows in browser tabs, bookmarks and phone home screens, in every size those places ask for. Three steps:
- Choose Text or emoji, or upload your logo. For text, one or two letters read best at 16 px.
- Set the background, shape and size. The tab preview on the right updates as you type.
- Press Download all (.zip), upload the files to the root folder of your site and paste the HTML snippet into the head of your pages.
Everything is drawn in your browser. Your logo is not uploaded anywhere.
Which favicon files do you need?
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Browser tabs, and older browsers that look for /favicon.ico by default |
| favicon.svg | Scalable | Modern browsers, sharp at any size (offered for text and emoji icons) |
| favicon-32x32.png, favicon-16x16.png | 32 and 16 px | Tabs and bookmarks as PNG |
| apple-touch-icon.png | 180 × 180 px | iPhone and iPad home screen |
| icon-192.png, icon-512.png | 192 and 512 px | Android home screen, installed web apps |
| icon-maskable-512.png | 512 px, full bleed | Android icons that get cropped to a circle or squircle |
| site.webmanifest | Text file | Tells Android which icons, name and colors to use |
What is a maskable icon?
Android crops launcher icons to whatever shape the phone's theme uses, often a circle. A maskable icon fills the whole square with your background color and keeps the logo inside the central safe zone, so nothing important is cut off. This tool shrinks your artwork to 80 percent for the maskable file and shows the circular crop in the preview. A normal rounded icon sent to Android would otherwise get a white frame around it.
Why does the Apple icon not have rounded corners?
iOS applies its own rounded corners and fills any transparent pixels with black. So the 180 px apple-touch-icon is always a full square. If you picked a transparent background, that file gets a white one instead.
Is the .ico file really multi-size?
Yes. The file holds three separate images, 16, 32 and 48 px, each drawn at its own size rather than shrunk afterwards, so small versions stay readable. Inside, each image is stored as PNG, which every current browser and Windows since Vista reads fine. Very old software, such as Windows XP, may not.
Where do I put the files?
In the root of your site, so that yoursite.com/favicon.ico works. Paste the snippet between the head tags. If you keep the icons in a subfolder, type it in the Path field (for example /assets/icons/) and the snippet and the manifest will point there.
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Favicon not changing? Common problems
- Browsers cache favicons for a long time. Open the icon's own URL (yoursite.com/favicon.ico) and refresh it with Ctrl+F5, or test in a private window.
- Google Search shows its own copy of your favicon and updates it only when it recrawls the site, which can take days or weeks. Its guidance asks for a square icon in a multiple of 48 px, and the .ico here includes 48.
- Thin lines and small text disappear at 16 px. A bold letter, a simple shape or an emoji works better than a full logo.
- A logo with a transparent background looks wrong on a dark tab if the logo itself is dark. Use a solid background color for those.
What makes a good favicon at 16 pixels?
A tab icon is about as big as a lowercase letter, so detail is wasted. Pick one bold letter or a simple shape, use two colors with strong contrast (white on a dark blue works), and keep some space around the edge. A letter at 70 percent of the icon size is a good start. If you use a photo or a detailed logo, check the 16 px preview first. If you cannot tell what it is, simplify it or use the first letter of the brand instead.
What is in site.webmanifest?
It is a small JSON file with the app name, a short name for home screens, the 192 and 512 px icons, a theme color and a background color. Chrome on Android uses it when someone installs your site, and it needs those two icon sizes to offer the install prompt. The preview text on this page is the exact file that goes into the ZIP, so you can read it before you download.
Frequently asked questions
How do I make a favicon from an image?
Choose Image, drop your logo on the box and pick Fit or Fill. Then press Download all (.zip). A square PNG of at least 512 × 512 px gives the sharpest small sizes.
What size should a favicon be?
Use a favicon.ico holding 16, 32 and 48 px, plus a 180 × 180 apple-touch-icon and 192 and 512 px icons for Android. The tool makes all of them from one design.
Can I use an emoji as a favicon?
Yes. Pick an emoji from the list or paste one into the text box. It is drawn with the emoji font on your device, so the look matches your system. For the SVG icon, each browser draws the emoji with its own font.
How do I add a favicon to my website?
Upload the files to your site's root folder and paste the HTML snippet inside the head tag of your pages. The most important line is <link rel="icon" href="/favicon.ico" sizes="any">.
Why is my favicon not showing?
Browsers cache favicons aggressively. Open /favicon.ico directly, hard refresh with Ctrl+F5, or try a private window. Also check that the file is in the root folder and the path in the snippet is right.
What is a maskable icon?
It is an Android icon that fills the whole square so the phone can crop it into a circle or other shape without a white border. The artwork is kept inside a central safe zone.
Is the .ico file really multi-size?
Yes, it contains separate 16, 32 and 48 px images, each drawn at its own size and stored as PNG. You can check by opening it in an image tool that lists icon sizes.
Are my images uploaded anywhere?
No. The icons are drawn with the canvas in your browser and packed into the ZIP on your device. Nothing is sent to a server.