Favicon generator
Turn one picture into favicon.ico and the PNG icons a site needs, with the tags to paste.
Drop an image to start
Runs in your browser. Nothing is uploaded.
A favicon is not one file any more. Browsers still fetch `/favicon.ico` whether you link it or not, iOS wants a 180-pixel PNG for a home-screen shortcut, and a web app manifest asks for 192 and 512. This writes all of them from a single source image, so the set matches instead of being assembled over three years from whatever was to hand.
The `.ico` holds 16, 32 and 48 pixel versions in one file, which is what that format is for: the browser picks the size it needs for the tab, the bookmark bar or the desktop shortcut without another request. It is written here byte by byte rather than by a service, and each version is drawn from the full-resolution original rather than scaled down from the one above it.
The crop is the centre square, because every place an icon appears is square. A wide logo will lose its ends, so a mark rather than a wordmark is the thing to feed this — at 16 pixels a name is unreadable anyway. Transparency is kept unless you put a colour behind it, which is worth doing for a dark logo that would otherwise vanish into a dark browser theme.
Step by step
- 1Drop in a square-ish logo or picture.
- 2Choose what goes behind it — transparent, white or black.
- 3Download the set and copy the three link tags into your page head.
Questions
What sizes do I actually need?
A favicon.ico with 16, 32 and 48 inside it, a 180-pixel apple-touch-icon for iOS, and 192 and 512 PNGs for the manifest. That is the set this writes, and it covers current browsers and phones.
Where do the files go?
In the root of your site, next to index.html, and then the three link tags go in the page head. favicon.ico is found even without a tag, but the others have to be named.
Can I use a photo?
You can, but it will be a smudge at 16 pixels. A simple mark with strong contrast and few details is the only thing that survives the smallest size.
My logo is wide — what happens?
It is cropped to its centre square, so the ends are lost. Prepare a square version, or use the symbol from the logo rather than the full lockup.