What a complete favicon set looks like in 2026
A favicon used to be one 16 pixel file. Today it is a small family of images, because a browser tab, a bookmark bar, an iPhone home screen and an Android install prompt each ask for a different size and format. Miss one and that place shows a generic globe, a gray letter or a blurry upscale of the tab icon.
| File | Size | Who asks for it |
|---|---|---|
favicon.ico | 16, 32, 48 px | Every desktop browser, plus feed readers and tools that request /favicon.ico without reading your HTML |
favicon-32x32.png | 32 px | Browser tabs on high density screens |
favicon-16x16.png | 16 px | Browser tabs at standard density |
apple-touch-icon.png | 180 px | Safari on iPhone and iPad when someone adds your site to the home screen |
android-chrome-192x192.png | 192 px | Android home screen shortcut, listed in the manifest |
android-chrome-512x512.png | 512 px | Install prompt and splash screen, listed in the manifest |
site.webmanifest | text | Chrome and Android: your site name, theme color and the two icons above |
The generator draws each size separately from your original, rather than scaling the large PNG down, so the small icons stay as crisp as the source allows. Start from an SVG logo with no breathing room and no background and the zip also gets a favicon.svg, which modern browsers can use at any size.
Logo, letters or emoji: which start works best
Best when the logo has a symbol or monogram that survives being 16 pixels wide. Use the symbol alone, not the full lockup with the name.
The fastest clean result for a wordmark brand: your initial, white on your brand color, on a rounded tile.
Fine for a side project, a landing page or an internal tool. It renders with each visitor's own emoji font, so it will not look identical everywhere.
Design for 16 pixels first
At tab size you have 256 pixels in total. Thin strokes vanish, gradients turn muddy and any text smaller than the tile becomes a smudge. Zoom the preview's 16 px icon in your head to the size of a fingernail: if you cannot tell what it is, simplify. A thick shape, two colors and strong contrast survive. Then check it on both a light and a dark tab, since many people browse in dark mode and a black mark on a transparent background disappears there. That is what the Brand color background is for.
Transparent or filled
A transparent background lets the mark sit directly on the tab, which looks cleaner when the mark itself is dark on light or bold enough for both themes. A filled tile is safer: it reads on any tab color and matches the app icon look of a phone home screen. iOS does not show transparency on the home screen, which is why the Apple touch icon in the zip always gets a solid background, white if you chose none. To check that the mark stands out from its tile, run the two colors through the color contrast checker: graphics need at least 3:1 under WCAG.
Installing the files
- Unzip
favicon.zipand upload every file to the root of your site, the same folder as your home page, so thatyourdomain.com/favicon.icoopens the icon. - Paste the lines from
favicon-html.txtinside the<head>of every page, or of your site template so every page gets them. - Open the site in a private window. If the old icon still shows, that is the browser cache: favicons are cached far longer than pages.
- Run the checker above on your address to confirm each file answers and has the size it claims.
On a site builder you usually do not paste HTML at all. WordPress has a Site Icon setting (in the Customizer or the site settings, depending on your theme and version), and most hosted builders have a favicon or site icon field in their settings. Give those the 512 pixel PNG from the zip and let the platform make the smaller sizes.
Getting your favicon into Google results
Google shows a site's favicon next to its results on mobile and desktop. According to Google Search Central, the icon must be square and at least 8 by 8 pixels, Google recommends larger than 48 by 48, and the supported formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not on that list, so keep the ICO and PNG files even if you also ship an SVG. The icon has to be declared in the head of your home page, both the page and the icon file must be crawlable, and Google says a change can take from several days to several weeks to appear.
Once the icon is settled, record it with the logo files and colors in your brand guidelines, so the next developer does not redraw it.
Methodology and limits
- Drawing
- Everything is drawn in your browser on a canvas. Each size is rendered separately from the original: a large image is first halved step by step until it is close to the target size, then drawn once more with high quality smoothing, which keeps small icons sharper than a single big reduction. Letters and emoji are drawn with the fonts on your device.
- Files
- favicon.ico holds 16, 32 and 48 pixel images. PNGs at 16, 32, 180, 192 and 512 pixels. favicon.svg only when the source is an SVG with no background and no breathing room, so the vector is a faithful copy. The manifest lists the 192 and 512 pixel icons with your name and theme color.
- Sizes, and why these
- 16 and 32 for browser tabs, 48 inside the ICO for larger desktop uses, 180 for the Apple touch icon, 192 and 512 for the Android home screen and install prompt. For Google results, Google Search Central asks for a square icon of at least 8 by 8 pixels and recommends larger than 48 (read October 13, 2026).
- Checker
- Our server fetches the address you type, reads the icons declared in the page head, requests /favicon.ico and the manifest, and decodes each file to measure its real pixel size. Pages that take more than 10 seconds time out. Each check uses 1 unit of a daily allowance of 100, shared with our other URL checkers.
- Privacy
- Your logo never leaves your device. The checker only receives the address you type.
- What it does not do
- No maskable icon for Android's adaptive shapes, no dark mode variant and no animated icon (a GIF gives its first frame). It cannot clear your browser's cache or tell you when Google will show the new icon.