Favicon Generator (ICO + PNG)
Turn any image into a multi-size favicon.ico plus PNG icons.
Icons are built on your device, not on a serverMake a favicon.ico from a PNG, JPG or SVG
or drag & drop it here, or paste it from your clipboard (Ctrl+V)
PNG · JPG · WebP · GIF · SVG
Actual-size preview
Choose an image and your icons show up here, each at the size it will really be.
Each icon is shown at the exact pixel size it will be. If the 16 px one is unreadable, simplify the artwork — drop the text and the hairline detail.
How it works
Everything runs in your browser — the image is never uploaded and there is no sign-up.
SVGs are rasterised at 512 px before being scaled down. Fonts and images the SVG pulls in by URL will not appear.
About this favicon generator
A favicon is the small square icon a browser shows on the tab, in bookmarks and next to your result in Google Search. A complete modern setup is four files: a favicon.ico containing 16 and 32 pixel versions, an SVG for browsers that can scale it, a 180×180 apple-touch-icon for iOS, and 192 + 512 PNGs referenced from a web app manifest. This tool builds all of them from a single source image — PNG, JPG, WebP or SVG — in your browser, and the finished .ico is a real multi-size container assembled byte by byte in the page.
Drop in a PNG, JPG, WebP or SVG and get back a single favicon.ico holding several square sizes at once — 16, 32, 48, 64, 128 and 256 pixels — plus each size as a standalone PNG if you would rather link them separately. The image is drawn to a canvas at each size, encoded as PNG, and the ICO container is assembled byte by byte in the page: a six-byte directory header, one sixteen-byte entry per size, then the image data. That is the whole format, which is why producing a real multi-size icon needs no upload at all.
It is built for the moment a site goes live and the browser tab is still showing a blank sheet of paper. Bring a square logo, pick your sizes, download the .ico, drop it at the root of your site, and paste in the link tags — the exact modern set is spelled out further down this page, along with what each size is genuinely used for. The same file covers a Windows shortcut, a desktop app installer, or an avatar that wants a square PNG.
The hard part of a favicon is not the file format, it is that 16 by 16 pixels is 256 pixels in total. A full logo with a wordmark turns to grey mush at that size. What survives is one letter, one glyph or one strong shape, in a colour that holds up against both a light and a dark browser theme. Crop your logo down to its mark before generating anything, leave a little air at the edges so it does not look cramped inside a rounded mask, then judge the 16-pixel preview rather than the 256-pixel one — the small one is what people actually see.
Two honest limits. This tool resizes and re-encodes; it does not optimise. Canvas always writes 8-bit RGBA PNG with no palette, so an icon editor that quantises colours will produce a smaller file than this does. In a favicon that is a few KB and rarely matters, but it is true and worth saying. Second, the output is raster: an SVG you feed in is rasterised at each size, and the .ico stores pixels, not vectors. For an icon that stays sharp at any density, serve the .svg itself with rel="icon" sizes="any" and keep the .ico as the fallback.
Everything runs in this tab. The image is decoded, resized and encoded locally, and the ICO bytes are assembled by the page’s own JavaScript — nothing is uploaded, queued behind other people’s jobs, or parked on a server for a retention window. Favicons end up public by definition, so this is less a privacy pitch than a practical one: no account, no watermark, no daily limit, no waiting, and a client’s unreleased mark stays on your machine while you are still iterating. One useful side effect: re-encoding through a canvas drops the source file’s metadata, so EXIF from the original photo never reaches the icon.
Which favicon sizes and link tags you actually need in 2026
Favicon advice ages badly, and a lot of what is still online was written for browsers that no longer ship. The list below is built only from what the primary sources say today: the HTML Standard for how browsers pick an icon, Apple for the Home Screen icon, Google Search Central for the icon beside your search result, web.dev for the install prompt, and Microsoft for Windows. Four files is the honest answer for a website, and two of them are optional.
| What to ship | What it is for | What the source says |
|---|---|---|
| favicon.ico with 16 and 32 inside | Browser tabs, bookmarks, and the automatic fallback | The HTML Standard: with no icon link in the document, user agents may resolve and fetch /favicon.ico against the page URL and use it as if it had been declared. |
| icon.svg | One file that stays sharp at any display density | sizes="any" represents a scalable icon such as an SVG. Support is wide but recent in Safari — caniuse records SVG favicons from Safari 26.0 and iOS Safari 26.0, and requires the file be served as image/svg+xml. |
| apple-touch-icon.png at 180×180 | The Home Screen icon when someone saves your site on iPhone or iPad | Apple’s own example declares 152, 167 and 180 plus a default, and the docs state that with no exact match it uses the smallest icon larger than the requested size — so one 180 covers the set. |
| 192×192 and 512×512 PNG in the manifest | Chrome’s install prompt and the installed app icon | web.dev’s install criteria: the manifest “must include a 192px and a 512px icon”. Add a copy with "purpose": "maskable" if you want control over how Android crops it. |
| Any square icon above 48×48 | The icon beside your result in Google Search | Google: the favicon must be square and at least 8×8 px, and they recommend larger than 48×48 px. Supported rel values are icon, shortcut icon, apple-touch-icon and apple-touch-icon-precomposed. |
| 16, 32, 48 and 256 in one .ico | A Windows shortcut, folder or desktop-app icon | Microsoft: “The full set includes 16x16, 32x32, 48x48, and 256x256 (code scales between 32 and 256). The .ico file format is required.” |
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">One rule in that snippet is easy to get wrong. The spec says the sizes keywords “must not represent icon sizes that are not actually available in the linked resource”, and that they are raw device pixels rather than CSS pixels — a slot 16 CSS pixels wide on a 2x display wants a 32 pixel image. So declare exactly what your .ico contains and no more, and generate a 32 even though the tab looks 16 wide. The registered MIME type for ICO is image/vnd.microsoft.icon, which is what the HTML Standard’s own example uses; type="image/x-icon" is a legacy spelling browsers still accept. Adding rel="shortcut icon" is unnecessary for browsers, though Google lists it as a supported value for search results.
Why does a 1990s Microsoft format survive at all? Two reasons, neither of them nostalgia. It is a container: Microsoft’s ICONDIR is a six-byte header followed by one ICONDIRENTRY per image, so a single file carries 16, 32, 48 and 256 pixel versions and lets the consumer pick — MDN notes that ICO and Apple’s ICNS are the two formats able to store multiple sizes, and that “ICO has better browser support”. And it is the filename in the spec’s root fallback, which is why /favicon.ico keeps working on sites whose markup says nothing about icons. Its one hard ceiling comes from that same structure: bWidth and bHeight in a directory entry are a single byte each, so 256×256 is the largest image an .ico can describe — which is exactly why manifest icons at 512 have to be separate PNG files.
Three pieces of advice you can now drop. The long apple-touch-icon ladder that older generators still emit — half a dozen files climbing from 57 to 144 pixels — predates Apple’s current documentation, and Apple’s own nearest-larger selection rule makes a single 180 sufficient. The msapplication-TileImage meta tags and browserconfig.xml existed for pinned tiles in Internet Explorer and legacy Edge; Microsoft’s lifecycle documentation records that the IE 11 desktop application went out of support on 15 June 2022 and has been permanently disabled on some versions of Windows 10, and that Edge Legacy ended support on 9 March 2021. And the widely repeated rule that a favicon must be a multiple of 48 pixels is not in Google’s current documentation, which asks only for a square image of at least 8×8 and recommends going above 48×48.
Use your .ico as a Windows folder or shortcut icon
File Explorer will not take a PNG or JPG when you change a folder's icon: the Change Icon dialog only reads icon files (.ico) and the executables or DLLs that carry icons inside them. That is why a good share of "convert image to ico" searches really end up here. Download the .ico with 16, 32, 48 and 256 inside — the set Microsoft documents for application and Explorer icons — then apply it like this:
- Save the .ico somewhere it can stay put — your Documents folder, or an "Icons" folder of your own. Windows records the path to the file rather than copying it, so if you later move or delete the .ico the icon reverts to the default.
- Right-click the folder and choose Properties.
- Open the Customize tab and click Change Icon.
- Click Browse, select your .ico file, and click OK twice. If the desktop does not refresh, press F5.
- A shortcut is slightly different: Properties > Shortcut tab > Change Icon, then Browse to the same .ico.
Common favicon mistakes and how to fix them
These are the errors that show up over and over on real sites — most are easy to fix once you know what to look for.
| The mistake | What you see | The fix |
|---|---|---|
| Using the full logo instead of a mark | The 16-pixel favicon is a grey blur — no wordmark survives at that size | Crop the logo down to a single letter, glyph or shape before generating anything, then judge the 16-pixel preview |
| A .ico with only the 16-pixel version | Fuzzy tab icon on any retina or high-DPI display | Include both 16 and 32 inside the same .ico, and declare sizes="16x16 32x32" in the link tag |
| No /favicon.ico at the site root | Broken-tab icon in RSS readers, bookmarks apps and old crawlers that fetch /favicon.ico directly | Always keep a copy at the root even if you also declare it in <link> tags |
| A JPG source with transparent-looking edges | The finished favicon has a hard white or black rectangle around it | JPG has no alpha channel — start from a PNG, WebP or SVG source instead |
| A dark-blue mark on a dark tab bar | The favicon disappears in dark-mode browsers | Add an outline, or ship an SVG version that swaps colors with @media (prefers-color-scheme: dark) |
| Declaring sizes the file does not contain | Sporadic wrong-size selection across browsers | The HTML spec forbids listing sizes not actually present — declare only what your .ico really includes |
| MIME type set to text/html by the server | The icon fetches with the wrong Content-Type and never displays | Serve .ico as image/vnd.microsoft.icon or image/x-icon, .svg as image/svg+xml |
How this favicon generator compares to alternatives
Honest look at the trade-offs. Every tool listed does a real job — the differences are in what each one asks of you and what it hands back.
| Tool | Runs in browser | Account required | Watermark | Multi-size .ico | SVG input | Batch |
|---|---|---|---|---|---|---|
| This favicon generator | Yes — nothing uploaded | No | None | Yes (16 / 32 / 48 / 64 / 128 / 256) | Yes | One image at a time |
| favicon.io | Server-side (uploads) | No | None | Yes | Text and emoji generators only | One at a time |
| realfavicongenerator.net | Server-side (uploads) | No for basic, yes for saved projects | None on the free tier | Yes, plus manifest and config files | Yes | One at a time |
| Canva favicon feature | Server-side | Yes (Canva account) | On the free plan for some templates | PNG only, not .ico | Not a native input | One at a time |
| Adobe Express | Server-side | Yes (Adobe account) | None on paid, some limits on free | PNG only, not .ico | Yes on paid plans | One at a time |
The reason this tool exists as a separate thing: the .ico container is a 1990s Microsoft file-format specification that any browser knows how to parse in about 200 lines of code, but almost every hosted generator wraps that work in an upload flow and an ad layer or a signup. This page does the encoding in your own tab. That is the only meaningful difference — the resulting .ico is exactly the same bytes any of the other tools would produce.
Reference tables
FAQ
What favicon sizes do I actually need?
Far fewer than most guides claim. A favicon.ico containing 16 and 32 pixel versions covers browser tabs and bookmarks; add 48 and 256 if the same file will also be a Windows icon, which is the set Microsoft documents for application and Explorer icons. One 180×180 apple-touch-icon covers iOS, because Apple picks the smallest icon larger than the size it wants. If you ship a web app manifest, Chrome’s install criteria additionally require a 192 px and a 512 px icon — both larger than the 256 px ceiling of the ICO container, so those are separate PNG files.
Should my favicon be .ico or .png?
Both work: PNG favicons are supported by every browser still in use, including IE 11. ICO earns its place for two other reasons — it is a container, so one file can hold several sizes and let the browser choose, and the HTML Standard says that when a page declares no icon link at all, a browser may fetch /favicon.ico from the site root on its own. A good 2026 default is an SVG for modern browsers plus a multi-size .ico as the fallback, since caniuse records SVG favicon support in Safari only from version 26.0.
Why is my old favicon still showing?
Because the browser is under no obligation to refresh it. The HTML Standard states outright that user agents are not required to update icons when the list of icons changes, only encouraged to. Force it with a hard reload, a private window, or a version query string such as /favicon.ico?v=2. In Google Search the wait is longer and out of your hands: Google says crawling the favicon “can take anywhere from several days to several weeks”, and you can request indexing of your home page to nudge it.
Where do I put the favicon file on my server?
The primary favicon.ico goes at the root of your domain — https://yourdomain.com/favicon.ico — because browsers will fetch that URL automatically even when your HTML declares no icon link at all. That is what the HTML Standard calls the automatic fallback: with no <link rel="icon"> in the page head, a user agent may request /favicon.ico and use it as if it had been declared. The apple-touch-icon and SVG versions can live anywhere as long as the href in the link tag matches, but keeping them all in the site root (/apple-touch-icon.png, /icon.svg) is the convention everything else expects, and it also lets a browser find them if your HTML fails to load.
Why does my favicon look blurry on retina displays?
Because a browser tab that looks 16 CSS pixels wide is 32 device pixels wide on a 2× display, and the HTML spec is explicit that sizes keywords describe raw device pixels, not CSS pixels. If your .ico only contains a 16 px version, the browser upscales it to 32 device pixels and you see the fuzzy result. The fix is to include both 16 and 32 inside the same .ico — the container format was designed for exactly this — and to declare sizes="16x16 32x32" in the link tag so the browser knows what it is picking from.
Can I have a dark-mode favicon that changes with the browser theme?
Yes, and only through the SVG icon, not the .ico. Inside an SVG you can query the browser's theme with @media (prefers-color-scheme: dark) and swap fill colors accordingly — Chrome, Edge and Firefox all honor this when the icon is linked with type="image/svg+xml". The .ico stays as the light-mode fallback, which is fine because tab-bar backgrounds on light-mode systems are the ones most likely to be a light color anyway. Safari still ignores SVG favicons in most versions, so a dark-mode-aware icon is a modern-browser feature, not a universal one.
What is the difference between a favicon and an app icon?
A favicon lives inside a browser and represents a website — it shows in the tab, in bookmarks and in the browser's history. An app icon represents an application on an operating system's launcher or home screen. They share the same source image on most modern setups, but they use different files and different sizes: browsers want 16, 32 and often SVG; iOS wants a 180×180 apple-touch-icon; Android and installed PWAs want 192 and 512 PNGs declared in a web app manifest. This tool produces all of them from one source so the same mark can wear all three hats.