Favicon Generator
Turn a letter, emoji or image into a complete favicon set — a real multi-size
favicon.ico plus 16×16, 32×32, an Apple touch icon and the
Android 192/512 PNGs, with the ready-to-paste <link> snippet.
Everything is drawn and packaged in your browser — nothing is uploaded.
A square image works best — non-square images are centre-cropped to fill the icon.
Download your favicon
Add it to your <head>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">How to make a favicon
- Choose a source — type a letter or paste an emoji in Text / Emoji mode, or switch to Upload image and drop in a logo or photo.
- Style it — set the background colour and shape (square, rounded or circle), the text colour and size, or toggle a transparent background.
- Check the preview — the browser-tab mockup and the 16/32/48 tiles show exactly how the icon reads at real size. Keep it bold and simple.
- Download & install — grab the
favicon.icoand the PNGs, drop them in your site root, and paste the HTML snippet into your<head>.
Favicon sizes & where each one goes
| File | Size | What it's for |
|---|---|---|
favicon.ico | 16, 32, 48 | The classic icon every browser understands. Put it at your site root. |
favicon-32x32.png | 32×32 | Modern PNG favicon for desktop browser tabs and bookmarks. |
favicon-16x16.png | 16×16 | Smallest tab/address-bar size — keep the design simple so it reads clearly. |
apple-touch-icon.png | 180×180 | Home-screen icon on iPhone and iPad when a page is "Added to Home Screen". |
android-chrome-192x192.png | 192×192 | Android home-screen / PWA icon referenced from site.webmanifest. |
android-chrome-512x512.png | 512×512 | High-resolution PWA splash / install icon in the web manifest. |
Tip: at 16 px a favicon is only about the size of this letter — favour a single bold glyph or shape over a detailed logo so it stays recognisable.
What you can use it for
- A new website or blog — a clean monogram or emoji favicon in seconds, no design software needed.
- A Progressive Web App — the 192 and 512 PNGs for the home-screen icon and install prompt.
- Brand consistency — match your background to your brand colour and download every size at once.
- Quick prototypes & internal tools — distinguish browser tabs instantly with a coloured initial.
- Replacing a logo file — upload an existing logo and export it as a proper multi-size
.ico.
Where the favicon came from
The favicon was born in Internet Explorer 5, released in March 1999 — the first
browser to support it. A Microsoft developer named Bharat Shyam added a tiny 16×16 pixel icon next to
each entry in the IE Favorites list, which is literally where the name comes from:
favorites icon. His clever design decision still shapes the web
today: a site only had to drop a file called favicon.ico in its root folder, and the
browser would automatically request /favicon.ico on its own. Every modern browser still
does this — even with no <link> tag at all, it will quietly fetch
yoursite.com/favicon.ico. The .ico extension was chosen because it was
already the standard Windows format for program icons.
A common myth is that the favicon was "standardised in HTML 4.01 in 1999." That is an
oversimplification. The automatic /favicon.ico request dates to IE5, but the proper
standard tag — <link rel="icon">, which lets you point at PNG or SVG icons in any
location — was formalised much later through HTML5 and registered in the official IANA link-relations
registry in 2010. So today you have the best of both: the auto-discovered .ico for
maximum compatibility, plus explicit <link> tags for sharp modern icons.
Inside the .ico format
An ICO file is not a single picture — it is a small container that can hold several
images at once, at different sizes and colour depths. That is the whole point of it, and why a single
favicon.ico can carry the 16, 32 and 48 pixel versions a browser needs. Internally the
file starts with an ICONDIR header (a reserved field, a type field where 1
means "icon", and a count of how many images follow), then one ICONDIRENTRY per image
recording its width, height, colour depth, data size and the byte offset where its pixels live.
Each frame inside the container is stored either as a Windows bitmap or — since Windows Vista — as a
full PNG, which is far more compact for larger icons. The format carries two MIME
types: the original Microsoft image/x-icon and the official IANA-registered
image/vnd.microsoft.icon. This generator assembles a real multi-image ICO byte
by byte in your browser, with PNG-compressed 16/32/48 frames inside it — not a single PNG renamed to
.ico, which is a frequent shortcut that some browsers reject.
The modern favicon set in 2025
You no longer need a folder of a dozen icons. Current best practice trims the set to a handful of files that cover everything:
favicon.ico— kept for maximum compatibility. Some tools, such as RSS readers, simply request/favicon.icofrom the server and never look at your<link>tags, so the classic file still earns its place.- An SVG favicon —
<link rel="icon" type="image/svg+xml">. Vector icons stay razor-sharp at any size, and because an SVG can embed a CSS@media (prefers-color-scheme: dark)rule, the icon can even recolour itself for dark mode — something a raster ICO or PNG can never do. Chrome, Firefox and Edge support SVG favicons; Safari does not, which is exactly why you still ship the ICO and PNG fallbacks. - A 180×180
apple-touch-icon.png— the Home Screen icon on iPhone and iPad. - 192 and 512 pixel PNGs in a web manifest — for Android, the Chrome install prompt and PWA splash screens.
Apple touch icons and PWA "maskable" icons
Apple introduced the touch icon in 2008 for Home Screen shortcuts. The recommended size today is
180×180 — the largest any iOS device needs, downscaled automatically for smaller
screens. You may still see apple-touch-icon-precomposed in old code: it once told iOS not
to add a glossy "shine" overlay, but Apple removed that gloss back in iOS 7, so the precomposed variant
is now redundant. One practical tip: iOS applies its own rounded-corner mask and drop shadow, so supply
a full-bleed square with a solid background and square corners — adding your own
rounding just doubles it up.
Progressive Web App icons in the manifest add a twist called maskable icons. Because
different platforms clip an app icon into different shapes (circle, squircle, rounded square), a
maskable icon must keep its important content inside a safe zone — roughly the inner
80% of the image, since the most aggressive circular mask trims about 10% off every edge. Set
"purpose": "maskable" on a padded icon, but keep it as a separate file from your normal
"any" icon: a maskable icon looks awkwardly small when shown un-masked.
Favicons in Google Search
Since 2019 Google has shown your favicon next to your result on the search results page, especially on mobile — so the icon is now a small piece of your brand in the SERP. Google's documented requirements are simpler than the rumours suggest: the favicon must be square (a 1:1 aspect ratio) and at least 8×8 pixels, and Google recommends a size of 48×48 or larger so it renders cleanly across surfaces. (The widely repeated claim that it must be an exact "multiple of 48" is a myth — 48, 96 or 144 are all fine, but the real rule is just square and large enough.) Any valid favicon format works; if your icon is missing, non-square or deemed invalid, Google falls back to a generic grey globe. After you add or change one, expect a re-crawl to pick it up over several days to a few weeks.
Designing an icon that reads at 16 pixels
A favicon is one of the smallest pieces of design on the web, and the constraints are unforgiving. The single most common mistake is shrinking a full logo: detail that looks crisp at 200 pixels turns to mud at 16. Favour a single bold shape or one strong letter, maximise contrast (a light mark on a vivid background reads far better than a subtle low-contrast one), and avoid gradients and thin text, which blur and flatten at tab size. Always preview at the actual size — the browser-tab mockup and the 16/32/48 tiles above show you exactly what visitors will see.
Two final notes. Browsers cache favicons very aggressively — often for weeks — and bookmarks may store
their own copy, so after an update you sometimes need to hard-refresh or append a version query string
such as favicon.ico?v=2 to force the new icon through. And to round out your branding, the
<meta name="theme-color"> tag lets you tint the surrounding browser UI (the mobile
address bar, the PWA toolbar) to match your favicon's colour — a small touch that makes a site feel
polished on phones.
How a browser decides which icon to show
When a page offers several icons, the browser picks one based on the <link> tags and
the sizes and type attributes — choosing the format it supports at the size
closest to what it needs (a sharp 32-pixel PNG for a desktop tab, the 180-pixel Apple icon for a Home
Screen, a manifest icon for an installed app). That is why declaring sizes explicitly matters: it lets
the browser pick the best match instead of scaling the wrong one. There is one well-known quirk worth
knowing — adding sizes="32x32" to your favicon.ico link nudges Chrome to
prefer a crisp SVG icon over the ICO when you provide both. And remember the safety net underneath all
of it: with no tags at all, every browser still automatically requests /favicon.ico from
your site root, which is exactly why that one file is always worth shipping.
Beyond the browser tab
A favicon is far more than a tab decoration — the same little icon represents your site in a surprising number of places, which is why getting it right is a genuine branding win:
- Browser tabs — the original job, at 16–32 pixels.
- Bookmarks, the reading list and history — your icon helps users spot your site in a long list.
- Google search results — shown next to your listing, especially on mobile.
- Phone home screens — the apple-touch-icon and Android manifest icons become the "app" icon when someone adds your site to their home screen.
- Installed Progressive Web Apps — the 192 and 512 PNGs supply the launcher icon and splash screen.
- Browser "speed dial" / new-tab thumbnails and some chat or feed previews.
Common favicon problems — and how to fix them
- "My new favicon won't show up." Browsers cache favicons very aggressively, often
for weeks, and bookmarks keep their own copy. Hard-refresh, or append a version string such as
favicon.ico?v=2so the browser treats it as a brand-new file. - "It disappears on a light or dark tab bar." A transparent icon with no defined edge
can vanish against certain browser themes. Give it a solid (or rounded/circular) background so it
always has a clear shape — or, for an SVG icon, add a
prefers-color-schemerule so it adapts. - "It looks blurry or muddy." The design has too much detail for 16 pixels. Drop the fine elements, use one bold glyph or shape, and preview at actual size.
- "Google shows a grey globe instead of my icon." Google falls back to its default
globe when the favicon is missing, not square, or considered invalid. Make sure it is a square image
of at least 48×48, linked from your homepage's
<head>, and give Google time to re-crawl. - "My
.icowon't load in some browsers." A PNG simply renamed to.icois not a valid ICO and some browsers reject it. A proper multi-image ICO — like the one this generator builds — avoids the problem.
Frequently asked questions
What is a favicon and which sizes do I actually need?
A favicon is the small icon shown in a browser tab, the bookmarks bar, search results and on a phone home screen. At a minimum you want a favicon.ico (containing 16, 32 and 48 px) plus a 180×180 apple-touch-icon for iPhones. If you also build a Progressive Web App, add the 192×192 and 512×512 PNGs and reference them from a web manifest. This generator produces every one of those in a single click, so you do not have to resize anything by hand.
How do I add the favicon to my website?
Download the files and put them in your site root (the same folder as your homepage). Then paste the generated HTML snippet into the <head> of every page — it lists each icon with the right rel, type and sizes attributes so browsers pick the best one. The favicon.ico can also just sit at /favicon.ico and most browsers will find it automatically, but adding the explicit <link> tags gives you the sharp modern PNGs and the Apple/Android icons too.
What is the difference between favicon.ico and the PNG favicons?
The .ico format is a container that holds several small images at once (here 16, 32 and 48 px), which is the most widely supported favicon and the file browsers look for by default. PNG favicons are single-size, crisper on high-DPI screens, and are referenced explicitly with <link> tags. The modern best practice is to ship both: the .ico for maximum compatibility and the 16/32 PNGs plus the larger Apple/Android icons for sharp rendering everywhere. This tool builds a real multi-image .ico (with PNG-compressed frames inside it), not just a renamed PNG.
Can I make a favicon from just a letter or an emoji?
Yes — that is often the cleanest option for a small icon. In Text / Emoji mode, type one or two characters (a monogram initial works well) or paste an emoji, then choose the font, text colour, background colour and shape. The text auto-fits each size so it stays centred and legible right down to 16 px. Single bold shapes read far better at favicon scale than detailed logos.
Should my favicon have a transparent or a solid background?
A solid (or rounded/circular) background usually looks better in a browser tab because it gives the icon a defined edge against light and dark themes. Transparent backgrounds are useful when you want the icon to blend into a coloured surface — for example inside a PWA where the manifest paints its own background. Toggle "Transparent background" to compare; the preview and every downloaded file update instantly.
Is anything uploaded, and is it free?
It is completely free with no sign-up, and nothing ever leaves your device. The icons are drawn on an HTML canvas and the .ico file is assembled byte-by-byte in your own browser with local JavaScript, so even when you upload your own image it is processed entirely on your machine and never sent to a server.