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.
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.