Favicon Generator_
Turn an image, an emoji, or a couple of letters into the complete favicon set: a real favicon.ico containing 16, 32 and 48, the six PNGs a site actually needs — 16, 32, 48, 180, 192 and 512 — and the HTML to paste in your <head>, all in one zip. Every size is previewed at its true pixel dimensions rather than as a scaled mockup, because an icon that reads beautifully at 512 and turns to mush at 16 is the entire problem this job has.
Non-square sources are yours to control: pad them, crop them, or stretch them, with the trade-off named next to the choice instead of decided silently. If your source is too small to fill 512 without upscaling, you are told before you ship a soft icon. The file is read in your browser and never uploaded.
Real pixel dimensions, light and dark chrome. If the 16 is unreadable here it is unreadable in a tab.
On white — iOS composites the touch icon onto white and Android sits it on your wallpaper, so a dark check means nothing here.
Also at real size; scrolls sideways on a phone rather than shrinking.
A favicon is a set, not a file
Six sizes, and what each is really for
The single favicon.ico era is long over. A tab wants 16 pixels, a high-DPI tab or pinned shortcut 32, Google 48 for search results, iOS a 180-pixel touch icon, and Android and installable apps 192 and 512 from a manifest. Six renders of one mark at wildly different scales, and not interchangeable: hand a browser only the 512 and its resampler gives you a blurry tab.
Designing for sixteen pixels
Sixteen pixels square is 256 pixels in total — less room than one character of this sentence. Gradients turn to mud, hairlines vanish, words become a grey smear. The instinct is to shrink the logo; the answer is to redraw it. Take the one distinctive element, flatten it to two or three colours, thicken the strokes, and push the contrast up so it survives light and dark chrome. That is why the tab sizes are previewed at real dimensions on both swatches: a scaled-down mockup will lie to you.
What happens to a non-square source
Favicons are square and most logos are not, so something has to give, and there are three honest options. Contain pads with your background colour — every part survives, smaller in frame. Cover fills the square and crops the overhang, keeping the icon big but capable of beheading a tall logo. Stretch distorts. Most tools pick one silently; here it is a control, defaulting to contain.
What an ICO actually is
.ico is not an image format, it is a container: a six-byte header saying how many images follow, one sixteen-byte directory entry per image recording width, height, byte length and offset, then the payloads. Each payload here is a PNG, which every browser since IE11 reads inside an ICO. One quirk survives from 1995: a 256-pixel entry records its dimension as 0, the field being a single byte. The encoder here is written against that specification, checked byte for byte by a test, then parsed back. The file bundles 16, 32 and 48.
What this page does not do
It does not write your site.webmanifest. That file carries a name, theme colour, display mode and start URL — decisions about your app, not your icon, and guessing them gives you a file to correct rather than ship. The table below prints its two icon entries to paste into the one you already have.
How to use
- 01Pick a source. Image reads a PNG, JPEG, GIF, WebP or SVG, decoded locally. Emoji takes one emoji. Letters takes up to three characters with a colour and weight.
- 02Set the background and, for a non-square image, the fit mode. Contain pads, cover crops, stretch distorts. Padding adds breathing room inside the square.
- 03Read the preview at actual size — that is the point of it. If the 16px render is unreadable, simplify the mark rather than reach for a bigger source.
- 04Download_ZIP for the whole set — six PNGs, favicon.ico and the snippet — or take files one at a time. Unzip into the folder the snippet references, put favicon.ico at your site root, and paste the tags into your <head>.
Four ways this gets used
A logo that has to survive a tab
Upload the mark, check the 16px render, and learn whether it needs simplifying before launch.
a 1024 × 1024 brand mark
a zip with six PNGs, favicon.ico and the tags
A placeholder for a project with no logo
Two initials on a brand colour beat the browser's blank globe, in about ten seconds.
TK on #1bca5c
a legible icon at every size
An unreleased brand asset
Decoded by your browser and never sent anywhere — which matters when the rebrand is not public yet.
a confidential logo
icons, and no copy on anyone else’s server
A wide wordmark that keeps getting cropped
Switch the fit mode to contain and add padding; the whole mark stays in frame instead of losing its ends.
contain + 16% padding
the full mark, letterboxed on your background
Every size, and what actually uses it
| Size | Filename | What consumes it | Declared by |
|---|---|---|---|
16×16 | favicon-16x16.png | Browser tab and address bar | A <link> tag |
32×32 | favicon-32x32.png | Taskbar shortcuts and high-DPI tabs | A <link> tag |
48×48 | favicon-48x48.png | Google search results and Windows site shortcuts | A <link> tag |
180×180 | apple-touch-icon.png | iOS home screen (Apple touch icon) | A <link> tag |
192×192 | android-chrome-192x192.png | Android home screen, via the web manifest | A web manifest entry |
512×512 | android-chrome-512x512.png | PWA install and splash screen, via the web manifest | A web manifest entry |
You rarely need all six; a site never installed as an app can stop after 180. Keep the 48 — Google renders it beside your search result.
What each tag and entry declares
| Markup | What it tells the browser |
|---|---|
<link rel="icon" href="/favicon.ico" sizes="any"> | The ICO, offered first. sizes="any" stops a modern browser preferring it over the PNGs |
<link rel="icon" type="image/png" sizes="16x16"> | A PNG for the tab. sizes lets the browser pick the closest match |
<link rel="icon" ... sizes="32x32"> | The high-DPI tab and pinned-shortcut render |
<link rel="icon" ... sizes="48x48"> | The size Google reads for search results |
<link rel="apple-touch-icon" sizes="180x180"> | The iOS home-screen icon. No type needed; iOS composites transparency on white |
"icons": [{ "src": "…192x192.png", "sizes": "192x192" }] | A manifest entry — the Android home-screen icon, not a link tag |
"icons": [{ "src": "…512x512.png", "sizes": "512x512" }] | The manifest entry for the install prompt and splash screen |
/favicon.ico at the site root | Requested by convention whether or not you link it, so it belongs at the root path too |
Paste the two manifest rows into your site.webmanifest; this page emits their PNGs, not the file.
Tips & best practices
- Start from the largest source you have. Upscaling a 64px logo to 512 gives a soft icon, and the warning says so first.
- Judge the 16px preview, not the 512. If you cannot tell what it is at arm’s length, nor can anyone glancing at a row of tabs.
- Check the tab sizes on both swatches: dark chrome hides a dark mark and light chrome hides a pale one.
- Simplify rather than shrink: one mark, two or three flat colours, no text, thick strokes. An icon-only variant is normal.
- Version the filename or add a query string when you change an icon; browsers cache favicons far longer than pages.
Gotchas — why your new favicon isn’t showing up
Favicons are cached far harder than pages
A hard refresh clears the page but usually not the icon — browsers keep favicons in a separate store that survives ordinary cache clearing, sometimes for days. Replace a file at the same URL and expect to keep seeing the old one. Change the filename or append a version query (favicon-32x32.png?v=2): that is a new URL, and it resolves.
Detail does not survive to 16 pixels
A 16×16 icon is 256 pixels in total. Gradients band, hairlines disappear, lettering smudges. Shrinking a detailed logo cannot work however good the resampler is — the information has nowhere to go. Redraw it simpler; the preview is at true scale so you find out now.
An ICO with only one size in it defeats the point
The format exists to hold several renders so the client picks the right one, yet plenty of converters emit a container holding a single 32-pixel image. Ask it for 16 and you get a downscale — the mush the small sizes were redrawn to avoid. The one built here holds 16, 32 and 48 as separate images.
Server-side generators receive your logo
A generator that uploads receives a file often not public yet: a rebrand under wraps, a product weeks from launch, an asset under NDA. Some well-known tools now process in the browser and some still do not, so check rather than assume. This page decodes locally — the Content-Security-Policy blocks outbound connections and a test fails if one is tried.
The root /favicon.ico is requested whether you link it or not
Browsers, crawlers, feed readers and link-preview services ask for /favicon.ico by convention, independently of your link tags. With nothing there you collect steady 404s and some clients show no icon despite correct markup. Put the file at that path too.
Technical details
- Output
- Six PNGs — 16, 32, 48, 180, 192, 512 — a favicon.ico holding 16, 32 and 48, and the link tags. One zip or file by file
- ICO container
- 6-byte header, one 16-byte directory entry per image, PNG payloads at absolute offsets, 32-bit depth. A golden-file test asserts the exact bytes; a parser test reads it back
- Zip
- Stored, not deflated, with fixed 1980-01-01 timestamps so the same input gives the same archive. Entries use the snippet filenames and are byte-identical to the single downloads
- Sources
- PNG, JPEG, GIF, WebP, SVG up to 20 MB; one emoji; or up to three characters
- Orientation
- JPEG EXIF rotation is honoured when decoding, so a phone photo comes out upright
- Non-square sources
- Contain letterboxes, cover centre-crops, stretch distorts — your choice, defaulting to contain
- Resampling
- Canvas drawImage with high-quality smoothing; each size renders from the original, never from an already-resized copy
- Animated GIFs
- Flattened to their first frame; a favicon is a still image
- Preview
- Every size at true pixel dimensions — a mockup at CSS scale cannot show what 16px looks like. Tab sizes on light and dark chrome; larger sizes on white, which is what iOS composites onto
- Network
- None from tool code. A test sweep calls every function this page uses with
fetchandXMLHttpRequestreplaced by stubs that throw, so a stray request fails the build instead of shipping. Disconnect from the network and the page still works.
FAQ
What size should a favicon be?
There is no single answer, which is the point: 16 and 32 for tabs, 48 for Google results and Windows shortcuts, 180 for iOS home screens, 192 and 512 for Android and installable apps. Start from a square source of at least 512.
How do I make a favicon from a PNG or JPEG?
Choose the file above, set a background and a fit mode if it is not square, then take the zip and paste the snippet into your head. The image is decoded by your browser and never uploaded.
Why is my new favicon not showing?
Almost always caching. Browsers store favicons separately from pages and hold them far longer, so a hard refresh often will not shift it. Rename the file or add a version query, then check in a private window.
Do I still need a favicon.ico file?
Current browsers do not need it — the PNG link tags cover them. But crawlers, feed readers and link-preview services request /favicon.ico by path regardless of your markup, so having one saves a stream of 404s.
How do I make a favicon.ico with multiple sizes?
Choose a source and press favicon.ico, or take Download_ZIP for the whole set. The container is assembled in your browser with 16, 32 and 48 as three separate images, each rendered from your original rather than from one another.
Can I use a non-square logo?
Yes, and you choose what happens to it. Contain pads so nothing is lost; cover fills and crops; stretch distorts. For a wide wordmark, contain with a little padding usually reads best.
Is my image uploaded anywhere?
No — it is read with the file API and drawn to a canvas here. The work is JavaScript running in this tab. Every function it calls is covered by a test that stubs fetch and XMLHttpRequest to throw, so a request that slipped in would break the build rather than reach a server — and you can confirm it for yourself by disconnecting and carrying on. Worth caring about, because a favicon source is often a logo for a rebrand that has not been announced.