How to Use This Tool
A favicon used to be one 16×16 file. It is now a small family: a legacy .ico that
browsers request whether you reference it or not, PNGs at several sizes, a 180×180 icon for iOS home
screens, and a manifest for Android. Miss one and you get a blank square somewhere, or a 404 in your logs
every time anyone visits.
Two ways to start
From an image takes a square PNG or SVG. Bigger is better — 512×512 or an SVG gives clean results at every size, while a 64×64 source will look soft when scaled up for the iOS icon. Transparency is preserved through the PNG outputs.
From a letter generates a lettermark with a background colour, a text colour and an adjustable corner radius. This is genuinely useful for a project that has no logo yet, and it produces something far better than the browser's default blank page icon.
The .ico file, and why it still matters
Every browser requests /favicon.ico from your site root automatically, before it has read a
single line of your HTML. If the file is not there you get a 404 on every first visit, forever, cluttering
your logs and wasting a request. This tool builds a genuine multi-resolution ICO containing 16, 32 and 48
pixel versions in one file — not a renamed PNG, which some generators produce and which older Windows
versions reject.
Design advice you will ignore once and then follow
Look at the tab preview above the file list. It is showing the icon at 16×16, which is roughly the size of one character of body text. Full logos, wordmarks and anything with thin lines become an unreadable smudge at that size. Companies with detailed logos use a simplified mark for their favicon for exactly this reason. If your icon is unrecognisable in that preview, it will be unrecognisable in a real tab, and no amount of extra sizes will fix it.
Padding and the transparency plate
Padding adds breathing room inside the square, which matters for iOS where the icon is rounded and clipped. Around 10% is typical for a logo that already has its own margin, more if it does not.
Behind transparency handles the awkward case of a dark logo on a transparent background: it looks fine on a light browser tab and disappears entirely in dark mode. Putting a solid plate behind it guarantees it is visible in both. If your mark works in both, keep it transparent.
Where to put the files
Put every generated file in your site root, not a subfolder, and paste the HTML into your
<head>. The root placement matters specifically for favicon.ico, which is
requested at a fixed path regardless of your markup. Browsers cache favicons aggressively, so after
replacing one you will often need a hard refresh — or an incognito window — before you see the change.
