Favicon Generator
Turn a logo, a couple of letters, or an emoji into the complete modern favicon set — then see exactly how it looks in Google results, browser tabs, and on an iOS and Android home screen before you download. Everything renders in your browser; your artwork is never uploaded.
Drag & drop your logo, or browse
PNG, JPG, WebP or SVG · at least 512×512 · or press Ctrl/⌘+V to paste
Add a logo, some letters, or an emoji first.
Google search result
Google shows your favicon beside the result on mobile. A missing one leaves a grey globe.
My Website
My Website — Everything in one place
A short meta description. Google pairs this with your favicon on mobile, which is where the icon does most of its work.
Browser tab — light and dark
The real test. At 16px, detail disappears — if it is unreadable here, simplify the artwork.
Home screen — iOS and Android
iOS composites transparency to black, so the touch icon always gets an opaque plate. Android masks the icon to the device's shape.
iOS — apple-touch-icon.png
Android — icon-maskable-512.png
Bookmarks bar
Bookmarks show the icon at 16px with almost no text, so the icon carries the whole identity.
Actual-size ladder
Every size the browser might pick, drawn at actual scale.
1. Paste this into your <head>
The complete modern set — four tags, not forty. Every path matches the folder you set above.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#FFFFFF">2. Or let an AI assistant install it
Paste this into Claude Code, Cursor, or Copilot with your repo open. It detects your framework first, then places the files and wires the tags correctly.
3. Where the files go on your platform
Pick your stack. Each guide links to that platform's official documentation.
Drop the files next to your index.html and paste the snippet into the head of every page.
- Upload every file from the ZIP to your site root, so favicon.ico resolves at https://yoursite.com/favicon.ico.
- Paste the generated snippet inside <head> on every page — a template or include is ideal so it stays in one place.
- Hard-refresh with Ctrl/Cmd + Shift + R to get past the favicon cache.
site.webmanifest
Already in your ZIP. If your project has a manifest already, merge this icons array into it instead of linking a second one.
{
"name": "My Website",
"short_name": "My Site",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#FFFFFF",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}A favicon generator that tells you what to do with the files
A favicon is the small icon browsers show in the tab, the bookmarks bar, the history list, and the mobile home screen. Google also puts it next to your listing on mobile search — so when it is missing, a grey globe sits where your brand should be. It is the smallest piece of design on your site and one of the most repeatedly seen.
Generating the images is the easy half. The half that actually breaks sites is knowing which files are still needed in 2026, which are dead weight, and where each one goes in your particular framework. This tool produces the modern set, shows you exactly how it renders in Google and on a phone home screen before you commit, and then hands you the head snippet, the manifest, per-platform install steps, and a prompt you can drop straight into an AI coding assistant.
Everything runs in your browser. Your logo is rendered with the Canvas API on your own device and the ZIP is assembled in memory — nothing is uploaded to StatFlare or anywhere else. That is a genuine difference from most favicon generators, which send your artwork to a server to process it.
How to create a favicon
Choose your source
Upload a logo (PNG, JPG, WebP or SVG), type one to three letters for a monogram, or pick an emoji. SVG uploads unlock a true vector favicon.svg in the output.
Shape and pad it
Pick a square, rounded, squircle or circle plate, set the background colour or make it transparent, and adjust the padding, scale and rotation. Everything redraws live.
Check the real previews
See exactly how it will look in a Google search result, a light and dark browser tab, an iOS home screen, an Android adaptive mask, and a bookmarks bar — before you download anything.
Download and install
Grab the ZIP, upload the files to your site, and paste the generated head snippet. Or copy the AI setup prompt into Claude Code or Cursor and let it place the files for your framework.
What favicon sizes you actually need in 2026
Most generators still hand out forty files. Six do the job, and every extra one is a real request a browser or crawler can make — so a stale icon is not neutral, it is a 404 in your logs.
| File | Size | What uses it |
|---|---|---|
| favicon.ico | 16, 32, 48 | Browser tabs, bookmarks, and crawlers that request /favicon.ico directly without reading your HTML. |
| favicon.svg | vector | Any modern browser. Stays sharp at every density and can swap colours in dark mode. |
| favicon-96x96.png | 96×96 | PNG fallback, and the size Google prefers when choosing a search-result favicon. |
| apple-touch-icon.png | 180×180 | iOS and iPadOS home screens. Must be opaque — iOS renders transparency as black. |
| icon-192.png | 192×192 | Android home screen and the PWA install prompt. |
| icon-512.png | 512×512 | PWA splash screens and app listings. |
| icon-maskable-512.png | 512×512 | Android adaptive icons. Art padded into the 80% safe zone so a circle mask cannot clip it. |
| site.webmanifest | — | Names the app, sets the theme colour, and declares the icons with correct purposes. |
Not on that list, deliberately: browserconfig.xml and the mstile-*.png set. Those existed only for the Windows 8 and Windows 10 Start-screen tile, which no supported Windows build renders any more. The long ladder of Apple touch icon sizes is gone too — iOS has downscaled a single 180px icon for years.
What this generator does
Three ways to start
- Upload a logo — PNG, JPG, WebP or SVG
- Type a 1-3 letter monogram with full typography control
- Turn any emoji into a complete icon set
- SVG uploads produce a true vector favicon.svg
- Nothing is uploaded — every icon renders in your browser
Real design control
- Square, rounded, squircle and circle plates
- Any background colour, or fully transparent
- Independent padding, scale and rotation
- A separate opaque plate colour for the iOS touch icon
- Theme colour and manifest background set independently
Previews that match reality
- Google search result, desktop and mobile
- Browser tab in both light and dark themes
- iOS home screen tile
- Android adaptive icon under a circle mask
- Bookmarks bar and pinned-tab rendering
Output you can trust
- Multi-resolution favicon.ico with 16, 32 and 48px packed in
- Correctly padded maskable icon as its own file
- Web app manifest with valid icon purposes
- Copy-paste head snippet, no guesswork
- An AI setup prompt for Claude Code, Cursor or Copilot
- No browserconfig.xml or mstile files — obsolete since Windows 10
Setup guides for every platform
The files are identical everywhere — only the destination folder and the way you declare the tags change. Each guide in the tool above links to that platform's own documentation.
Plain HTML
CodeDrop the files next to your index.html and paste the snippet into the head of every page.
Next.js
CodeApp Router can pick icons up from the app/ directory automatically, or you can declare them in the metadata export.
React / Vite
CodeVite serves everything in public/ from the root, so the files go there and the tags go in index.html.
WordPress
No codeWordPress calls it the Site Icon and generates its own sizes from one square upload.
Shopify
No codeShopify exposes a favicon field in the theme editor — no code needed.
Squarespace
No codeSquarespace calls it the Browser Icon and takes a single square image.
Webflow
No codeWebflow takes both a favicon and a separate webclip image in project settings.
Astro
CodeFiles go in public/, tags go in your base layout's head.
Nuxt
CodeFiles go in public/, and the link tags are declared in the app.head config.
SvelteKit
CodeFiles go in static/, tags go in src/app.html.
Favicon questions, answered
What is a favicon and why does my site need one?
A favicon is the small icon a browser shows in the tab, the bookmark list, the history menu, and the mobile home screen. It is the only piece of your brand that appears next to your site in a row of twenty other tabs. Google also shows it beside your result on mobile search, so a missing favicon leaves a blank grey globe where your logo should be — which measurably costs click-through.
What favicon sizes do I actually need in 2026?
Far fewer than most generators still hand out. The modern set is: favicon.ico containing 16, 32 and 48px for browser tabs and crawlers; an SVG icon for any display density; a 180x180 apple-touch-icon.png for iOS home screens; and 192x192 plus 512x512 PNGs for Android and PWA installs, with a separately padded 512x512 maskable icon. That is it. The old ladder of 20-plus Apple sizes and the Windows mstile set are no longer used by any supported browser.
Is browserconfig.xml or mstile still needed?
No. Those files existed only for the Windows 8 and Windows 10 Start-screen tile, which no supported Windows build renders any more. Shipping them is not harmless either — each one is a real file a browser or crawler may request, so a stale mstile reference just adds 404s to your logs. This generator deliberately does not produce them.
Are my images uploaded to a server?
No. Every icon is rendered in your own browser using the Canvas API, and the ZIP is assembled in memory on your device. Your logo is never transmitted to StatFlare or to any third party, and nothing is stored. That is a real difference from most favicon generators, which upload your artwork to their servers to process it.
Why does my favicon look blurry or muddy at 16 pixels?
Because 16x16 is roughly the size of a full stop, and detail that reads fine on a business card turns to mush there. Two fixes matter most: simplify the artwork to one shape or one letter rather than a full wordmark, and increase the contrast between the icon and its background. This tool also downscales in halving steps instead of one jump, which avoids the aliasing you get from a naive resize — but no resizing method can rescue a logo that is simply too detailed for the size.
Why is my Android home-screen icon getting its edges cut off?
Because the manifest declares the icon as "maskable" without the art being padded for it. Android applies a device-specific mask — a circle, a squircle, a teardrop — and only the centre 80% of a maskable icon is guaranteed to survive. Declaring a single file as "any maskable" is the most common manifest bug there is. This generator emits a separate icon-maskable-512.png with the art placed inside the safe zone, and keeps the plain "any" icons unpadded.
Why does my iOS home-screen icon have a black background?
Because iOS does not honour transparency in an Apple touch icon — it composites any transparent pixels to black rather than leaving them clear. The fix is to always give the touch icon an opaque background plate. This tool does that automatically and lets you set the plate colour separately from the rest of the set, so you can keep a transparent favicon for browser tabs while iOS still gets a solid tile.
How do I make a favicon that changes with dark mode?
Use an SVG favicon with a prefers-color-scheme media query inside it. Because an SVG favicon is just markup, you can embed a <style> block that swaps the fill when the browser is in dark mode, and the tab icon then adapts on its own. It only works for the SVG icon — .ico and .png are static bitmaps — which is one more reason to ship an SVG alongside the .ico rather than instead of it.
Google is not showing my favicon in search results. Why?
Google has its own requirements beyond the browser's. The icon must be a multiple of 48x48 (48, 96 or 144 works well), must be crawlable — not blocked by robots.txt — must live at a URL that stays stable, and must be declared with a supported rel value such as icon, shortcut icon or apple-touch-icon. Google also re-crawls favicons on its own schedule, so a change can take days to appear. A 96x96 PNG plus a root favicon.ico, both crawlable, satisfies every one of these conditions.
Do I still need favicon.ico at the site root?
Yes, and it is the one file people most often skip. Plenty of crawlers, feed readers, link-preview bots and older browsers request /favicon.ico directly without ever parsing your HTML for link tags. If it is not there, those clients get a 404 and fall back to a blank icon no matter how perfect your head markup is. Keep it at the root even when your other icons live in a subdirectory.
Can I make a favicon from just text or an emoji?
Yes. Pick the Text mode to render a monogram of one to three letters with your own font weight, colour and background, or the Emoji mode to turn any emoji into a full icon set. Both are genuinely useful for a side project, a docs site, or an internal tool where commissioning a logo is not worth it — and both produce exactly the same complete file set as an uploaded logo.
How do I install the files with an AI coding assistant?
Copy the generated setup prompt and paste it into Claude Code, Cursor, Copilot, or any coding agent working in your repository. The prompt tells the agent to detect your framework first, place the files in the right static directory, and wire up the head tags the way that specific framework expects — including the Next.js App Router trap where using both the app/ file convention and a metadata icons export makes the browser request two competing sets.