Favicon Generator | Multi-Size ICO and PNG in One Click
Upload an image, crop it to a square and generate a favicon.ico bundling several sizes (16, 32, 48px and more) plus a full PNG set. High-quality Lanczos downscaling and a ready-to-paste HTML snippet, all processed inside your browser.
How to declare a favicon (by pattern)
How you declare a favicon depends on how far you want to go. Here are the patterns you need, from the bare minimum to full PWA and dark mode support. Every snippet assumes the generated files sit at the root of your site.
Pattern 1: Bare minimum (just drop in favicon.ico)
No HTML at all — simply place /favicon.ico in your document root. Browsers look for that path implicitly, so the icon appears without any markup.
your-site/
└── favicon.ico ← just put it here (no HTML required)
<!-- If you prefer to be explicit, this single line is enough -->
<link rel="icon" href="/favicon.ico" sizes="any">| Best for | Personal sites, internal tools, anywhere "it just needs to show up" |
|---|---|
| Notes | Adding sizes="any" lets browsers correctly treat the ICO as a last resort once you add SVG or PNG icons later. Bundling 16, 32 and 48px inside the ICO is recommended. |
Pattern 2: Standard setup (recommended)
ICO plus PNG files and an Apple Touch Icon — by far the most common setup today. It covers everything from desktop browsers to adding the site to an iOS home screen.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">| Best for | Corporate sites, blogs, publications — ordinary websites |
|---|---|
| Notes | Transparent areas of an apple-touch-icon are filled with black, so always export an opaque PNG with a background colour. iOS also rounds the corners, so leaving roughly 10% padding keeps the edges from being clipped. |
Pattern 3: Full PWA setup
For a PWA that launches like an app from the home screen, the icons are registered in site.webmanifest. Without both 192px and 512px present, Chrome will not consider the app installable.
<!-- HTML (inside head) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- site.webmanifest -->
{
"name": "My Site",
"short_name": "Site",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}| Best for | PWAs, web apps, services used mainly on smartphones |
|---|---|
| Notes | iOS ignores the icons declared in the manifest, so an apple-touch-icon is still required alongside it. display: "standalone" hides the browser chrome so the site launches like a native app. |
Pattern 4: SVG favicon with dark mode support
An SVG favicon is resolution independent, and CSS inside the SVG can swap colours for dark mode. Declare the ICO and PNG files alongside it for browsers that do not support it.
<!-- HTML (inside head). The first format the browser can read wins -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- favicon.svg (inverting the colour in dark mode) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
</style>
<path d="M4 4h24v24H4z"/>
</svg>| Best for | Sites with a vector logo, or anyone who wants the icon to change in dark mode |
|---|---|
| Notes | Chrome, Firefox and Edge support SVG favicons. Safari currently ignores SVG in rel="icon", so the PNG and ICO fallbacks are mandatory. |
Pattern 5: Subdirectories and cache busting
What to write when your icons live somewhere other than the root, or when you replaced the icon but the old one keeps showing. Favicons are cached aggressively, so changing the URL is the most reliable fix.
<!-- Spell out the path when the files live in a custom directory -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">
<!-- Watch the absolute path if the site is served from a subdirectory (e.g. /docs/) -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">| Best for | CDN delivery, sites with centralised asset management, icon replacements |
|---|---|
| Notes | The implicit lookup for /favicon.ico at the root is the one path you cannot redirect, so even when serving icons from a subdirectory, keeping a copy at the root leaves no gaps. |
Which file is used where
A quick reference for where each file is actually used. You do not need all of them — pick according to the environments you want to cover.
| File | Size | Where it is used |
|---|---|---|
| favicon.ico | 16 / 32 / 48px | Browser tabs, bookmarks and the Windows taskbar. Looked up at the root even with no markup |
| favicon-16x16.png | 16×16 | Browser tab on standard-resolution displays |
| favicon-32x32.png | 32×32 | Browser tab on Retina and other high-resolution displays, plus the bookmarks bar |
| apple-touch-icon.png | 180×180 | The icon shown when a site is added to the iOS or iPadOS home screen. Transparency is filled with black |
| android-chrome-192x192.png | 192×192 | Android home screen icon (via the manifest) |
| android-chrome-512x512.png | 512×512 | PWA splash screen and app listings (via the manifest) |
| site.webmanifest | — | The PWA configuration file declaring icons, theme colour and launch behaviour |
| favicon.svg | Scalable | Chrome, Firefox and Edge. Can switch colours in dark mode |
Tips
- Start from a square image of at least 512×512px and the outline will survive all the way down to 16px. If your image is not square, the built-in crop tool lets you pick exactly the square area you want.
- Lanczos3 takes a weighted average of neighbouring pixels while the negative lobes of its kernel lift the edges back up. It keeps more of the outline than the built-in scaling of a browser, which makes a visible difference for logos and lettering.
- The defining feature of ICO is that a single file can hold several sizes. Bundle 16, 32 and 48px and the tab, the bookmark bar and the Windows taskbar will each pick the artwork made for them.
- Apple Touch Icons have their transparent areas filled with black, so an opaque PNG with a background colour is the safe choice. Around 10% padding also keeps the edges from being clipped by the rounded mask that iOS applies.
- Browsers cache favicons aggressively. If a replacement does not show up, append a query such as
?v=2to the URL or perform a hard reload.
Frequently asked questions
/favicon.ico is still a path that browsers look for implicitly, even with no markup at all. Feed readers, bookmarking services and some crawlers fetch that root ICO without ever parsing your HTML, so shipping one alongside your PNGs leaves no gaps.<link rel="icon" type="image/svg+xml">. Listing the ICO and PNG files generated here alongside it gives you a reliable fallback for browsers that ignore SVG icons.
Side Note — The challenge of drawing on sixteen pixels
In 1999, Internet Explorer 5 introduced a small icon next to entries in the Favorites list. The mechanism was charmingly simple: drop a file called favicon.ico at the root of your site and it would be picked up. The name itself is a contraction of "favorite icon". The <link rel="icon"> element was formalised in the HTML specification only later, and the implicit search for a root-level ICO survives to this day purely for backwards compatibility.
The fact that ICO borrowed the Windows icon format turned out to matter a great deal. A single ICO file can hold several resolutions, which means the 16px tab and the 48px taskbar can show genuinely different artwork. That is more than a convenience. On a canvas of 16×16 pixels, mechanically shrinking a design drawn for 48px makes thin strokes vanish and lettering illegible. Icon designers used to draw each size by hand because it was the only way to solve that problem.
Modern favicon generation replaces the hand drawing with a different question: how intelligently can you downscale? A plain average (bilinear) loses edge contrast, while simple sampling (nearest neighbour) drops thin strokes entirely. Lanczos resampling uses a sinc function truncated to a finite number of lobes, so the main lobe preserves the original information while the negative side lobes push the edges back up. That gentle emphasis on the outline is exactly what tiny icons need.
The demands have only grown since. The iPhone arrived in 2007 with the Apple Touch Icon (57px at first, 180px today), PWAs made 192px and 512px necessary, and SVG favicons with dark mode support are now on the table. It looks like a lot of fuss compared with dropping in a single file, but the flip side is that those few dozen pixels in the browser tab are seen by an enormous number of people.