Updated
A favicon generator turns one square image into every icon file a website needs, from the tiny tab icon to the large icons used on phone home screens. Drop the logo, pick a background and download the complete pack as one ZIP.
Tabs, bookmarks and home screens each ask for a different size, and producing every version by hand is slow work. Here the whole set comes from a single source file.
Inside the ZIP
- favicon.ico, which packs three sizes (16, 32 and 48 pixels) into one file and covers browser tabs and older software.
- favicon-32x32.png and favicon-16x16.png for current browsers.
- A 180 by 180 pixel apple-touch-icon.png, used for the home screen shortcut on phones and tablets.
- icon-512.png and icon-192.png, the large sizes for installable web apps.
- site.webmanifest, with both large icons already listed in it.
Picking a source image
The best source is a square image no smaller than 512 pixels on each side. A transparent PNG is ideal, and an SVG works too. Keep the design simple: shrunk to 16 pixels, a complete logo with a slogan turns into a blur, so many brands cut their favicon down to a single letter or the logo's symbol.
A rectangular image is never stretched. It is placed in the middle of a square, and the leftover space becomes transparent or white, whichever you choose. To fill the square with the picture instead, crop it beforehand with Crop Image.
How to generate a favicon pack
- Drop your logo as a PNG, JPG or SVG, ideally square.
- Choose whether empty areas should be transparent or white.
- Click Generate icons and save the ZIP.
- Unpack the ZIP into your site's root folder.
- Paste three link tags into the head section of each page.
Installing the icons on your site
After unpacking, favicon.ico has to sit at the top level of the site, because some software asks for /favicon.ico directly instead of reading tags. The three link tags then point at the rest of the pack:
- favicon-32x32.png, linked with rel icon.
- apple-touch-icon.png, linked with rel apple-touch-icon.
- site.webmanifest, linked with rel manifest.
Browsers are slow to let go of an old favicon. To see the new one straight away, open the site in a private window or force a hard refresh.
Packs for several sites at once
Making icons for a handful of client sites? Drop a batch of logos and get one complete pack per logo. Without an account a batch takes up to 5 images of up to 50 MB each, within a daily allowance of 20 server jobs. A free account raises that to 10 images per batch and 50 jobs a day. Pro accepts up to 500 files of up to 500 MB with no daily allowance, and credits pay for a single large job without a subscription.
Where the icons are made
On our servers in Germany. The image travels to us over an encrypted connection, and both the upload and the finished pack are deleted automatically within two hours.
FAQ
Is favicon.ico still worth including?
Yes. Modern browsers mostly follow the link tags to the PNG files, but older browsers and some tools still request /favicon.ico on their own, and a missing file shows up as errors in the server logs.
The old icon still shows after the update. Why?
Browsers keep favicons in their cache for a long time. A private window shows the current file, and a version query on the link makes browsers fetch it again.
Will a JPG logo work?
It works, but a JPG cannot be transparent, so the icons end up on a solid background.
Why does the saved home screen icon show a white box?
Some phones fill the transparent parts of a home screen icon. Picking white as the background, or using a source image with a solid color behind the logo, gives a cleaner result.