ToolNestFavicon Size Guide: Every Size You Actually Need
Browsers and devices request favicons at six key sizes: 16x16 and 32x32 for tabs, 180x180 for iOS, and 192x192 plus 512x512 for Android — plus the classic favicon.ico. Generate the full set in one click with our favicon generator; the complete breakdown is below.
The six sizes that cover everything
The favicon ecosystem looks fragmented, but six sizes cover every mainstream context in 2026. 16x16 is the classic browser tab icon — the tiny square that has identified sites since the 1990s — and still the size Google shows beside your site name in search results. 32x32 serves high-DPI (retina) tabs and Windows taskbar pinned sites, where 16 pixels would look blurry. 48x48 is Windows' site icon size for desktop shortcuts and the multi-size ICO container's largest entry. 180x180 is Apple's touch icon, used when iPhone and iPad users add your site to their home screen — iOS rounds the corners itself, so supply a full-bleed square. 192x192 and 512x512 are the Android/Chrome PWA manifest icons, required for installable web apps and used for Android home-screen shortcuts. The classic favicon.ico file bundles 16, 32, and 48 pixel versions in one container for legacy browsers and tools that still request /favicon.ico by convention. Modern best practice ships all of these: the ICO for legacy, PNGs for modern browsers, the 180px Apple touch icon, and the manifest pair for Android. Our favicon generator exports the entire set from one upload so nothing is forgotten.
What each platform requests and when
Knowing when each size fires prevents the 'it works in Chrome but not on iPhone' mystery. Desktop browsers request 16x16 or 32x32 on every tab render, preferring the SVG favicon if you supply one (more on that below) and falling back to PNG then ICO. Google Search pulls your favicon for the mobile search results display and requires it to be a multiple of 48 pixels — 48x48, 96x96, 144x144 — square, and crawlable at a stable URL. iOS Safari looks specifically for apple-touch-icon at 180x180 when a user taps 'Add to Home Screen'; without it, iOS screenshots your page instead, producing an ugly thumbnail. Android Chrome reads the web app manifest for 192x192 (homescreen) and 512x512 (splash screen) icons when the site is installed as a PWA. Windows uses 48x48 and larger for pinned taskbar sites and Start menu tiles. Bookmarks bars and history across browsers reuse the tab icons. The failure pattern is always the same: the developer tested in one desktop browser, declared victory, and never checked iOS, Android, or Google Search — the three contexts with their own distinct size requirements. Ship the full set once and the problem disappears permanently. For converting brand colors to web-ready values while designing, our RGB to hex converter keeps your palette exact.
SVG favicons: the modern shortcut
There is a seventh format worth knowing: the SVG favicon, a single vector file that scales crisply to any size. Declared with link rel='icon' type='image/svg+xml', it is supported in all modern desktop browsers and eliminates the need for multiple PNG sizes on desktop entirely. The advantages are real: one tiny file (often under 2KB), perfect sharpness at every size, and support for dark-mode-aware icons via embedded media queries — your favicon can switch colors when the browser theme changes, a detail that delights design-conscious users. The limitations are equally real: Safari on iOS ignores SVG favicons (you still need the 180px PNG), some older tooling does not recognize the format, and very detailed SVGs can render inconsistently at 16 pixels. Prototype background treatments with our CSS gradient generator before committing to a final mark. The 2026 consensus setup: SVG as the primary icon for modern browsers, PNG fallbacks at 16/32/48 for legacy, apple-touch-icon PNG for iOS, and manifest PNGs for Android. That is the full belt-and-suspenders stack, and it is exactly what our favicon generator produces. If your logo is complex, simplify ruthlessly for the SVG version — favicon design rules still apply, as common favicon mistakes details.
The minimal set vs the complete set
If you are shipping today and want the pragmatic minimum, here it is: a favicon.ico (16/32/48) at your site root, a 180x180 apple-touch-icon.png, and 192x192 plus 512x512 PNGs wired into your web app manifest. That is five files covering legacy browsers, iOS, and Android — the contexts that generate 99% of favicon impressions. Add the SVG favicon as the modern-browser primary and you are at the complete 2026 setup. What you can skip: the dozens of intermediate sizes (57x57, 72x72, 114x144) that decade-old generator tools produced for long-dead mobile browsers — no current platform needs them, and they bloat your markup. Also skippable: separate 'shortcut icon' declarations (the rel='shortcut icon' syntax is a legacy IE quirk; plain rel='icon' is the standard). Declare the icons explicitly in your HTML head rather than relying on browsers guessing /favicon.ico — explicit links load faster and behave consistently. Place the files at your site root anyway as a fallback for the tools that still request the conventional path. The full deployment walkthrough is in how to create a favicon, and our Markdown to HTML converter can format your head snippet for documentation.
How to verify every size renders
Shipping the files is not the same as shipping working icons — verify each context. Desktop: hard-refresh (Ctrl+Shift+R) and check the tab at both normal and zoomed levels; check a second browser, since Chrome and Firefox pick different fallbacks. Google Search: use Search Console's favicon report or simply search your brand on mobile and confirm the icon appears — Google requires the 48px-multiple, square, crawlable conditions above. iOS: add the site to your home screen on an iPhone and confirm the 180px icon, not a page screenshot. Android: install the PWA or add to home screen and check the 192px icon and 512px splash. Dark mode: toggle your OS theme and confirm the icon stays visible — a dark logo on transparent background vanishes on dark tabs, the most common real-world favicon bug. If an icon does not update, remember that browsers cache favicons aggressively and for a long time — clear site data or test in a fresh profile rather than concluding the files are wrong. A cache-busting version query string (like ?v=20261019) forces every context to refetch; generate the numeric value with our Unix timestamp converter so each deploy gets a unique stamp. For design-level verification at the smallest size, zoom your 16x16 PNG to 800% and confirm the mark is still recognizable; if it is mush, simplify. The design failure modes are catalogued in common favicon mistakes.