What Is Favicon Generator?
Favicon Generator creates the full set of favicon files your website needs — including ICO, PNG at multiple sizes, Apple Touch Icon, and the web app manifest icons. Upload one source image and get every format and size required for cross-browser and cross-device compatibility.
How to Use This Tool
Upload a square image (ideally 512×512px or larger) and the tool generates favicons at all standard sizes: 16×16, 32×32, 48×48, 180×180 (Apple Touch), and 192/512 for PWA manifests. Preview each size, then download the complete package with the HTML markup to paste into your site’s head tag. Everything is processed in your browser.
Why Use Favicon Generator?
Getting favicons right means generating multiple sizes in multiple formats with correct markup — a surprisingly fiddly task. This tool automates the entire process from a single source image, with no design skills needed. It’s free, private, and gives you production-ready files. For a detailed walkthrough, see our step-by-step guide.
Frequently Asked Questions
What files does the Favicon Generator export?+
A complete set covering every modern surface. Five PNGs: favicon-16x16.png (browser tabs, small UI), favicon-32x32.png (retina tabs, bookmark bars), apple-touch-icon.png at 180×180 (iOS home-screen shortcut), favicon-192x192.png (Android Chrome launcher), favicon-512x512.png (PWA install splash). One SVG (scalable vector that stays crisp at any density on modern browsers). One site.webmanifest JSON declaring name, icons, theme color, background color, and display mode. And one HTML snippet with all the link rel tags, theme-color meta, and manifest reference — paste it directly between head tags. The HTML snippet is the single most-used piece, because getting favicon link tags right by hand is fiddly.
Should I use an emoji, letter, or uploaded image?+
Emojis are the fastest to ship and the most recognizable at 16×16 — a lightning bolt, a rocket, a flower stays legible even in a crowded tab bar. Letters (a single uppercase character) are the classic startup-favicon move: pair one letter with a gradient background and the whole identity reads as coherent. Uploaded images are for sites with an existing logo, but the critical constraint is simplicity: a full logo with text and detail becomes a smudge at 16×16. If you upload a logo, use just the mark (the icon portion) and make sure it has enough internal contrast to survive aggressive downscaling. The generator handles anti-aliasing automatically, but it cannot add detail that is not there.
Why do I need so many sizes?+
Each size targets a specific surface. 16×16 and 32×32 cover browser tabs on standard and retina displays. 180×180 is the apple-touch-icon spec — iOS uses it when someone adds your site to their home screen. 192×192 is Android Chrome's launcher icon, used when a PWA is added to the app drawer. 512×512 is the high-resolution icon used during PWA install splash screens and app store listings. Modern browsers also accept a single SVG for everything except iOS home-screen and PWA install flows, which is why the generator includes both PNGs and SVG. You don't strictly need every file, but shipping the full set means your favicon looks right on every device, including the ones you didn't test.
Are my uploads ever sent to a server?+
No. Everything happens in your browser. Uploads are read via FileReader into a File API object and drawn onto a canvas locally. The rendered favicons are generated with canvas.toBlob() and downloaded via a temporary object URL. No request leaves your browser after the page first loads. You can verify this in DevTools — the Network tab stays quiet through the entire generation process. This matters because logos are often unreleased brand marks under NDA, and any tool that uploads them to a server creates a compliance risk.
What is the difference between favicon.ico and favicon.svg?+
favicon.ico is the 30-year-old legacy format — a multi-resolution container that held 16×16 and 32×32 bitmaps for Internet Explorer. Modern browsers still accept it but treat PNG files of the same size identically, so you can skip .ico entirely if you ship both favicon-16x16.png and favicon-32x32.png with link rel tags. favicon.svg is the modern replacement: a single vector file that stays sharp at any size and supports CSS media queries for dark-mode variants. Chrome, Firefox, Safari, and Edge all support it. The only reason to ship .ico in 2026 is if you have significant traffic from ancient browsers (IE11 and below), which almost no one does. The generator ships PNG plus SVG by default and skips .ico.
How do I install the favicons on my site?+
Three steps. First, click Download Full Favicon Set — you will get the PNGs, the SVG, site.webmanifest, and a snippet.html file. Second, upload the six image files and site.webmanifest to the root of your site (same folder as index.html). Third, copy the contents of snippet.html and paste them between the head and /head tags of your site — ideally near the top of the head, before stylesheets. The snippet includes link rel tags for every favicon size, a manifest reference, and a theme-color meta. If you are using a framework (Next.js, Astro, Nuxt), paste the snippet into the app's root head component. Verify with the browser DevTools: open the tab, right-click the favicon, and inspect — it should show the correct file for the current device.
Which favicon sizes does the generator produce?+
The output ZIP includes the modern minimum: a 32x32 PNG, a 180x180 apple-touch-icon PNG, a 192x192 and 512x512 PNG for Android home-screen icons, an SVG icon for browsers that support it, and a site.webmanifest. The legacy multi-resolution favicon.ico (16/24/32/48) is also included since some older browsers require it. Browsers picking among formats prefer SVG, then the size-matched PNG, then the .ico as last resort.
Should I use a dark and light favicon variant?+
For best appearance against both light and dark browser chrome (tabs, bookmarks bar), serve an SVG favicon that adapts using prefers-color-scheme media queries inside the SVG. The generator can emit this dual-mode SVG when you upload separate light and dark source images. For traditional PNG favicons, a single design that works well on both backgrounds (typically a colored mark on a neutral background) is the simpler path.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service