What a favicon is
A favicon is the tiny icon in the browser tab, right next to the page title. The same little image shows up in bookmarks, in your history, on desktop shortcuts and, when someone saves your site to a phone’s home screen, as the “app” icon. It’s the smallest face of your brand. A site without one displays a generic blank sheet and quietly signals neglect; a good one lets a reader spot your tab at a glance among twenty others.
This tool builds a favicon two ways, both running entirely in your browser: type one or two letters (or an emoji) over a color you choose, or upload an image that gets cropped to the center and scaled down to every size. Then you download a full pack of PNGs, the classic favicon.ico, and the ready-to-paste HTML snippet.
The sizes you actually need today
For years the advice was to ship a dozen different icons. In 2026 the sensible list is short:
| File | Size | Used for |
|---|---|---|
favicon.ico | 16 and 32 px | Universal fallback, even old browsers |
favicon-16x16.png | 16 px | Tab on standard screens |
favicon-32x32.png | 32 px | Tab on sharp (retina) screens |
apple-touch-icon.png | 180 px | iPhone and iPad home screen |
icon-192x192.png | 192 px | Android and installable web apps (PWA) |
icon-512x512.png | 512 px | PWA install splash screen |
Those six files cover everything from an old browser to a modern phone. The 192 and 512 versions only matter if your site is a PWA with a manifest.json; for an ordinary website, the .ico plus the 16, 32 and 180 px PNGs are enough.
PNG or ICO
The .ico format is the old Windows container: it can hold several sizes inside one file. Our favicon.ico bundles the 16 and 32 px versions so the browser can pick whichever it needs.
Modern browsers, however, display PNG without any trouble and with better results, because PNG supports true transparency and finer color. So the 2026 recommendation is simple: serve the PNGs for today’s browsers and keep the favicon.ico as a safety net for very old ones. You don’t have to choose between them — use both, which is exactly what this tool produces.
How to install it
Upload the files to the root of your site (the same folder as your home page) and paste this into the <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<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">Save, reload, and check the tab. If you still see the old icon, that’s the browser cache: reload with Ctrl + F5, or open the page in a private window.
Worked example
Say a shop is called “Blue Harbor”. You pick the text mode, type BH, set a navy background (#1E3A8A) with white letters, and choose the rounded shape. The preview updates instantly. You press “Generate the pack” and get six PNGs (16 to 512 px) plus a favicon.ico of roughly 5 KB that carries the 16 and 32 px versions inside. You download the ZIP, drop the files into your site’s root, paste the four lines of HTML, and after one Ctrl + F5 the tab shows BH in navy. Every step ran on your own machine — no image ever left it.
Frequently asked questions
What sizes do I really need?
For a normal website: favicon.ico, the 16 and 32 px PNGs, and the 180 px apple-touch-icon. If your site is an installable app (PWA), add the 192 and 512 px icons to your manifest.json. This tool hands you all six at once, so you’re never short.
ICO or PNG?
Both. Modern browsers prefer PNG for its sharpness and transparency, but favicon.ico remains the fallback for old browsers and for tools that simply request /favicon.ico. Shipping both costs nothing and prevents surprises.
How do I put it on my website?
Copy the generated files into your site’s root folder and paste the HTML snippet above into the <head> (there’s a button to copy it). If you use WordPress, Wix or similar, look in the settings for a “site icon” or “favicon” option and upload the 512 px PNG there; the platform builds the rest.
Does my image get uploaded anywhere?
No. All the drawing and encoding happen on your own browser’s canvas. You can verify it by disconnecting from the internet — the tool keeps working exactly the same.