What is a Favicon?
The favicon is the small icon browsers show in the tab, bookmarks, history, and search results next to your site’s name. It’s also what phones use when someone adds your site to their home screen. A site without one gets a generic gray globe — the web equivalent of an unlabeled folder — so it’s usually the last 1% of polish every project needs.
What Does This Tool Do?
Drop a logo and get every file a modern site needs, generated in your browser (your logo is never uploaded):
| File | Size | Used by |
|---|---|---|
favicon.ico | 16 + 32 + 48 px packed | Browser tabs, bookmarks, legacy browsers |
icon-16.png / icon-32.png / icon-48.png | individual PNGs | Modern browsers via <link> tags |
apple-touch-icon.png | 180 px | iOS home screen |
icon-192.png | 192 px | Android home screen / PWA manifest |
icon-512.png | 512 px | PWA splash screens, app stores |
The ready-to-paste <head> snippet is included — copy it, drop the files in your site root, done. Non-square logos are center-cropped to square automatically.
How to Use This Tool
- Drop your logo (or click to browse) — a square PNG or SVG export of 512 px or larger gives the best results.
- Review the generated sizes in the preview grid — check especially the 16 px one.
- Download
favicon.icoand the PNG sizes you need. - Copy the HTML snippet into your site’s
<head>.
Designing a Logo That Survives 16 Pixels
The tab icon is 16×16 — 256 pixels total — and most logos die there. What survives: one bold shape, high contrast, and no text (letters become noise below 32 px; a single initial is the exception). If your full logo has a symbol plus wordmark, favicon the symbol alone. Test the 16 px preview above at arm’s length: if you can’t tell what it is, simplify. Big brands maintain a separate simplified mark for exactly this reason.
Frequently Asked Questions
Is my logo uploaded anywhere?
No — resizing and the .ico packing happen entirely in your browser. The tool works offline once the page is loaded.
Do I still need a .ico file in 2026?
Mostly for insurance: every modern browser accepts PNG favicons via <link> tags, but many crawlers, older browsers, and tools still request /favicon.ico by convention. Since it costs nothing to include, ship both — that’s what the generated snippet does.
Why does my favicon look blurry in the tab?
Usually the browser is downscaling a large image itself. Providing true 16 and 32 px files (as generated here) lets the browser pick the exact size instead of resampling — the difference is visible on standard-density displays.
Can I use an SVG favicon instead?
Modern browsers support <link rel="icon" type="image/svg+xml">, and it’s a great primary option — scalable and theme-aware. Keep the generated .ico and PNGs as fallbacks; Safari in particular has been late to SVG favicon support.
Where do I put the files?
The site root (so they resolve at /favicon.ico, /icon-192.png, etc.), matching the generated snippet. If you place them elsewhere, update the href paths accordingly.
What about the web app manifest for PWAs?
A PWA’s manifest.json references the 192 and 512 px PNGs generated here in its icons array. The snippet covers the <head> side; add the manifest entries if you’re shipping a PWA.