Does this upload my logo or image?

No. Every icon is drawn and encoded on an HTML canvas inside your browser tab. Your source image never leaves your device, nothing is sent to a server, and there's no login — unlike many favicon sites that upload your file and email you a ZIP.

Which favicon files do I actually need in 2026?

A favicon.ico for legacy and Windows, a 16×16 and 32×32 PNG for browser tabs, a 180×180 apple-touch-icon.png for iOS home screens, and 192×192 plus 512×512 PNGs referenced from a web manifest for Android and PWAs. This tool generates all of them plus the .ico.

Can I make a favicon from an emoji or just text?

Yes. Switch to the 'Letter or emoji' source and type up to three characters — a single initial, two-letter initials, or an emoji like 🚀. Pick a background colour and corner rounding, and the full set is generated live.

How do I install the favicons once I've downloaded them?

Put the downloaded files in your site's root (or public) folder, paste the provided tags into your page's , and add the two manifest icon entries to your site.webmanifest. The copy button grabs all of it at once.

Image

Favicon Generator

Turn any image, emoji or text into a complete favicon set — with a live tab preview and copy-paste HTML.

Free forever
No sign-up
Runs in your browser

Share X LinkedIn

Letter, initials or emoji

Up to 3 characters. Try a single letter or an emoji like 🚀.

Background

Transparent background

Corner rounding24%

Live preview

Your websiteNew tab

How it looks as a bookmark / shortcut

What is a favicon?

A favicon is the small icon that represents your website — the little square next to the page title in a browser tab, in your bookmarks list, in history, and on a phone's home screen when someone saves your site. It is one of the cheapest pieces of branding you can add: a site with a crisp, recognisable favicon looks finished and trustworthy, while a blank or default icon looks unowned.

Modern favicons are no longer a single file. Different places want different sizes and formats — a tiny 16-pixel tab icon, a sharp 32-pixel version for high-DPI screens, a 180-pixel Apple touch icon for iOS, and 192/512-pixel icons for Android and progressive web apps. This generator builds the whole set at once from one source, shows you a live preview, and hands you the HTML to wire it up.

Everything runs inside your browser. Your source image is drawn onto a canvas and exported locally — nothing is uploaded, and there's no account or ZIP-by-email step.

How to use it

Choose a source. Upload a square image (a logo works best — if yours isn't square, crop it with the Image Resizer, or knock out a busy backdrop with the Background Remover first), or switch to Letter or emoji and type up to three characters — an initial, initials, or an emoji.
Pick a background. Choose a preset colour, set a custom one, or make it transparent. For text sources the foreground colour is chosen automatically for contrast.
Adjust the shape. The rounding slider goes from a sharp square all the way to a full circle. For image sources you can also add padding so the artwork breathes.
Watch the live preview. A mock browser tab and a bookmark-style swatch update as you type, so you can see exactly how the icon reads at real favicon sizes.
Download. Grab each PNG individually, the favicon.ico, or hit Download all for the complete set.
Install. Copy the provided <link> tags and manifest snippet into your site.

The sizes and formats you actually need in 2026

You don't need the sprawling list some old generators produce. A lean, modern set covers everything:

favicon.ico — the legacy fallback. Browsers still look for /favicon.ico, and Windows uses ICO for shortcuts. A single 32×32 image inside the ICO is plenty; this tool builds it for you.
16×16 and 32×32 PNG — the browser-tab icons. 16 for standard displays, 32 for high-DPI screens where 16 would look soft.
48×48 PNG — used by some Windows surfaces and a sensible extra to have.
180×180 apple-touch-icon.png — what iOS uses when someone adds your site to their home screen. iOS ignores transparency here and squares it off, so a solid background usually looks best.
192×192 and 512×512 PNG — referenced from your web manifest for Android home-screen icons and PWA installs. The 512 is also used for splash screens.

That's it. More sizes rarely help and just clutter your project.

Apple touch icon and the web manifest

Two pieces often trip people up:

apple-touch-icon.png is how iOS and iPadOS render your site on the home screen. It is referenced with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />. Because iOS masks it into a rounded square and ignores transparency, give it a filled background — a transparent apple-touch-icon shows as black on the home screen.
The web manifest (site.webmanifest or manifest.json) is a small JSON file that tells Android and PWA installers which icons to use. The two entries this tool outputs — 192 and 512 — are the ones browsers actually request. Link it with <link rel="manifest" href="/site.webmanifest" />.

The copy button gives you both the head tags and the manifest icon array together, so there's no guesswork.

How to install your favicons

Place the files in your site root (for most frameworks, the public/ folder). The paths in the snippet assume the files sit at the top level, e.g. /favicon.ico, /favicon-32x32.png.
Paste the <link> tags into the <head> of your HTML — or your layout/template if you use a framework.
Add the icon entries to your manifest. If you don't have a site.webmanifest yet, create one with the JSON shown.
Hard-refresh to test. Browsers cache favicons aggressively. If you don't see the new icon, do a hard reload or open the page in a private window.

Tips for a favicon that reads well

Keep it simple. At 16 pixels, fine detail and small text disappear. A bold mark, a single letter, or one strong shape reads far better than a shrunk-down full logo.
Use high contrast. The icon competes with tab titles and a busy browser UI. A clear figure-on-background contrast keeps it legible. The live preview is there precisely so you can judge this at true size.
Mind the corners. Square favicons look sharp in tabs; rounded ones feel more app-like on home screens. There's no single right answer — use the preview to pick.
Give apple-touch a solid background. Transparency turns black on iOS home screens. If you want a transparent tab icon but a filled iOS icon, that's a fair trade most sites make by keeping a background.
Think about dark mode. A dark icon can vanish against a dark browser theme. A coloured or light background keeps it visible in both light and dark UIs.

Private, and no ZIP-wrangling

Many favicon generators upload your logo, process it on a server, and email or download a ZIP you then have to unpack and sort. Here, the icons are rendered locally the moment you change an input — no upload, no waiting, no archive to extract. You get a live browser-tab preview, individual downloads or a one-click Download all, and copy-paste HTML that's ready to ship. Your artwork stays on your device, which matters when the source is an unreleased brand mark.

Frequently asked questions

Comet's got your back

Stuck on something? Every tool has a short guide and FAQ — and Comet can point you to the right spot.

Visit help centre

Related tools

All Image tools →