Favicon Guide: Complete Setup for Every Browser & Device

By Priya Nair, Editor

Favicons are everywhere: browser tabs, bookmarks, home screen icons, social media previews, and PWA manifests. One icon isn't enough anymore. You need multiple sizes and formats for a complete setup.

Required Favicon Sizes

Format	Size	Use Case
favicon.ico	32x32 (includes 16x16)	Browser tabs, bookmarks (legacy support)
icon-192.png	192x192	Android Chrome, PWA manifest
icon-512.png	512x512	PWA manifest (maskable, splash), high-DPI screens
apple-touch-icon.png	180x180	iOS home screen
og:image (social preview, not a favicon)	1200x630	Facebook, LinkedIn, X cards

HTML Implementation

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Generate Your Favicon →

Pro tip: Use SVG for your source icon and generate all sizes from it. This keeps a single source of truth. Our favicon generator handles this automatically.

Maskable Icons and the PWA Manifest

Android does not display your icon as a plain square. It applies a mask, which may be a circle, a squircle, or a rounded square depending on the device and launcher, and anything outside that shape is cut away. An icon designed edge to edge will lose its corners, and a logo centred without margin can end up cropped into something unrecognisable.

The fix is the purpose field in your web app manifest. Declaring an icon with "purpose": "maskable" tells Android it may safely crop, and you design that version with a generous safe zone: keep the meaningful content inside roughly the central 80 percent of the canvas and let the outer band be background color that can be trimmed without loss. You can ship both, one entry with "purpose": "any" and one "maskable", so each context gets the right artwork.

SVG Icons and Dark Mode

An SVG favicon has two advantages over a bitmap. It stays sharp at any size, so a single file covers standard and high-density displays, and because it is markup rather than pixels it can respond to the browser theme. Embedding a prefers-color-scheme media query inside the SVG lets the icon switch fill colors when the user is in dark mode, which solves the common problem of a dark logo disappearing against a dark tab bar.

Support is good in current browsers but not universal, so an SVG is an enhancement rather than a replacement. Ship the PNG sizes and the ICO alongside it, and browsers will select what they understand.

Why Your New Icon Is Not Showing

Favicons are cached more aggressively than almost anything else a browser stores, and a normal reload usually will not refresh one. Before assuming your markup is wrong, work through the likely causes in order.

Cache. Try a hard reload, then a private window, then a different browser. If it appears anywhere, the file is fine and you are looking at a cached copy.
Path. Request the icon URL directly in the address bar. A 404 there explains everything, and a relative path that works on your homepage can break on a nested route.
Content type. The server should send an image MIME type. A misconfigured host serving the file as text/html will cause a silent failure.
Manifest scope. Home screen icons come from the manifest, not your link tags, so an outdated manifest will keep installing the old icon no matter what the head says.

A reliable trick during development is to change the filename rather than the file, for example appending a version string. A new URL cannot be served from the cache of the old one.

A Testing Checklist

Open the site in a tab with a light browser theme, then a dark one, and confirm the icon is legible against both.
Bookmark the page and check the icon in the bookmarks bar, where it renders smaller than in the tab.
Add to home screen on an iPhone and confirm the 180 pixel Apple touch icon is used rather than a screenshot.
Add to home screen on Android and confirm the maskable version crops cleanly under a circular mask.
Request /favicon.ico directly to confirm the root fallback exists and returns a 200.

Frequently Asked Questions

Do I still need an ICO file? It is no longer required by modern browsers, but keeping one at the root is a small, harmless fallback for bare requests and older clients.

Why does my icon look blurry? Usually a small source image scaled up, or a single 16 pixel file being stretched. Always generate from a large square master, ideally 512 pixels or more.

Can one SVG replace the whole set? Not reliably yet. Use it as the preferred option and keep PNGs for platforms that ignore it.

Does the favicon affect SEO? Not as a ranking factor, though Google may display it beside your result on mobile, so a legible icon helps click-through.

Bottom Line

Don't ship a website without proper favicon coverage. At minimum: favicon.ico (32x32), 192x192 PNG, 512x512 PNG, and apple-touch-icon. Use our generator to create them all from one design.