Favicon Generator
Upload one image and get every favicon you need: a multi-size favicon.ico plus PNG icons at 16, 32, 48, 180, 192 and 512 pixels — generated entirely in your browser.
What this favicon generator makes
From one source image it creates six PNG files and a multi-size favicon.ico, all drawn on a canvas in your browser. That covers browser tabs, bookmarks, the iOS home screen and the icons listed in a web app manifest. Pages declare their icons with <link rel="icon">, defined in the HTML standard; browsers also request /favicon.ico from the site root when a page declares no icon.
| File (as downloaded) | Typical use |
|---|---|
favicon.ico — 16, 32 and 48 px inside | The root fallback that browsers, feed readers and other tools request automatically |
favicon-16x16.png | Tab icon on standard-density screens |
favicon-32x32.png | Tab icon on high-density screens |
favicon-48x48.png | Larger desktop contexts, such as shortcuts and site lists |
favicon-180x180.png | Apple touch icon for the iOS and iPadOS home screen; rename it apple-touch-icon.png |
favicon-192x192.png | Android home screen icon, listed in the web app manifest |
favicon-512x512.png | Manifest icon used for install prompts and splash screens |
How to generate favicons
- Click the upload box or drag an image onto it. A square PNG or SVG of at least 512 × 512 pixels with a transparent background works best.
- Six cards appear, from 16×16 to 512×512. Click a card to download that PNG.
- Click Download favicon.ico (16/32/48) for the ICO file.
- Upload the files to your site root and add the tags below.
Non-square images are scaled to fit and centred, with transparent padding, rather than stretched: a 600 × 300 image becomes a 180 × 90 band in the middle of the 180 pixel icon. SVG sources are rasterised fresh at each size, so they stay sharp.
The ICO file
ICO is a small container format that holds several bitmaps. This tool stores each size as a PNG inside the container, a variant Windows has supported since Vista and all current browsers read. We checked a generated file with ImageMagick’s identify, which listed three PNG entries at 16×16, 32×32 and 48×48, and Chromium decoded it as an image. Very old software that only understands bitmap-based ICO files may not read it.
HTML to add to your page
Rename favicon-180x180.png to apple-touch-icon.png, put the files in the site root, and add this inside <head>:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">The sizes attribute may list several sizes, which suits an ICO file. For an installable web app, reference the larger icons in the manifest, described in the W3C Web Application Manifest specification:
{
"name": "My App",
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#4f46e5",
"background_color": "#ffffff",
"display": "standalone"
}Designing an icon that works at 16 pixels
- Simplify: fine lines and text vanish at 16 pixels. A bold letter or symbol reads better than a full logo.
- Check light and dark browser themes; a dark icon on a transparent background can disappear in dark mode.
- Give the Apple touch icon an opaque background. iOS does not show transparency in home-screen icons, so transparent areas can appear black.
- Use a source with little empty margin, or the icon will look small in the tab.
Common problems and fixes
| Symptom | Cause | Fix |
|---|---|---|
| The old icon still shows | Browsers cache favicons separately and for a long time. | Open the icon URL directly, hard-refresh, or add a version such as /favicon.ico?v=2 to the link. |
404 errors for /favicon.ico in logs | Clients request it from the root even when you link a PNG. | Upload favicon.ico to the site root. |
| Icon looks blurry or tiny | The source was small, or has wide empty borders. | Start from a 512 px or SVG source cropped close to the artwork. |
| “Please choose an image file.” | The file is not an image type the browser recognises. | Convert it to PNG first with the Image Converter. |
| “Could not load this image.” | The file is damaged or in a format the browser cannot decode, such as HEIC. | Export it as PNG from the app that created it. |
Frequently asked questions
Is my image uploaded?
No. Resizing happens on a canvas in your browser, and the ICO file is assembled locally in JavaScript. Nothing is sent to a server.
Do I still need favicon.ico?
Modern browsers accept PNG and SVG icons, but some tools, feed readers and crawlers still request /favicon.ico directly. Keeping one in the site root is cheap and avoids 404s.
Can it create an SVG favicon?
No, it outputs PNG and ICO only. If you have an SVG logo, you can serve it as well with <link rel="icon" type="image/svg+xml" href="/icon.svg">; browsers that support SVG icons can then use it, and others fall back to the PNG or ICO.
Why does Google show a different icon in search results?
Google fetches and caches favicons on its own schedule and has its own favicon guidelines, which ask for a square icon and recommend one larger than 48 × 48 pixels, so link a 192 pixel PNG as well as the ICO. Changes can take time to appear in results.
Why is the Apple touch icon 180 pixels?
180 × 180 is the size used on current high-density iPhones. iOS scales it for other devices, so one file is enough.