Favicon Generator ZIP contents: what each file is for (and where to put it)
Downloaded a favicon ZIP and not sure what is required? Here is what each file does, where it belongs, and how to verify it on a live site.
If you want a complete favicon setup with minimal guesswork:
- Generate a pack with the Favicon Generator.
- Validate your deploy with the Favicon Checker.
This post explains what is in the ZIP, what you can ignore, and how to deploy it without breaking paths.
The shortest correct install
Do this:
- Copy the files into
/favicons/on your site (recommended). - Paste the generated
<head>snippet into your HTML layout. - Run the Favicon Checker on your live URL.
If you do not want /favicons/, that is fine. But you must update every href in the snippet to match where you put the files.
What is inside the ZIP (and what uses it)
Your ZIP contains a small set of "platform essentials" plus extra sizes so browsers do not upscale.
favicon.ico (multi-size)
This is the legacy icon format. A good ICO embeds multiple sizes so Windows and browsers can pick the closest match.
If you only have a PNG and want an ICO, you can also generate one with PNG to ICO.
favicon-*.png (multiple sizes)
These PNGs power modern browser tabs, bookmarks, and high-DPI displays.
You will usually see sizes like 16 and 32 used directly by browsers. Larger sizes exist for better scaling and for other contexts.
apple-touch-icon.png (180x180)
This is for iOS home screen icons ("Add to Home Screen").
If your iPhone icon looks wrong while your browser tab icon looks fine, this file is often the missing piece. See Apple touch icon fixes.
site.webmanifest
This file supports PWA installs and provides extra icon definitions and app metadata.
If you do not care about installs, you can still keep it. It is small, and it improves coverage.
If you want the deeper PWA view, read site.webmanifest icons: PWA basics without the fluff.
browserconfig.xml
This is for Windows tiles (mainly older Windows and some Microsoft integrations).
You can ship it as-is. It is harmless, and it avoids mystery gaps if a platform expects it.
html-snippet.txt
This is the "paste this in your <head>" file. It links to your icons, your manifest, and optional extras like dark mode variants.
If your favicon is not showing, start here. Most failures are a snippet path problem, not an image problem.
README.txt
This is a quick human guide for what is in the pack.
A safe folder layout that avoids path bugs
A clean setup looks like this:
public/
favicons/
favicon.ico
favicon-16.png
favicon-32.png
apple-touch-icon.png
site.webmanifest
browserconfig.xml
Then reference everything with /favicons/... URLs in your snippet.
If you put icons in the site root instead, your URLs change to href="/favicon-32.png", and so on.
Example: the <head> snippet you should expect
Your exact snippet depends on options, but it will look close to this:
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16.png" />
<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
If you enabled dark mode variants, you will see additional tags that include a media="(prefers-color-scheme: dark)" condition.
Common ZIP deploy mistakes (and fast fixes)
You copied the files, but not the folder
If your snippet points to /favicons/... but you uploaded the icons to the site root, nothing will load.
Fix:
- Either create the
/favicons/folder and move the files there, or - Update every
hrefin the snippet to match your real paths.
You updated one file, but the page still links to the old one
Example: you replaced favicon.ico but forgot that your HTML still points to /favicons/favicon-32.png.
Fix:
- Replace the whole set from a single ZIP, and paste the snippet again.
Your browser shows the old icon because it is cached
Favicons can stay stale even after you deploy the right files.
Fix:
- Add a cache-busting query string to the PNG links, or rename the files, then update the snippet.
This checklist walks through the fastest sequence: Favicon not updating? Fix it with a cache-busting checklist.
Verify on a live URL (the only test that counts)
After you deploy:
- Run the Favicon Checker on your live URL.
- Look for 200 status codes, no redirects, and matching sizes.
If the checker shows 404s, the problem is almost always a path mismatch in your snippet.
Privacy and uploads
When you generate a ZIP, your image is uploaded for server-side processing so the site can produce your icons and snippet.
Details live in the privacy policy.
Related tools
- Need only a multi-size ICO? PNG to ICO
- Have an ICO and want to extract sizes? ICO to PNG
- Want to audit your deploy? Favicon Checker