April 28, 2026 · Updated April 29, 2026 · Favicon Generator
How to Generate a Favicon for Website — Free, All Formats
You finish a website and remember the favicon at the last minute. You drop a singlefavicon.icointo the project root, push, and assume the job is done. Open the live site on an iPhone home screen, on Android Chrome, or pin a Safari tab — and the icon is wrong, blurry, or simply missing. That is because a favicon today is not one file. It is a small bundle of formats spread across browsers, mobile operating systems, and a couple of legacy manifests, and there is no single image that covers all of them. This guide explains exactly which files are needed, what each one does, and how to generate the full set in one pass — without uploading anything — using a free favicon generator.
Why one favicon file isn't enough anymore
The original favicon.ico spec dates back to Internet Explorer 5, when the only goal was a 16×16 pixel icon next to a browser tab. Every platform invented its own favicon convention since then, independently, and none of them agreed on a unified format. The result is the modern mess:
- Chrome, Edge, and Firefox prefer a 32×32 PNG referenced via <link rel="icon">, falling back to favicon.ico.
- iOS Safari pulls apple-touch-icon.png at 180×180 when a user adds the site to the home screen.
- Android Chrome reads the web app manifest (site.webmanifest) and uses 192×192 plus 512×512 PNGs from it.
- Windows pinned-tile icons are 150×150 PNGs declared in browserconfig.xml.
- Safari pinned tabs require a monochrome SVG with a single fill color.
- Google Search displays a favicon next to mobile results — and demands at least a 48×48 multiple referenced via rel="icon".
A complete favicon for a modern website is therefore eight to ten files plus two manifests. Generating them by hand means resizing the same image six times in an editor, exporting a monochrome SVG variant, then writing the manifests by hand. Most sites either skip half of this or pay a service to do it.
The complete list of favicon files modern websites need
The archive produced by the AI PixFix favicon generatorcontains exactly the files below. Drop the ZIP into your site's root, link them from the HTML head, and you are covered on every modern platform.
How to generate a favicon for your website in five steps
Pick a square source image
An SVG is ideal because it scales cleanly to any size. If SVG is not available, a PNG of at least 512×512 covers the largest output (android-chrome-512×512) without upscaling. JPG and WebP are accepted but produce noticeably worse small sizes.
Open the generator and drop the file
Drag the image into the upload area on the favicon generator. The tool runs entirely in your browser; the image is never uploaded to any server.
Crop to a square if the image isn't already
If the source is non-square, a 200-pixel crop viewport appears with the image inside it. Drag the image to choose which square region becomes the icon. The full master canvas is rendered at 1024×1024.
Add a background color if the image is transparent
Transparent PNGs and SVGs trigger a color picker. Pick any hex color so the icon stays readable on both light and dark OS themes — or leave the background transparent if your icon is already designed for both.
Save the archive and link the files
Click Save archive — the ZIP contains every file listed above. Unpack into your site root and add the link tags shown in the next section.
Handling non-square images and transparent logos
Two situations break naive favicon tools: a logo that isn't square, and a logo on a transparent background. Both are common — most brand SVGs are wider than they are tall, and most clean exports ship with alpha enabled.
Non-square sources would normally have to be cropped in an external editor before upload. Instead, the workspace shows a live square crop viewport with the image positioned inside — you drag the image with the pointer to pick exactly which part stays. The cropped region is rendered into a single 1024×1024 master canvas, and every output size is downscaled from there. No external tool involved.
Transparent backgrounds are detected automatically — SVGs are always treated as transparent, JPEGs never are, and PNG/WebP are inspected pixel-by-pixel for any alpha values below 255. When transparency is detected, a hex color picker appears: pick a flat background, see it composited live in the preview, or remove it to keep transparency. This matters most for monochrome logos that need a contrasting backdrop on dark macOS docks or light Windows taskbars.
How to install the generated favicons in your HTML
Place every file from the archive in the root of your site (the directory served at /). Then add the following tags inside the <head> of every page — typically in a shared layout file, not duplicated per route.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000"> <link rel="manifest" href="/site.webmanifest"> <meta name="msapplication-config" content="/browserconfig.xml"> <meta name="theme-color" content="#ffffff">
Reference for each link relation: MDN — <link> element; MDN — Web app manifest.
Where most favicon tutorials get it wrong
A surprising number of guides still recommend uploading a single PNG to a hosted service that processes the image on a server, emails you a link, or limits free output. The browser-based favicon tool on AI PixFix takes a different approach: the entire pipeline runs in the browser, so the image never leaves the device, there is no account, and no daily quota.
| Feature | AI PixFix | Hosted services |
|---|---|---|
| Image uploaded to server | No — runs in browser | Yes |
| Account required | No | Often yes |
| Output formats | 10 files including manifests | Varies; some omit Safari SVG or manifests |
| Square crop for non-square sources | Built-in viewport, drag to position | Often requires pre-cropping |
| Background color for transparent logos | Live hex picker | Sometimes |
| Cost | Free, unlimited | Free tier with limits, paid for full output |
Most hosted favicon services follow the same pattern: upload, wait, download. The browser-based pipeline simply removes the upload and the wait.
Frequently asked questions
Why does a website need so many favicon files?
Because each platform invented its own favicon system independently. Desktop browsers want favicon.ico for legacy reasons and a PNG for modern rendering. iOS Safari requires apple-touch-icon at 180×180 to support adding the site to the home screen. Android Chrome reads icon paths from a web manifest. Windows tiles use a separate 150×150 PNG and a browserconfig.xml. Safari pinned tabs need a monochrome SVG. There is no single file that covers all of them.
Which favicon file is the most important?
For pure browser-tab visibility, favicon.ico (multi-size 16/32/48) is still the only universally supported file — every browser will pick it up automatically from the site root. Everything else is needed for specific platforms: apple-touch-icon for iOS home screens, the PNG variants for Android Chrome and modern desktop, the manifest files so the icons are discovered correctly. Skipping the manifest does not break browsers, but it does break PWA installs and Android home-screen icons.
Should I use SVG or PNG as the source image?
An SVG source gives the cleanest result because it can be rasterized at any size without quality loss. If SVG is not available, a PNG of at least 512×512 px is the next best — it covers the largest output (android-chrome-512x512.png) without upscaling. JPG works but loses quality at small sizes due to compression. WebP is supported but uncommon as a favicon source.
Do favicons affect SEO?
Not as a direct ranking factor, but Google does display favicons next to the site URL in mobile search results. A missing or broken favicon makes the result look unfinished and can lower click-through rate. Google's documentation requires a 48×48 multiple PNG referenced via rel="icon" for it to appear in SERPs — a complete favicon set ensures this works regardless of which file the crawler picks up.
How do I add a dark-mode favicon?
The HTML spec supports media-aware icons via media="(prefers-color-scheme: dark)" on <link rel="icon">. Generate two PNG variants — one for light backgrounds, one for dark — and reference both in the head with the appropriate media attribute. Note that browser support is uneven; favicon.ico is rendered the same way regardless of system theme.
Drop one image, get every favicon size your site needs, install in under a minute. Free, unlimited, nothing uploaded.
Generate my favicon set