Make a favicon from an image, a letter or an emoji and get the minimal modern set: five files instead of thirty. With a real-size preview and ready-made code. The image never leaves your device.
The image is processed in your browser — the logo never leaves your device
Emoji are drawn by the operating system and look different on Windows, macOS and Android. The file gets exactly the picture you see in the preview.
Mark code
Scripts, event handlers and external links are stripped before rendering: icon code is often taken from someone else's archive.
Plate and padding
Icon background
The whole icon512 × 512
The chequerboard under the icon is transparency. For Apple a background is placed underneath it.
Dark variantfor the SVG favicon
When the tab is dark, the SVG substitutes this colour for the mark — a black logo simply disappears there.
Mark colour in dark mode
Background in dark mode
Off: icon.svg carries a single variant, and on a dark tab a dark logo will all but disappear.
02
Preview
at real size — 16 pixels really is that small
How people will see it1:1, nothing enlarged
My site — home
Tab · light · 16px
My site — home
Tab · dark · 16px
Bookmarks · 32px
iOS · 180px · no transparency
Android · 192px · crop zone
Checks1 to look at
Readable in a tabContrast and scale are enough for 16×16 — the main exam a favicon has to pass.
The iOS icon is opaqueThe background is filled — on an iPhone home screen the icon will not become a black square.
The mark is inside the safe zoneEven with a circular crop on Android the important part stays in frame.
The dark variant is offOn a dark tab a dark mark all but disappears. Turn the dark variant on — it lives only in the SVG and breaks nothing.
The checks are simple and explainable: they look at contrast, fine detail and the position of the mark. This is a hint, not a verdict — the decision is yours.
03
Files and code
five files and a manifest — the rest is a legacy of platforms that are gone
Put the files in the root of your site next to the home page and paste these lines into the head. The order matters: the ico comes first as a fallback.
04
Examples
including the one that fails — and that is honest
Monogram
Safe bet
A single letter on a solid background reads at any size — the most predictable favicon when there is no logo yet.
Emoji
Fastest
A favicon for a side project in a second. The background is transparent, so iOS gets a solid fill underneath — otherwise the icon turns black.
Simple mark
Dark mode
Two-colour geometry. The dark variant is on: in a dark browser tab the mark lightens by itself.
Busy logo
Counter-example
Hairlines and a caption in small type. At 16×16 it is a grey smudge: the checks fire, and that is an honest result, not a failure.
05
About favicons
A favicon is the small icon of a site: in the browser tab, in bookmarks, in search results, on a phone's home screen. Generators used to hand out three dozen files for every occasion. That is no longer needed: a modern site does with five icons and one manifest file.
Five files instead of thirty
Minimal
.ico · .svg · 180 · 192 · 512
An ico for tabs, an SVG for modern browsers, one icon for iOS and two sizes for the manifest. Everything else is a legacy of platforms that are gone.
The 16×16 test
Key
tab · 16 px
In a tab the icon is the size of a letter. A detailed logo turns into a smudge there — only a simple shape with strong contrast survives.
Dark mode
SVG
prefers-color-scheme
A black mark disappears on a dark tab. An SVG favicon can substitute a light variant automatically — neither ico nor PNG can.
Apple without transparency
iOS
180 × 180
Transparency in the iOS home screen icon turns black. A background is always placed underneath that file.
Safe zone
Android
maskable
Android crops the icon to the shape of the device — a circle or a rounded square. Anything important belongs in the central zone.
Privacy
Local
no server
The image is processed in the browser and never uploaded — a logo can be prepared before it goes public.
06
Frequently asked
Five files are enough: favicon.ico at 32×32 with a 16×16 layer inside, icon.svg for modern browsers, apple-touch-icon.png at 180×180 for the iOS home screen, and two manifest icons — 192×192 and 512×512. The dozens of sizes that old generators still emit were made for platforms that no longer exist.
Drop the image into the first section — the tool prepares the whole set and shows how the icon looks in a tab, in bookmarks and on a phone. A square image with a simple shape works best: a non-square one is centred, but the empty margins eat half of the mark at 16 pixels.
In a browser tab the icon occupies 16 pixels — roughly the area of a lowercase letter. Hairlines, small type and inner detail merge into a smudge there. A favicon needs a simplified mark or a monogram with strong contrast, and the tool warns about this before the files reach your site.
Apple does not support transparency in the home screen icon: transparent areas are filled with black. That is why apple-touch-icon.png always gets a background underneath — white by default, and you can pick your own colour. The other files in the set keep their transparency.
Turn on the dark variant: icon.svg gets a prefers-color-scheme rule, and the browser substitutes the light colour of the mark whenever the tab is dark. Only SVG can do this — neither ico nor PNG can switch — so without it a black logo simply disappears on a dark tab.
Put the files in the root of the site next to the home page and paste the four lines the tool gives you into the head. The order matters: favicon.ico comes first and acts as a fallback for anything that cannot read SVG. For React and Next.js a separate layout across the app and public folders is shown.