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 |
What is a favicon generator?
A favicon generator turns a single image into a favicon.ico plus a full set of PNGs, all in one pass. favicon.ico is a special format that can bundle several resolutions — 16px, 32px, 48px and more — inside a single file, and the browser tab, bookmarks bar and taskbar each automatically pick the size made for them. There's no need to export every size by hand; cropping to a square and choosing the output settings are all done right on the page.
Loading, cropping, downscaling and converting to ICO or PNG all happen inside your browser's own JavaScript. Your image is never sent to a server, so it's safe to use even for a logo that hasn't been announced yet or artwork covered by a brand guideline's confidentiality rules. Downscaling relies on the Lanczos algorithm, which preserves edge contrast, so even a size as small as 16px keeps the shape of lettering and logos from collapsing into a blur.
How to create a favicon
- Upload your image Drag and drop your logo or icon artwork, or click to choose a file. PNG, JPEG, SVG, WebP, GIF and BMP are all supported.
- Crop it to a square Drag the frame to move it and drag the corners to resize it. Since a favicon is always square, the frame stays locked to a 1:1 ratio.
- Choose your output settings Set the sizes bundled into favicon.ico, the PNG sizes to export, the downscaling algorithm, and options like padding and background colour as needed.
- Generate and check the preview Press "Generate favicons" and every size is produced at once. The actual-size preview lets you check how the smaller sizes will really look.
- Download and install it Download the files individually or all together as a ZIP, then paste the generated HTML snippet inside your .
Tips for getting more out of it
- 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.
Use cases
Building a favicon for a brand-new website
Prepare the full set of ICO and PNG files plus the HTML snippet before launch, so nothing gets left out of the
.Batch-generating PWA icon sizes
Produce the 192px and 512px PNGs needed for Add to Home Screen and splash screens, along with a matching site.webmanifest, in one go.
Converting an existing brand logo
Load an existing logo and export a full set of device-ready icons while fine-tuning padding and background colour.
Refreshing favicons on a CMS or static site
When updating the favicon on a site managed with WordPress, Hugo or similar tools, gather every required file format without missing one.
Rebranding and refreshing every icon at once
Update the tab, bookmark and home-screen icons together after a logo change, and check how each one looks in its actual context.
Glossary
- favicon.ico
- The filename browsers implicitly look for at a site's root. It's saved in the ICO format, which can hold several image resolutions inside a single file.
- Apple Touch Icon
- The icon shown when a site is added to the Home Screen on iOS. Transparent areas are filled in with black, so setting a background colour is recommended.
- Lanczos algorithm
- A downscaling algorithm that uses a kernel built from a sinc function truncated to a finite range. It preserves edge contrast well, making it well suited to shrinking lettering and logos.
- PWA (Progressive Web App)
- A general term for technology that lets a website be added to the home screen and used like an app, including offline. It requires 192px and 512px icons plus a site.webmanifest.
- site.webmanifest
- A configuration file that defines a PWA's name, icons and theme colour. It sits at the root of the site and is referenced from the HTML.
- Nearest neighbour
- A downscaling algorithm that simply keeps the colour of the closest pixel. Because it never blends colours, it preserves the sharp, crisp edges of pixel art.
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.