A website needs its icon in several sizes: a tiny one for browser tabs, a larger one for bookmarks, and bigger PNGs for when someone adds the site to a phone home screen. Making each by hand is tedious. This tool builds the set from one image.
What is in the pack?
Everything comes in one ZIP:
- favicon.ico with 16, 32 and 48 pixel versions inside, for browser tabs and older tools.
- favicon-16x16.png and favicon-32x32.png for modern browsers.
- apple-touch-icon.png at 180 by 180, for iPhone and iPad home screens.
- icon-192.png and icon-512.png for Android and installable web apps.
- site.webmanifest, which already lists the two large icons.
What image should I start from?
A square image at least 512 by 512 pixels, ideally a PNG with a transparent background, or an SVG. Simple shapes work best: at 16 pixels, a full logo with a tagline becomes an unreadable smudge. Many brands use just the initial letter or the symbol from their logo for the favicon.
If your image is not square, it is centred in a square without being stretched, and the empty sides are transparent or white, as you choose. Crop it first with Crop Image if you would rather fill the square.
How do I add it to my site?
Unzip the pack into the root folder of your website, so favicon.ico sits at the top level. Then add link tags to the head of your pages: one with rel set to icon pointing to favicon-32x32.png, one with rel set to apple-touch-icon pointing to apple-touch-icon.png, and one with rel set to manifest pointing to site.webmanifest. Browsers cache favicons stubbornly, so a hard refresh or a private window helps you see the change.
What happens to my upload?
The icons are generated on our server. Your image is uploaded over an encrypted connection, processed in Germany, and deleted with the pack automatically within two hours.
Is it free?
Yes. It is free without an account for images up to 50 MB, with 20 server jobs a day before Pro or credits come in. Building icon sets for several client sites? Drop up to 5 logos at once for free and get one pack per logo.
How to make a favicon
- Drop a square PNG, JPG or SVG onto the drop zone.
- Choose a transparent or white background, and click Generate icons.
- Download the ZIP and unzip it into your website's root folder.
- Add the link tags to your page head.
FAQ
Do I still need a favicon.ico?
Most modern browsers use PNG icons from link tags, but some tools and older browsers still request /favicon.ico directly. Including it avoids errors in your server logs.
Why is my favicon still the old one?
Browsers cache favicons for a long time. Try a private window, or add a version query to the link.
Can I use a JPG?
Yes, but JPG has no transparency, so the icon will have a solid background.
Why does my icon have a white box on iPhone?
iOS fills transparent areas of the home screen icon. Choose the white background option, or a solid-coloured source image, for a cleaner look.