Favicon Generator

Turn a single logo into every icon file a site needs, plus the tags that point at them.

Runs on your deviceImagesWorkingNo account needed

What this tool does

Favicon Generator renders your source image at each size a site actually declares: 16, 32, 48 and 96 px PNGs, a favicon.ico holding the 16, 32 and 48 px versions, a 180 px apple touch icon, and 192 and 512 px Android icons. Alongside them it writes a site.webmanifest and a favicon-tags.html snippet listing the <link> and theme-colour lines to paste into your <head>. Large reductions are done by repeated halving rather than one jump, which is what keeps a 1024 px logo from turning into an aliased smudge at 16 px.

The settings decide how each render is composed. Padding, from 0 to 25 per cent, pulls the artwork in from the edges for a square logo that would otherwise touch them. The background colour sits behind the Apple touch icon and becomes the manifest splash colour; the flatten checkbox extends that colour behind every other icon too, and leaving it off keeps the PNGs transparent. The Apple touch icon is flattened regardless, because iOS renders transparent pixels as black. Theme colour goes into the manifest and the meta tag that tints browser UI on Android.

The work happens in this browser tab using canvas — the picture you choose is not uploaded anywhere, and the tool keeps working with the network off. Three shortcomings are worth reading before you generate a set. A source smaller than 512 px means the largest icons are enlarged rather than sharpened, and the result summary flags any source that small. The output is raster only: there is no SVG icon, no Safari pinned-tab mask icon and no browserconfig.xml for Windows tiles, so a site that wants those has to add them by hand. And favicon-tags.html comes from a fixed template rather than from the boxes you ticked: it always declares /favicon.ico, and it never mentions the 96 px PNG, so read the snippet before pasting it.

How to use it

  1. Choose one source image. One file per run. It reads JPG, PNG, WebP, GIF, BMP and SVG, plus AVIF on recent browsers. A square PNG of 512 px or more gives every size room to work.
  2. Name the site for the manifest. Site name is what appears when someone adds the site to a home screen. Short name is the truncated label under the icon, and falls back to the site name when left empty.
  3. Set the theme and background colours. Theme colour tints browser UI on Android and the tab strip on some desktop browsers. Background colour sits behind the Apple touch icon and drives the manifest splash screen.
  4. Add padding if the logo runs to the edge. The slider insets the artwork by up to 25 per cent inside every icon, which also gives an Android launcher mask something to crop into.
  5. Pick which files you need, then download. Each of the .ico, Apple icon, Android icons and manifest can be switched off; the 16, 32, 48 and 96 px PNGs and the tags file are always written. Files download individually, or together as one ZIP. Switching the .ico off does not remove its line from the snippet — delete that one by hand.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Setting up a new site properly

A single 512 px PNG left to browsers to downscale is the usual shortcut. Dedicated 16 and 32 px renders are what make the tab icon legible.

Making a web app installable

Android reads the 192 and 512 px icons from site.webmanifest, and iOS uses the 180 px apple touch icon when someone adds the page to their home screen.

Fixing an icon that looks wrong in a tab

A detailed logo shrunk in one step loses its edges. Re-rendering at each size, with a little padding, usually recovers the shape.

Rolling out a rebrand

Feed in the new mark, keep the same colours and padding, and replace the whole set at the site root in one pass rather than file by file.

Questions

Is my logo uploaded anywhere?
No. Decoding, scaling and PNG encoding all happen in this browser tab through canvas, so the image never leaves it. That is also why the tool still runs with the network disconnected.
What size should the source image be?
At least 512 px square. Anything smaller is enlarged to fill the 512 px Android icon, which adds no detail — the summary flags any source under 512 px so you know the largest file is soft.
Do I still need favicon.ico?
Not for current browsers, which take the PNG links. It is worth keeping because feed readers, older Windows software and some link-preview bots request /favicon.ico from the site root and read nothing else. Note that this .ico stores PNG data rather than BMP data; Internet Explorer 10 and earlier expect BMP entries and will ignore it.
Where do the generated files go?
The site root. The paths written into favicon-tags.html and site.webmanifest all begin with a slash, so if you deploy the icons into a subfolder you have to edit those paths to match.
Why is the Apple touch icon not transparent?
iOS paints transparent pixels black, so that icon is always flattened onto the background colour you chose. The other PNGs keep their transparency unless you tick the flatten option.
Are the Android icons maskable?
The manifest declares the 512 px icon as "any maskable", but nothing here enforces Android's safe zone. A launcher mask can crop into the outer edge, so if your artwork reaches the border, raise the padding to roughly 10 to 20 per cent before generating.
Can it read a HEIC, TIFF or PSD logo?
No. Browsers ship no decoder for those, so the file is refused before anything is rendered. HEIC and TIFF are named in the message; a PSD or camera RAW file is refused as a design file. Export the artwork as PNG or JPG first, then bring it back here.

Related tools