The favicon set a site actually needs in 2026
Favicon advice online is full of leftovers: dozens of Microsoft tile sizes, Safari pinned tab masks and twenty Apple icon variants. Modern browsers and operating systems have settled on a much smaller set. This tool builds exactly that set and nothing else:
- favicon.ico with 16, 32 and 48 pixel images inside. It lives in your site root because some browsers, feed readers and crawlers request
/favicon.icowithout reading your HTML. - favicon-32x32.png and favicon-16x16.png for browser tabs, bookmarks and history.
- apple-touch-icon.png at 180 pixels for iPhone and iPad home screens.
- android-chrome-192x192.png and 512x512, referenced from the web manifest, for Android home screens and install prompts.
- site.webmanifest, a small JSON file describing your app name, colors and icons.
Installing the pack
Unzip the download into the root of your site, next to your homepage index.html, then paste the head code into every page. On WordPress, upload the files to the root folder over FTP or your host's file manager, and add the tags through your theme's header settings or a header-code plugin. On Hostinger and other Apache hosts the root is usually public_html.
public_html/ favicon.ico favicon-16x16.png favicon-32x32.png apple-touch-icon.png android-chrome-192x192.png android-chrome-512x512.png site.webmanifest index.html
Designing an icon that survives 16 pixels
A browser tab icon is smaller than a fingernail. Fine lines, gradients and words vanish at that size. The icons that work are bold and simple: a single letter, a solid shape, or the symbol from your logo without the wordmark. Check the tab previews above in both the light and dark browser themes, because a dark navy icon can disappear completely on a dark tab bar. If that happens, give the icon a solid background tile with the corner radius control.
Letter and emoji icons
The letter mode is a fast way to get a sharp, on-brand icon when you do not have a logo file. Use your brand's accent color for the tile and keep the text size around 60 to 70 percent. Emoji work too, though they render using the visitor's system emoji font, so the generated PNG will look like the emoji set on the computer you made it on.
Uploading an image
Start from the largest square version you have, ideally an SVG or a PNG of at least 512 pixels. The tool downsizes in steps, halving the image each time, which keeps edges cleaner than a single jump from 512 to 16 pixels. Add a little padding if your mark touches the edges.
How the files are built
Everything runs in your browser. The PNGs come from a canvas, the ICO file is assembled byte by byte as a standard icon container holding PNG images, and the ZIP is written without compression since PNGs are already compressed. Nothing is uploaded anywhere.
Frequently asked questions
Do I still need a favicon.ico file?
Yes, keep one in your site root. Some browsers, RSS readers and crawlers request /favicon.ico directly without reading your HTML. The file this tool makes holds 16, 32 and 48 pixel versions in one container.
Why is my new favicon not showing?
Browsers cache favicons aggressively. Hard refresh, open the site in a private window, or add a version query such as /favicon.ico?v=2 to the link tags. Google search results can take days or weeks to pick up a new icon.
Should the apple-touch-icon be transparent?
No. iOS fills transparent areas with black and applies its own rounded corners. This tool always exports the apple-touch-icon as a full square with a solid background for that reason.
What image works best as a source?
A square PNG or SVG at least 512 pixels wide with a simple, bold shape. Detailed logos and long wordmarks turn to mush at 16 pixels, so use just the icon or first letter of your brand.