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.

Text or emoji

Font

Text colour

Text size

Background

Shape

Transparent background

Your Site ×

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.ico and 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.ico from 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=2 so 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-scheme rule 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 .ico won't load in some browsers." A PNG simply renamed to .ico is 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.