Favicon Generator
One image in, a complete favicon pack out — every size plus the HTML to paste.
Done
How to make a favicon
- Drop a PNG, JPG or WebP logo onto the box above. The status line reports the source dimensions and tells you if the image is not square.
- Check the previews. Your icon is drawn at 16, 32, 64 and 180 pixels against a chequerboard, so you can see whether it still reads at the size a browser tab uses.
- Copy the HTML snippet underneath — the four
<link>tags that belong in your page's head. - Press Download Favicon Pack to get editzap-favicons.zip, then unzip it into your site's root folder and paste the tags into every page's head.
What people use it for
A favicon is the small square that identifies your site in a browser tab, a bookmark list or an icon on a phone's home screen. Building the set by hand means exporting eight images at different sizes and writing a manifest — exactly the sort of fiddly job worth doing in one pass.
- Finishing a new site before it goes live, so tabs do not show a blank sheet of paper.
- Refreshing the icons after a rebrand, when the old logo still appears in bookmarks.
- Giving a client's WordPress, Shopify or static site an icon set without opening a graphics editor.
- Adding home-screen icons to a web app so it looks right once installed on a phone.
- Producing icons for an internal tool that colleagues keep open in a tab all day.
Good to know
The ZIP contains eight PNGs — 16, 32, 48, 64 and 128 pixels, an apple-touch-icon.png at 180 for iOS home screens, and Android Chrome icons at 192 and 512 — plus a site.webmanifest and a head-tags.html holding the same snippet shown above. Two honest caveats. The manifest's name and short_name fields are left empty for you to fill in, and its theme colour defaults to white, so open it in a text editor before uploading. And the pack is PNG only: no legacy .ico file is produced, which is fine for every current browser.
What you feed in decides the result. A square, simple, high-contrast image works best, because the icon is displayed tiny — at 16 pixels a full wordmark becomes an unreadable smear, while a single letter, a monogram or one bold shape survives. Start from the largest version you have; downscaling is done in progressive halving steps to keep edges crisp. A non-square image is centred on a transparent square instead of being stretched, and a PNG with transparency keeps it. All the resizing and the ZIP packing happen on your own machine, so an unreleased logo dropped here goes no further than your browser — not something you can assume of a site that uploads first. To square up or tidy the source, use Resize Image and Crop Image; QR Code Generator is next door for the other small square a site often needs.
Questions people ask
Do I need an .ico file?
Not for any browser in current use — the PNG icons and the link tags cover them all. Only very old versions of Internet Explorer required favicon.ico, and this pack does not include one.
My logo is wide, not square. Will it work?
It will be centred on a transparent square rather than stretched, so nothing is distorted, but it ends up small and thin. A cropped detail or a single initial almost always looks better as an icon than a full horizontal logo.
Where exactly do the files go?
Upload them all to the root of your site, so /favicon-32x32.png and /site.webmanifest resolve, then paste the four link tags into the head of every page. If you keep icons in a subfolder, adjust the paths in both the tags and the manifest.
Why is my old icon still showing?
Browsers cache favicons hard. Reload with the cache bypassed, or open the icon's URL directly to confirm the new file is there. It usually sorts itself out within a day.