Create a favicon file quickly in your browser and download it in seconds with XConvert’s favicon generator.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png"> <link rel="manifest" href="/site.webmanifest">
favicon.ico (multi-size 16/32/48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, and a copy-paste HTML <link> snippet for your site's <head>.A favicon is the small square icon a browser displays in tabs, bookmarks, history, and search results — and on mobile, the same image is repurposed as a home-screen shortcut, Android launcher icon, and PWA install graphic. Modern sites can no longer get by with a single favicon.ico; iOS, Android, Chrome's tab strip, Windows taskbar, and PWA manifests each expect a different size or format, and serving the wrong one yields a fuzzy, cropped, or blank icon in the wrong context. This tool generates every file the Mozilla MDN PWA icon guide and the major browser vendors expect, from one square source image.
/apple-touch-icon.png at 180×180 (iPhone 6 and later at 3× DPI). Miss this file and iOS falls back to a low-res screenshot of your page, which looks unprofessional next to icons from native apps.manifest.webmanifest for 192×192 (launcher icon) and 512×512 (splash screen, install dialog). Both are required for the "Install app" prompt to appear; without them, Chrome silently disables PWA installability./favicon.ico directly with no <link> parsing. The ICO file at the site root remains the universal fallback and ships in this bundle alongside the modern PNG/SVG set.@media (prefers-color-scheme: dark) to swap colors when the user flips themes. PNG-only sites pick one palette and live with poor contrast on the other.| File | Size | Purpose | Browser support |
|---|---|---|---|
favicon.ico |
16/32/48 multi-size | Legacy fallback for /favicon.ico requests from RSS readers, bots, old browsers |
All browsers since 1999 |
favicon.svg |
Vector (scalable) | Modern tab icon; supports prefers-color-scheme for dark/light themes |
Chrome 80+, Firefox 41+, Edge 80+, Safari 26.0+ (~88.5% globally) |
favicon-32x32.png |
32×32 | High-DPI browser tabs, Windows taskbar shortcuts; PNG fallback for SVG | Universal |
apple-touch-icon.png |
180×180 | iOS home-screen shortcut (iPhone 6+ at 3× DPI) | iOS Safari 8+ |
android-chrome-192x192.png |
192×192 | Android home-screen launcher; PWA manifest icon | Android Chrome, all modern mobile |
android-chrome-512x512.png |
512×512 | PWA splash screen, install dialog hero | Android Chrome, PWA installs |
site.webmanifest |
JSON | Declares PWA name, theme color, and the 192/512 icons array | Chrome, Edge, Firefox, Samsung Internet |
The four <link> tags below cover every device family with no redundancy:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
| Era | Recommended approach | Limitations |
|---|---|---|
| 1999–2010 | Single favicon.ico (16×16) at site root |
One size, blurry on Retina, no mobile support |
| 2010–2017 | ICO + apple-touch-icon (114×114 → 180×180) + multiple PNG sizes (16/32/48/96/144) | "PNG ladder" — 8+ files, every device generation added a new size |
| 2017–2022 | Trim ladder to 16/32/180/192/512 + manifest.json for PWA |
Still PNG-only; theme color baked in, no dark-mode adaptation |
| 2023–present | SVG primary + ICO fallback + 180 Apple + 192/512 PWA — 4-5 files total | SVG not yet supported on every device, so PNG fallback still ships |
Since 2023, Chrome, Firefox, Edge, and (as of Safari 26.0) iOS Safari all render SVG favicons. A single SVG with embedded @media (prefers-color-scheme: dark) rules replaces the 16/32/48/96 PNG ladder for the desktop tab strip — leaving you with favicon.ico (legacy), favicon.svg (modern desktop), apple-touch-icon.png 180×180 (iOS), and the 192/512 PNGs (Android/PWA). Five files instead of nine.
Each surface has a different pixel budget. A Chrome tab on a standard-DPI screen draws the icon at 16 px; a Retina MacBook draws it at 32 px; iOS uses 180×180 on the home screen because that's the actual size at iPhone 6+ 3× DPI; Android's launcher renders at 192×192 (or scales 512×512 down on high-DPI tablets); PWA install dialogs and splash screens want 512×512 so they have headroom on a 6.7" phone display. A single 32×32 PNG looks crisp in a browser tab and like a 16-pixel blur on an iPad home screen. Generating every size from one high-resolution source is the only way to look correct everywhere.
Yes, alongside the legacy ICO and platform-specific PNGs — not as a replacement. SVG favicons are supported in Chrome 80+ (Feb 2020), Firefox 41+ (Sept 2015), Edge 80+, and Safari 26.0+ (added iOS support in late 2025), covering ~88.5% of global browser usage per Can I Use. The win is that one vector file scales cleanly to any DPI and can embed @media (prefers-color-scheme: dark) { :root { fill: white; } } to flip colors for dark-mode tabs. Older Safari (pre-26.0) and a long tail of corporate IE/Edge legacy still need PNG fallback, which is why this generator emits both.
favicon.ico still necessary in 2026?Yes. Even when your HTML declares <link rel="icon" href="/favicon.svg">, many clients ignore the <link> tag and request /favicon.ico from the site root directly: RSS feed readers, link-preview bots (Slack, Discord, iMessage unfurl), older corporate browsers, command-line HTTP libraries, and Google's image crawler for search results. Serving a 16/32/48 multi-size ICO at the root costs ~5 KB and eliminates 404s in your server logs. Drop it only if you control every client that will ever load your site.
A maskable icon is a 512×512 PNG where the important imagery is centered inside a circle covering 80% of the canvas — Android launchers may crop the outer 20% to apply circular, squircle, or teardrop shapes depending on the device manufacturer's theme. Declare it in site.webmanifest with "purpose": "maskable". If you skip the maskable variant and only ship the standard 192/512 icons, Android launchers may add a white background or crop into your logo. Generate a maskable version by adding ~10% padding to your design before exporting.
Put favicon.ico, favicon.svg, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, and site.webmanifest at the site root (/favicon.ico, /apple-touch-icon.png, etc.). Browsers and crawlers request these paths by convention, with or without HTML hints. You can place them elsewhere if you also declare every file with an explicit <link> in your HTML <head>, but the root convention guarantees fallback behavior for clients that skip the <link> parsing.
Chrome's "Install app" prompt only appears when site.webmanifest is reachable, declares a name (or short_name), specifies a start_url, sets display: standalone (or fullscreen / minimal-ui), and includes both a 192×192 and a 512×512 PNG in the icons array. Skipping either icon size silently disables installability — there is no console warning. Add a purpose: "maskable" 512×512 variant alongside the standard ones for clean Android launcher rendering. The full ruleset is documented in MDN's Define App Icons guide.
Not with this tool — it expects an image input. For text-based favicons (e.g., the first letter of your brand on a colored square), generate a 512×512 PNG first using a design tool, pinning down the brand hex codes via a color converter to translate between HEX, RGB, and HSL. For emoji favicons, modern browsers actually accept inline SVG data: URIs with a single emoji glyph; this works at the tab level but produces no apple-touch-icon or PWA install graphic.
The generator pads or crops to square. A rectangular logo (landscape banner) will either letterbox (transparent or background-filled bars on top and bottom) or get center-cropped, neither of which looks intentional. The cleanest fix is to redesign a square mark — a monogram, glyph, or compact logo — specifically for icon use, then feed that in at 512×512 or larger. If you only have a rectangular PNG, crop it to a square before uploading; for vector originals, resize the canvas or export at the square dimensions from your design tool. Apple's icon guidelines explicitly recommend designing for the 1024×1024 master and letting the system downscale.
Hard-refresh (Cmd-Shift-R / Ctrl-F5) — browsers cache favicons aggressively and may show the old one for hours. To verify the full set is reachable: open yoursite.com/favicon.ico, /favicon.svg, /apple-touch-icon.png, /android-chrome-192x192.png, /android-chrome-512x512.png, and /site.webmanifest directly in the browser address bar — each should return 200, not 404. For the iOS shortcut, actually add the site to your home screen and inspect the rendered icon. For PWA installability, open Chrome DevTools → Application → Manifest and watch for "Installability" errors.