Favicon Generator
Create every favicon size your site needs — from an image you upload or a letter design you build here — plus the HTML to install them.
A real favicon set is not one file: browsers, phones, Windows tiles and PWA installers each
want different sizes in different formats. This tool renders your design once at 512×512 and
derives the whole set from it — PNGs from 16×16 up to 512×512, a multi-size
favicon.ico, an iOS home-screen icon and PWA manifest icons — then hands you
copy-ready HTML markup and a single ZIP download.
Build your favicon set
It is read locally in your browser — never uploaded.
“Fill” centre-crops non-square images to a square first (what most favicon tools do); “Fit” keeps the whole image and fills the empty space with your background. Padding and corner radius shape the icon; keep important detail away from the very edge, since iOS and Windows apply their own masks.
A two-letter monogram is the most common generated favicon. Pick a bold weight and high contrast — at 16×16 px, thin fonts and low-contrast colours disappear.
How it will look
<!-- generate a set to get the markup -->
<!-- select the 192×192 or 512×512 size to get a manifest -->
Which favicon sizes do you actually need?
Modern browsers are flexible — a single well-chosen set covers virtually everything. The defaults checked above (16, 32, 48, 180, 192 and 512) are the set most sites ship:
| Size | Used by | Notes |
|---|---|---|
| 16×16, 32×32 | Browser tabs, bookmark bars | The classic favicon. 32 covers retina displays; most browsers downscale from it happily. |
| 48×48 | High-DPI tabs, older browsers | Cheap insurance — a few hundred bytes in the ZIP. |
| 96×96, 144×144 | Windows tiles (legacy / 8 / 10) | Only relevant if you pin your site to a Windows taskbar or start menu. Off by default. |
| 150×150, 180×180 | iOS / iPad home screen | iOS ignores the regular favicon and looks specifically for an apple-touch-icon. 180 is the current standard; 150 covers older devices. |
| 192×192, 512×512 | PWA / installable web app | Required in your web app manifest for “Add to Home Screen” / install prompts. Chrome on Android also uses 384. |
ICO vs PNG vs SVG favicons
- ICO is a container format: one
.icofile can hold several sizes (this tool embeds the 16, 32 and 48 PNGs inside). It remains the universal fallback served at/favicon.ico, because browsers that find no declared icon request exactly that URL. - PNG is what modern browsers actually prefer when you declare it with a
sizesattribute — they pick the closest match to the display. PNG also supports transparency, which ICO does not do well at small sizes. - SVG favicons scale perfectly and are supported by Chrome, Firefox and Safari as a declared icon type, but iOS home screens and Windows tiles ignore them, and some corporate browsers block them. That is why the ZIP here is raster-only — it works everywhere. In text mode you can additionally download a standalone SVG of your monogram for use elsewhere (logos, docs, social cards).
How browsers pick your favicon
- They read the
<link rel="icon">tags in your<head>, match each file’ssizesattribute against the tab’s pixel density, and pick the closest fit. - iOS does not use those tags for the home screen — it looks specifically for
<link rel="apple-touch-icon">. Without it, your site gets a greyed-out screenshot of the page instead of your icon. - PWA installers read the icons array in your web app manifest (
manifest.json) — 192 and 512 are the sizes Google’s documentation calls out. For maskable icons (Android adaptive), keep all important content inside the central 80% so the OS can crop the corners. - If none of the above is found, they fall back to requesting
/favicon.icofrom the server root — which is why shipping the ICO still matters even in 2026.
Install it on your site
Download the ZIP, upload every file to your web root (next to index.html or your
static folder), and paste the generated markup into your <head> — for a
Django site that is templates/base.html, just above </head>.
The paths in the markup assume the files sit at the site root; if you put them in
/static/icons/, update the href values to match.
Related tools
Suggested
