Favicon Generator
Every favicon size from one image.
Runs entirely in your browser. Nothing you enter or upload leaves your device.
What the favicon generator does
A favicon is the small icon that browsers show in tabs, bookmarks and history, and that phones use when someone adds your site to their home screen. Each place expects a different size, so a site needs a handful of files rather than one.
This generator makes the whole set from a single logo, or builds a simple icon from a letter, your initials or an emoji on a coloured shape. You also get the HTML tags and a web manifest, so you don’t have to write them by hand.
How to use the favicon generator
Create every favicon a modern website needs from one image or a single letter.
- Drop a square logo, ideally 512 × 512 px or larger, or switch to From a letter or emoji and choose colours.
- Check the previews. Click any size to download it on its own, or download everything as a ZIP.
- Upload the files to the root of your site and paste the HTML tags into your page’s <head>.
Understanding the results
You get six PNGs at 16, 32, 48, 180, 192 and 512 pixels square, plus a favicon.ico that holds the 16, 32 and 48 pixel versions. The ZIP adds site.webmanifest and favicon-snippet.html, which contains the tags. The tags use paths starting with a slash, which is why the files belong in the root folder of your site.
Every size is scaled down from a 512 × 512 master, so a logo smaller than that will look soft in the larger icons. At 16 pixels fine detail and thin text disappear, and a bold, simple mark or a single letter reads far better. In letter mode you can type up to three characters, and the text shrinks to fit as you add more. Emoji are drawn with your device’s own emoji font, so the icon matches how that emoji looks on your system.
Questions
Which files do I actually need?
favicon.ico for older browsers and tools, a 32 × 32 PNG for browser tabs, the 180 × 180 apple-touch-icon for iPhones and iPads, and the 192 and 512 px icons with the web manifest for Android and installable web apps.
How is a logo that isn’t square handled?
Choose whether to fit it inside a square with transparent padding or to crop the centre.
What is the app name used for?
It goes into the manifest as your site’s name, and its first 12 characters become the short name used where space is tight. In letter mode the manifest’s theme colour is your background colour; with an image it is white.
Why does my favicon not update?
Browsers cache favicons for a long time. Hard-refresh the page or open it in a private window to see the new icon.
Is my logo uploaded?
No. All sizes, the ICO file and the ZIP are made in your browser.