My Site
My Site
Files7
Mark contrast18.9:1
Tab separation1.6:1
16px verdictReads
A favicon is judged at sixteen pixels and designed at five hundred, which is why so many of them turn out to be an unreadable smudge in the tab. This one shows you the mark at its true size on both a light and a dark browser strip while you design it, then packages the files browsers actually read today — and tells you which of the historical ones it left out, and why.
Step by step
01Start from a letter or your own mark
One or two characters in a typeface of your choosing, or a logo file dropped anywhere on the canvas. The file is decoded in the page — it is never uploaded, which is what makes it reasonable to use an unreleased brand asset here.
02Watch the 16-pixel preview, not the big one
Each preview is drawn at its true pixel size and then enlarged, rather than drawn large and shrunk. That is the difference between seeing what sixteen pixels can hold and seeing a smooth downscale that flatters everything.
03Check it against both browser themes
The icon's background is the shape the eye picks out in a tab strip. A dark mark tuned against a white browser can vanish entirely in a dark-themed one, so both are shown side by side with the contrast measured.
04Take the package
A zip with the ICO, the SVG, the Apple touch icon, the two PWA sizes, a manifest, and the four lines of markup that reference them. Unzip it into your web root and paste the snippet into the head.
Worked example
A 16 × 16 favicon has 256 pixels in total. Divide that between glyphs and the arithmetic decides the outcome before any design does.
Given
Horizontal pixels available per glyph
1 character ~10 px wide strokes, counters and gaps all survive
2 characters ~5 px wide tight, but two capitals still separate
3 characters ~3 px wide a stem is 1px; the counters close up
4 characters ~2 px wide a grey rectangleA letterform needs roughly five pixels of width before its enclosed space survives — below that the counter of an 'a' or an 'e' fills in and every glyph converges on the same grey block. Two characters is the practical ceiling for a favicon, and one is safer. If the brand is three letters, use the initial and put the full name in the title tag, where there is room for it.
The set most generators still get wrong
The 2026 set is small, and most tools have not noticed
An ICO holding 16, 32 and 48, an SVG, a 180px Apple touch icon, and 192 and 512 for the manifest. That is the whole list. Generators that emit fifteen PNGs and a browserconfig.xml are shipping a checklist that stopped being true around 2015.
Safari's mask-icon is dead
The rel="mask-icon" pinned-tab icon has been deprecated since macOS Monterey, and desktop Safari now reads the ordinary SVG favicon instead. Apple's own site no longer ships the tag. Emitting it adds a file, a tag, and a monochrome design constraint for no surface at all.
The Apple touch icon must be opaque
iOS does not composite alpha on a home screen icon — a transparent PNG is flattened onto black rather than onto the wallpaper. The 180px export here paints the background in for that reason, which is why it is the one file in the package that ignores your corner shape.
Design the silhouette, not the artwork
At sixteen pixels a favicon is a coloured shape with maybe one letter in it. Detail, gradients, thin strokes and outer glows all resolve to mud. The decisions that survive are the background colour, the silhouette, and whether the mark has enough weight.
A website logo is rarely a favicon
Most logos carry a wordmark and detail tuned for a header at 40 pixels tall. Cropping to the symbol alone and dropping the words is almost always the right move — a favicon that is a recognisable fragment beats one that is a faithful but illegible miniature.
Bold beats regular at icon sizes
A regular weight's thin strokes fall below one pixel when rasterised at 16, so they either disappear or get anti-aliased into grey. The same letter set bold keeps a solid one- or two-pixel stem, which is what the eye needs to identify a shape at that size.
The judgement call
The choice that decides whether anyone recognises your tab.
A one-word brand
The initial
One character gets roughly ten pixels of width, which is enough for the letterform to keep its shape.
A two-word brand
Both initials
Two capitals at around five pixels each still separate. Set them bold and check the 16px preview.
A brand with a distinct symbol
The symbol alone
A recognisable shape beats a letter, and it survives being scaled better than type does.
A logo with a wordmark
Crop to the symbol
The words become an unreadable grey bar. Nobody has ever read a wordmark in a tab strip.
A detailed illustrated mark
Simplify it first
Fine detail resolves to mud at 16px. Reduce it to two or three shapes before bringing it here.
A three-letter acronym
Use one letter
Three glyphs get about three pixels each, which is below what any letterform needs. Put the acronym in the title tag.
Reference
FAQ
A favicon.ico containing 16, 32 and 48 pixels, an SVG favicon, a 180 × 180 apple-touch-icon, and 192 and 512 pixel PNGs referenced from a web app manifest. That covers every current browser and platform. The longer lists still published by most generators — 96, 144, 152, a browserconfig.xml — target surfaces that have been retired.
Almost always because it was designed at a large size and never checked at sixteen pixels. Fine strokes fall below one pixel and vanish, detail resolves to grey, and more than two characters gives each glyph about three pixels of width — not enough for a letterform to keep its shape. The Tinapps favicon generator renders the mark at true 16 pixels while you design so the problem is visible before you ship it.
Yes, as a fallback. Browsers request /favicon.ico by default even with no markup, and the ICO format carries several sizes in one file so each surface picks the one it needs. Pair it with an SVG favicon for browsers that prefer vector, and add sizes="any" to the ICO tag so those browsers do not download both.
Use one alongside the ICO, not instead of it. An SVG favicon is a few hundred bytes, stays sharp at any size, and can respond to a dark colour scheme with a media query inside the file. Support is good in Chrome, Firefox, Edge and current desktop Safari, but the ICO is still what a browser reaches for when the SVG is not understood.
Because it was exported with transparency. iOS does not composite alpha on home screen icons and flattens them onto black instead of the wallpaper, so a transparent PNG gains a black square. The 180 × 180 file this tool generates is always exported opaque for exactly that reason.
No. The Tinapps favicon generator decodes your file in the browser and renders every size on a canvas in the page, including the zip. No request carries your image, which is what makes it safe to use an unreleased logo or a client's brand asset here.
Unzip them into your web root, so they sit at /favicon.ico, /favicon.svg, /apple-touch-icon.png and so on, then paste the four-tag snippet into the head of your HTML. Browsers look for favicon.ico at the root by default, which is why that file in particular should not be moved into an assets folder.
The mark is rendered and packaged entirely in your browser. Your logo file is never uploaded, and the zip is assembled in the page.
Keep going
SVG background
Generate a shape to sit behind the mark if a flat fill is too plain.
Contrast checker
Check the mark against its ground before committing to the pair.
Image cropper
Crop a full logo down to the symbol before bringing it here.
Base64 converter
Inline the 32px icon as a data URI if you are avoiding a request.