What Is Favicon Generator?
Favicon Generator creates the set of favicon files a website needs from an emoji, a letter or an uploaded image: PNGs at six sizes, a multi-size favicon.ico, an SVG, the Apple touch icon, the web app manifest and the HTML to link them, downloaded as one ZIP.
How to Use This Tool
Pick an emoji, type a letter, or upload a square image (512×512 px or larger works best), then choose the background, colours, padding and corner shape. The tool renders 16×16, 32×32, 48×48, 180×180 (Apple touch icon), 192×192 and 512×512 PNGs, packs 16, 32 and 48 into favicon.ico, and previews them in a mock browser tab. Download everything as one ZIP with the HTML to paste into your site’s head. 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?+
One ZIP with ten files: favicon-16x16.png, favicon-32x32.png and favicon-48x48.png for browser tabs and search results, apple-touch-icon.png (180×180) for iOS home screens, favicon-192x192.png and favicon-512x512.png for the web app manifest, favicon.ico containing the 16, 32 and 48 px images, favicon.svg, site.webmanifest (name, icons, theme colour, display mode) and snippet.html with the link tags and theme-color meta to paste into your head. Each PNG can also be downloaded on its own.
Should I use an emoji, letter, or uploaded image?+
Emojis are quick and usually stay readable at 16×16. A single letter on a coloured background is a simple, consistent mark. Uploaded images suit sites with an existing logo, but use just the symbol: a logo with words becomes a smudge at 16×16. Note that an emoji or letter favicon.svg is drawn with the visitor's own emoji or system font, so it can look different on each device; the PNGs and ICO are fixed images.
Why do I need so many sizes?+
Each size has a job. 16×16 and 32×32 cover browser tabs on standard and high-density screens. 48×48 matters for Google Search, which requires a favicon that is a multiple of 48 px square (or an SVG) to show it in results. 180×180 is the Apple touch icon iOS uses for home-screen shortcuts. 192×192 and 512×512 are the sizes Chrome expects in a web app manifest for installing a site as an app. Browsers that support SVG favicons can use favicon.svg in tabs, but iOS home screens and app install flows still use the PNGs.
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 original container format: one file holding several bitmap sizes (here 16, 32 and 48 px, stored as PNG data). Browsers and other software that look for /favicon.ico by default will find it, and Google's own example uses a .ico link. favicon.svg is a single vector that stays sharp at any size and can include a prefers-color-scheme media query for a dark-mode variant. Shipping both, with PNG fallbacks, covers current browsers and older tools.
How do I install the favicons on my site?+
Click Download Full Favicon Set and unzip favicons.zip. Upload the eight image files and site.webmanifest to your site's root folder (next to index.html). Paste the contents of snippet.html into your head, ideally near the top. In a framework such as Next.js, Astro or Nuxt, put the files in its public/static folder and the snippet in the root head or layout. Then reload with the cache cleared, or open the files' URLs directly to check they load.
Which favicon sizes does the generator produce?+
PNGs at 16, 32, 48, 180 (apple-touch-icon), 192 and 512 px; a favicon.ico holding 16, 32 and 48 px; and an SVG. The 48 px PNG and the ICO meet Google Search's rule that a favicon be a multiple of 48 px square.
Should I use a dark and light favicon variant?+
It can help where a dark mark disappears on dark browser chrome. The way to do it is an SVG favicon with a prefers-color-scheme media query inside it. This generator does not create that dual-mode SVG for you; you can add a style block with the media query to the exported favicon.svg by hand. For PNGs, the simpler route is one design that reads on both light and dark backgrounds, such as a coloured mark on a solid square.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service