Favicon Generator
Generate a favicon bundle with PNG sizes, apple-touch icon, ICO, web manifest, and HTML tags.
What this tool does
Upload a source image and download a ZIP with favicon PNGs (16–512 px), android-chrome 192/512 names, apple-touch-icon.png, a multi-size favicon.ico, site.webmanifest, and HTML <link> tags to copy.
How to use
- Upload a PNG, JPG, or WebP logo.
- Center-crop to a square and pick a transparent, white, or dark background if needed.
- Download the ZIP, copy the HTML link tags, and place site.webmanifest at your site root.
Examples
Website favicon bundle
Input: 512×512 logo PNG
Output: ZIP with PNG sizes, apple-touch-icon.png, android-chrome icons, favicon.ico, site.webmanifest, and HTML tags
Includes tab sizes, iOS touch icon, PWA 192/512 icons, and copy-ready head tags.
Learn more
Which files you actually need
Three formats do different jobs. favicon.ico is the compatibility layer: browsers request /favicon.ico from your domain root whether or not you declare it, and Windows reads it for pinned shortcuts. PNG files handle everything modern — high-DPI tabs, the 180×180 Apple touch icon, and the 192/512 sizes a web manifest needs for Android install prompts. SVG is the sharpest option where it works, declared with type="image/svg+xml", but Safari trailed the other browsers on it, so keep ICO or PNG as the fallback rather than shipping SVG alone.
For most sites the honest minimum is favicon.ico at the root plus a 180×180 apple-touch-icon.png. Add the 192 and 512 PNGs and a manifest only once you actually want an install prompt — unused manifest icons are dead weight, not insurance.
Where the files go in your framework
Next.js App Router: drop favicon.ico in app/ (top level only — it is not picked up from nested routes), plus icon.png and apple-icon.png anywhere in app/. Next generates the head tags for you, so do not paste the HTML from this tool as well or you will ship duplicate link tags.
Vite, Astro, and plain HTML: put the files in public/ so they land at the domain root on build, then paste the generated link tags into index.html or your layout template's head.
WordPress: Appearance → Customize → Site Identity → Site Icon takes one square image and generates the sizes itself. Use that before editing theme files — a header.php edit gets overwritten by the next theme update, and the Site Icon setting survives it.
Whichever route you take, the tags belong in the document head. A link tag that ends up in the body is ignored by every browser, and it is the single most common reason a correctly generated favicon never appears.
When the new favicon will not show
Favicons are cached harder than almost any other asset, so a correct file often sits behind a stale one. Work through it in order rather than regenerating: open the file URL directly (yoursite.com/favicon.ico) and confirm it returns your new icon — if it returns the old one or a 404, the problem is the deploy or the CDN, not the browser.
If the direct URL is right but the tab is wrong, hard-refresh, then purge the CDN cache. Chrome keeps a separate favicon database that a normal cache clear does not touch; opening the site in a private window is the fastest way to confirm the file is fine and only your local cache is stale.
Two traps worth checking before you blame cache: a link tag sitting in the body instead of the head, and /favicon.ico disallowed in robots.txt. iOS home-screen icons are a special case — they are captured when the shortcut is created and only update if the user removes and re-adds it.
Renaming the file (favicon-v2.ico) forces an update, but it breaks the automatic root request and any bookmark pointing at the old path. Prefer fixing cache headers over renaming.
Designing an icon that survives 16 pixels
A favicon is rendered at roughly the size of a word's first letter. Full wordmarks, thin strokes, and photographs all turn to mush — crop to a single glyph, monogram, or the most distinctive shape in your logo instead of scaling the whole lockup down.
Test at actual size before you ship: generate the bundle, then look at the 16×16 PNG at 100% rather than judging the 512 preview. Contrast matters more than detail, and a mark that only works on white will disappear against a dark browser theme, so check both.
Common use cases
- Launch a new website
- Create PWA icon sets
- Generate favicons for static site generators
FAQ
What is in the ZIP?
PNG files for each size (16–512), apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, favicon.ico, site.webmanifest, and a text file with HTML link tags.
What source image works best?
Square, high-resolution PNGs with simple shapes work best. JPG and WebP are accepted. Use a solid background if the logo is transparent and you need a filled tab icon.
Can I copy the HTML?
Yes. After processing, use Copy HTML for link rel=icon, apple-touch-icon, and manifest tags.
Why does my favicon still show the old image?
Almost always cache. Load /favicon.ico directly to confirm the new file is deployed, then hard-refresh and purge your CDN. Chrome keeps a separate favicon store, so check in a private window before assuming the file is wrong.
Do I need favicon.ico if I use Next.js?
Put favicon.ico in the top level of app/ and Next.js emits the link tag automatically. Do not also paste the generated HTML into your layout, or you will ship duplicate icon tags.
Can I use an SVG favicon?
Yes, declared as type="image/svg+xml". Support is good in Chrome, Firefox, and Edge, but keep favicon.ico or a PNG as a fallback for Safari and for the automatic root request.
Is my image uploaded anywhere?
No. The image is read, resized, and packaged entirely in your browser. Nothing is sent to a server, which also means the tool keeps working offline once the page has loaded.
Which size should I use for PWA icons?
Include android-chrome-192x192.png and android-chrome-512x512.png from the ZIP, then reference them in site.webmanifest.
Does the ZIP include a web manifest?
Yes. site.webmanifest lists the 192 and 512 PNG names. Copy it to your site root next to the HTML link tags.
Explore related workflows
Favicon workflow
Last reviewed: 2026-09-11