Favicon Generator — PNG Icons from an Image or Emoji
Make a complete favicon set from an image or an emoji — every standard size, each downloadable, plus the HTML to link them.
or drag a square logo here
Set an emoji or choose an image.
What this tool does
It builds the small icon a website shows in a browser tab. Give it a logo image, or just an emoji or
a letter, and it renders the icon at every size a modern site needs — from the 16-pixel tab icon up
to the 512-pixel Android icon — and writes the HTML that links them. Each size can be downloaded,
and the snippet is ready to drop into your page's <head>.
The sizes and what each is for
| Size | Used for |
|---|---|
| 16×16 | Browser tab and bookmark bar. |
| 32×32 | Higher-density tabs, taskbar shortcuts. |
| 48×48 | Windows site shortcuts. |
| 180×180 | Apple touch icon — "add to home screen" on iOS. |
| 192×192 | Android home screen (standard density). |
| 512×512 | Android splash screens and PWA installs. |
Designing a favicon that reads at 16 pixels
A favicon is almost always seen tiny, so detail is wasted. The marks that work are simple: a single letter, a bold geometric shape, or one flat colour on another. Fine lines and thin text disappear; a busy logo becomes an unreadable smudge. If your brand mark is complex, consider an emoji or a letter set on your brand colour — the tool supports both, and both stay legible when shrunk.
Everything happens locally
The source image is drawn to a canvas and resized in your browser, and the PNGs are generated there too — nothing is uploaded. That keeps a company logo or an unreleased mark on your own machine, and it means the tool works offline once the page is loaded.
Frequently asked questions
What is a favicon?
The small square icon shown in a browser tab, in bookmarks and next to a site in search results. It is usually a 16 or 32 pixel PNG or an .ico file, and a site also wants larger versions for phone home screens (the apple-touch-icon at 180px) and Android (192 and 512px).
What should the source image be?
A square PNG or SVG works best — a logo, a letter or a simple shape. A tall or wide image is scaled to fit inside a square and padded, so a square source avoids empty bands. Small favicons are unforgiving: a detailed photo turns to mush at 16 pixels, so favour a simple, high-contrast mark.
Can I make one from an emoji?
Yes. Leave the image field empty and type an emoji (or a single letter) into the text field. The tool draws it on a coloured tile, which is the fastest way to get a legible, memorable favicon without any artwork.
Why are there several sizes?
One file cannot serve every context well: an oversized icon wastes bandwidth in a tab, and an undersized one looks blurry on a phone home screen. The tool produces the standard set — 16, 32, 48, 180, 192 and 512 pixels — so each context gets a file that suits it. Download them all and put them in your site root.
Is the .ico format produced?
The generator produces PNGs, which every modern browser accepts as favicons, plus the HTML snippet that links them. A true multi-resolution .ico is a Windows-specific container; if you need one, the PNGs here drop straight into any .ico converter. For current web use, the PNG set is what you want.
Is my image uploaded?
No. The image is opened and resized by your browser on a canvas; the PNGs are generated and downloaded locally. Nothing is sent to a server, so a private logo never leaves your machine.
Go deeper
Longer explanations of the problems this tool solves:
Sources
- MDN Web Docs — Link types: rel="icon" and apple-touch-icon.
- WHATWG HTML — the link element and icon link types.
Everything runs in your browser — your file never leaves your device.