How to make a favicon pack
- Add your logo. Click the box or drag a PNG, JPG, SVG, WebP or GIF onto it. A square image with a clear subject works best; the tool centres the image inside each icon.
- Set the site name and look. The name goes into
site.webmanifestfor Progressive Web App installs. Adjust padding, pick a background (transparent, white, black, teal or a custom hex colour) and choose whether corners are square, rounded or circular. - Press Generate favicon pack. Previews update at 16, 32 and 180 pixels. Then download the ZIP, which holds every PNG size, a multi-size
favicon.ico, the web manifest and a short HTML snippet. - Add the files to your site. Put the icons in your site root (or an
/icons/folder and update the paths), paste the snippet into your page<head>, and link the manifest.
What is in the ZIP
| File | Size | Used for |
|---|---|---|
favicon.ico | 16, 32 and 48 px (PNG frames) | Classic browser tab icon; place in the site root. |
favicon-16x16.png … favicon-512x512.png | 16, 32, 48, 96, 192, 512 | Modern <link rel="icon"> entries and high-DPI tabs. |
apple-touch-icon.png | 180×180 | Home-screen icon on iPhone and iPad. |
android-chrome-192x192.png, android-chrome-512x512.png | 192 and 512 | Android / Chrome PWA icons referenced by the manifest. |
site.webmanifest | — | PWA name, theme colour and icon list. |
snippet.html | — | Ready-to-paste <link> tags for your <head>. |
Tips for a sharp favicon
- Start large. A 512×512 or larger source keeps fine detail when the tool scales down to 16 px.
- Keep it simple. A single mark or letter reads better at 16 px than a full wordmark. Test the 16 px preview before you publish.
- Padding. A little padding (around 10%) stops the mark from touching the edge of the tab or rounded mask. Use 0% if your logo already has built-in margins.
- Background. Transparent PNGs suit light and dark browser chrome. Apple touch icons often look better on a solid colour because iOS may fill transparency with black.
- Square source. Non-square images are fitted inside the square with your padding; nothing is cropped unless the source itself is already cropped.
After you download
Upload the files to your website, paste the HTML snippet into every page template (or your site-wide head include), and hard-refresh to clear an old cached favicon. If you already resize product photos, the Image Resizer & Compressor uses the same private, in-browser approach. For alt text and SEO file names on product shots, try the Image SEO Text Generator.
How this tool works
The tool uses the Canvas API built into every modern browser. Your image is opened on the device, drawn onto square canvases at each size with the padding, background and corner style you chose, encoded as PNG, packed into a multi-size ICO, and zipped together with a small manifest and HTML snippet. No image is sent to our server or any other service, so it is safe for unreleased logos and brand marks, and it keeps working on a slow connection once the page has loaded.
Pull HEX and RGB colours from a photo first with Color Palette from Image. For a shop logo in an email footer, see the Email Signature Generator.
Frequently asked questions
Is this favicon generator free?
Yes. There is no sign-up, no watermark and no limit on how many packs you create. Everything runs in your browser.
Are my logos uploaded to a server?
No. The image is opened, resized and packed by code running in this browser tab. It never leaves your device, and closing the tab removes it.
What size should my source image be?
Use a square PNG or SVG at least 512×512 pixels when you can. Larger sources stay sharper at 16 px. SVG works in browsers that can draw SVG to canvas.
Do I need both favicon.ico and the PNG files?
Yes for widest support. Older bookmarks and some desktop browsers still look for favicon.ico in the site root, while modern browsers prefer the PNG link tags and the web manifest.
What goes in the HTML head?
The download includes snippet.html with link tags for the ICO, PNG icons, Apple touch icon and the web manifest. Paste those into your site template and adjust paths if you keep icons in a subfolder.
Why is there padding?
Without padding, a logo can touch the edges of a rounded tab icon or home-screen mask and look cramped. About 10% padding is a common default; set 0% if your artwork already has margins.
Can I use a transparent background?
Yes. Choose Transparent for PNG icons and the ICO frames. If you pick JPG-only hosts later you will need a solid colour instead. Apple touch icons often look cleaner on white or your brand colour.
Will this work offline?
After the page has loaded once, generation needs no network. Download links are blob URLs that stop working when you reload or close the tab, so save the ZIP while it is open.