The short answer
You do not need dozens of icon files any more. Old guides list sizes for Windows tiles, every iPad model and long gone browsers; today almost everything reads one of a few files. Put these in the root folder of your site, next to the home page, and add the matching lines to the head of every page.
The browser asks for /favicon.ico on its own even without any HTML, which is why that file should always exist. Everything else is found through the link tags and the manifest.
| File | Size in pixels | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 in one file | All browsers, Windows shortcuts, tools that only look at the root |
| favicon-32x32.png and favicon-16x16.png | 32 and 16 | Browser tabs and bookmarks on normal and high density screens |
| apple-touch-icon.png | 180 | iPhone and iPad home screen, Safari bookmarks |
| android-chrome-192x192.png | 192 | Android home screen, installed web app |
| android-chrome-512x512.png | 512 | Splash screen of installed web apps, app stores for web apps |
| icon.svg (optional) | Any, it is vector | Modern desktop browsers that support SVG favicons |
Try it here: Favicon Generator
Open the full tool pageWhy so many sizes
A favicon appears in very different places. A browser tab shows it at 16 by 16 CSS pixels, which is 32 real pixels on a high density laptop screen and sometimes more. Windows uses 48 pixels for shortcuts on the desktop. Google shows the site icon next to search results and asks for a square image; it recommends a size larger than 48 pixels, and the 48 pixel image in favicon.ico together with the larger PNGs covers that.
Phones work differently. When someone adds your site to the home screen, iOS looks for the apple-touch-icon and Android reads the icons in the web manifest. These icons sit next to real apps, so they need to be large and sharp. If they are missing, the phone takes a screenshot of the page or shows a letter instead.
Scaling one large image down is not ideal for the smallest sizes: a 512 pixel logo shrunk to 16 pixels turns thin lines into gray blur. That is why the generator draws the small PNG sizes separately from your source and lets you check the result at 16, 32, 48 and 180 pixels before you download.
The HTML tags to add
After you download the package, paste these lines into the head section of your pages (the tool shows them under HTML code, with a Copy code button, and the ZIP includes them in favicon-html.txt):
- <link rel="icon" href="/favicon.ico" sizes="48x48">
- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
- <link rel="manifest" href="/site.webmanifest">
- <meta name="theme-color" content="#ffffff"> with your background color, which tints the browser bar on some phones
Apple, Android and SVG details
The Apple touch icon should be a square without transparency. iOS rounds the corners itself and fills transparent areas with black, so a transparent logo can end up on a black tile. The generator always gives this file a solid background (your background color, or white if you switched it off) and keeps it square.
The site.webmanifest file lists the 192 and 512 pixel icons together with the site name and colors. Android uses it for the home screen icon and installed web apps. Android may also crop icons into a circle or another shape; if your logo touches the edges, add padding so nothing important is cut off. Some sites add a separate maskable icon with extra space around the logo for this purpose.
An SVG favicon stays sharp at any size and can even switch colors in dark mode with a CSS media query inside the file. Support is good in current desktop browsers but not universal, so treat it as an addition: keep favicon.ico and the PNGs, and if you have a clean SVG logo, add a line such as <link rel="icon" type="image/svg+xml" href="/icon.svg"> yourself. The generator also accepts an SVG as the source image and renders it sharply at every size.
Designing an icon that works at 16 pixels
At 16 by 16 there are only 256 pixels, so a full logo with a wordmark becomes unreadable. Successful favicons use one strong shape or one or two letters.
- Use the symbol from your logo without the company name, or your initials. The generator's Text option makes a clean icon from one to three letters.
- Keep lines thick. Anything thinner than about one twelfth of the icon disappears at 16 pixels.
- Use high contrast between the symbol and the background. Check the tab preview in both the light and the dark version, because many people use dark browser themes.
- Fill the space. Large padding makes the icon look tiny next to other tabs; between 0 and 10 percent usually looks right, a little more for circle shapes.
- A colored background with the Rounded or Circle shape gives a recognizable tile; a transparent background works if the symbol has enough contrast on both light and dark tabs.
Common problems and fixes
- The old icon still shows: browsers cache favicons for a long time. Open the file directly, reload with Ctrl+F5, or add a version to the address, for example favicon.ico?v=2.
- Google shows a generic globe: make sure the favicon is reachable without login, is not blocked in robots.txt and is square. It can take days or weeks until search results update.
- The icon on the iPhone home screen is black around the edges: the Apple icon had transparency. Use the file from the generator, which has a solid background.
- The icon looks blurry: the source image was small. Use an image of at least 512 pixels or an SVG.
- The icon is missing on some pages: the tags are only in the template of some pages, or the paths are relative. Use paths starting with a slash, as in the generated code.