Every web project needs favicons, and producing them is a five-minute job that somehow takes everyone longer than it should. The modern set is six PNG sizes plus a multi-resolution .ico file plus a PWA manifest plus the HTML link tags. Each individually is trivial; assembling them by hand is tedious. This tool does the assembly in your browser, no upload, no service to learn.
What’s in the output zip
favicon-16x16.png — browser tab, standard density
favicon-32x32.png — browser tab, HiDPI screens
favicon-48x48.png — Windows taskbar shortcut
apple-touch-icon.png — iOS home screen (180×180)
android-chrome-192x192.png — Android Chrome
android-chrome-512x512.png — PWA / Android Chrome (large)
favicon.ico — multi-resolution: 16, 32, 48 bundled
site.webmanifest — PWA manifest with name and icon refs
snippet.html — <link> tags to paste into <head>Drop all of them at the root of your site (/favicon.ico, /site.webmanifest, etc.) and add the snippet to your <head>. Done.
What HTML to paste
The snippet.html file contains:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Modern browsers pick the right PNG based on display density and browser conventions. Safari uses the apple-touch-icon for the iOS home screen. Chrome on Android uses the manifest’s icons array. The .ico is the fallback for older browsers and the only file Windows Explorer reads.
Source image guidance
A 512×512 square PNG with transparent background is ideal. The tool downscales using the browser’s Canvas API which produces clean results across the size range.
If your source is rectangular, the default mode fills the square (which distorts the image). Switch to “Letterbox” to preserve the aspect ratio with background padding — recommended for wordmarks and rectangular logos.
If your source is SVG, the tool draws it at each target size. Vector input gives the cleanest possible favicons because there’s no upscaling artefact at the larger sizes.
Example: starting from a logo PNG
You have a square 512×512 logo PNG. Upload, set the app name to your project’s name, leave background as default white. Click Generate. All six sizes render below. Inspect the 16×16 preview — if your logo’s fine details disappear at that size, consider creating a separate simplified mark for the favicon set (most brands have one for exactly this reason).
Example: starting from a Figma export
Export your icon from Figma as a 1× PNG at the largest size you want (typically 512×512). Upload here. The downscale path produces consistent output across all sizes. If you re-export at multiple sizes from Figma, you might get different rendering hints (text rasterisation, line snapping) — using one source and downscaling here gives consistent results.
Common mistakes
Source too small. Uploading a 64×64 source produces fine 16/32/48 favicons but blurry 192/512 PWA icons. Always start from the largest size you’ll need.
Forgetting the manifest. Without site.webmanifest, Android Chrome won’t use your 192/512 PNGs as the home-screen icon — it’ll fall back to a generic browser icon. The manifest is small (~200 bytes); always include it.
Caching gotcha. Browsers and operating systems cache favicons aggressively. After deploying a new favicon, your own browser may show the old one for hours. Hard refresh (cmd+shift+R / ctrl+shift+R) usually fixes browser; Windows taskbar icons need an explicit cache clear.
Distorting non-square logos. The default fill mode distorts rectangular sources. Use “Letterbox” mode for wordmarks and rectangular logos to preserve their aspect ratio.
What this tool does not do
It doesn’t generate .icns files for macOS .app bundles. That’s a separate workflow (use iconutil on macOS).
It doesn’t provide a SVG favicon. Modern browsers support SVG favicons (<link rel="icon" href="/favicon.svg" type="image/svg+xml">) — if you have a clean SVG source, run it through the SVG optimiser and host the result at /favicon.svg in addition to the bundle from this tool.
It doesn’t validate the produced favicon set against the live site. After deploying, tools like RealFaviconGenerator’s checker verify the link tags are correct and the files load.
It doesn’t generate Open Graph images, social cards, or other “share preview” assets. Those have very different aspect ratios (1.91:1 for OG, square for some platforms) and warrant a separate workflow — the social media image sizes reference has the current dimensions for each platform.