Favicon Checker

Browsers and platforms agreed on a small set: 16×16 (browser tab), 32×32 (taskbar / bookmark), 48×48 (Windows Site icon), 96×96 (Chrome desktop shortcut), 180×180 (Apple Touch Icon, used by iOS Home Screen and Safari Reading List), 192×192 (Android Home Screen / Chrome PWA), 512×512 (Android splash / PWA install icon). The generated tags cover all of these.

SVG if your icon is geometric and you can keep file size small – it scales cleanly to every size. PNG otherwise, with a separate file per size (or a multi-size ICO for legacy browsers). Avoid JPG (lossy compression destroys small-icon detail) and GIF (no transparency, dated). Animated favicons work in Chrome but not Safari.

Because downscaling. A 512×512 detailed icon becomes a 16×16 mush when the browser nearest-neighbour scales it down. The fix: design the favicon at 16 and 32 px explicitly (or ship an SVG that’s been “icon-designed” – generous strokes, no thin lines). The preview at 16 px is your reality check.

rel="icon" is the standard W3C link for browsers (tabs, bookmarks). rel="apple-touch-icon" is an Apple extension used when a user adds your site to the iOS Home Screen – Safari uses the apple-touch-icon as the home-screen tile. Modern Android also reads it. They’re separate rels and need separate tags; the generator emits both.

Yes. The dropzone is a real one – drop a file from your file manager onto the dashed area. The hover state shows when a drag enters; release to load. Same as clicking and using the file picker – both call the same loader.

Format (warns on JPG/GIF, suggests PNG/SVG; reminds you to ship a PNG fallback for SVG-only setups). Aspect ratio (warns if the image isn’t square – browsers will distort or letterbox). Source size (warns if smaller than 64 px because Apple Touch Icon will upscale and blur; flags 512+ px as ideal). All checks fire on decoded dimensions, not on assumptions.

Most common: browser cache. Hard refresh (Ctrl/Cmd + Shift + R). Next: wrong path – open DevTools → Network → reload, look for a 404 on your href. Next: the favicon file isn’t actually at the path you specified (check via direct URL, e.g. https://example.com/favicon.ico). Next: in a subdirectory deploy, your href may need a different prefix. The tool generates correct tags but can’t see your hosting layout.

Some legacy .ico files use codepaths that browsers don’t expose through the <img> tag – multi-frame ICOs, BMP-encoded payloads, exotic colour-depth headers. SVGs with referenced fonts also fail. When this happens, the tool still loads the file and generates link tags (those just use the byte content directly), but the preview row may not render. The stats line tells you when this happens.

No. The page loads three static files (HTML, CSS, JS) and runs entirely in your browser. The favicon is decoded with the File API and Canvas – no fetch, no XHR, no analytics, no cookies. You can disconnect from the internet after the page loads and the tool still works.