Free Online Favicon Generator
Your photo is decoded and edited in this tab. It stays local, including whatever its metadata says about where it was taken.
Loading the tool…
How it works
What an .ico actually contains
ICO is a container format, not an image format: a directory header followed by one or more entries, each of which may hold either a BMP bitmap or, since Vista, a complete PNG file. Every browser still in use reads PNG-compressed entries, so a modern .ico is simply three PNGs — 16, 32 and 48 pixels — wrapped in a directory. That file exists to answer the automatic request for /favicon.ico that browsers, feed readers and link previewers still make when no markup tells them otherwise.
- ICO container
- 16, 32 and 48 pixel entries, PNG-compressed inside the directory. Served at /favicon.ico so it is found without any markup.
- apple-touch-icon
- 180×180 PNG. iOS composites it onto an opaque background, so transparency is flattened onto a matte colour rather than left alone.
- Maskable PNGs
- 192 and 512 pixels for Android and PWA installs. Android may crop to a circle or squircle, so keep the mark inside the central 80%.
- Webmanifest snippet
- The icons array with sizes, type and purpose fields, plus the link tags for the head — copy them straight into your project.
- Source image
- Square and at least 512 pixels. Anything smaller is upscaled, and a non-square source is padded rather than stretched.
How to use it
How to generate a favicon online
- 01
Drop in a square source image
512 pixels or larger, PNG or SVG. It is read from disk and rendered locally.
- 02
Set the background for opaque icons
Apple's touch icon and the maskable sizes need a solid backdrop; pick the colour rather than letting iOS choose black.
- 03
Download the set and paste the snippet
A ZIP of the .ico and PNGs, with the manifest entries and link tags to copy into your head.
Where it earns its keep
Where the full favicon set is needed
- Setting up a new site's icons in one pass instead of exporting six sizes by hand.
- Adding the Android and PWA install icons a site is missing from its manifest.
- Replacing a stretched or blurry favicon that was made from a wrong-sized source.
- Generating icons for a client's brand mark without uploading their artwork anywhere.
Questions
Favicon Generator, answered
Do I still need a favicon.ico at all?
Yes, though only as a fallback. Browsers request /favicon.ico automatically when the markup does not point anywhere, and so do plenty of feed readers, crawlers and chat link previewers. It is a small file that quietly prevents a lot of 404s.
Can it make a good favicon from a wide logo?
No. At 16 pixels a wordmark is an unreadable smudge, and no amount of resampling fixes that. Use the mark, monogram or symbol from your logo rather than the full lockup — a favicon has room for one shape.
Is my logo uploaded to generate the icons?
No. Every size is rendered and encoded in this browser tab, and the ZIP is assembled locally. Unreleased branding never reaches a server.
Why is my transparent icon showing a solid background on iOS?
Because iOS does not support transparency in the touch icon and composites it onto black. That is why a background colour is applied when the 180×180 is generated — choosing it yourself is better than getting Apple's default.