Favicon Generator

What a modern site needs, and how many files

A favicon used to be one file, favicon.ico, containing several sizes. That is no longer the whole requirement. A browser tab requests a small icon, a home screen shortcut on a phone requests a much larger one, and a pinned tab in some browsers requests another size entirely. The set this tool produces covers the sizes that matter: an ICO containing 16, 32, and 48 pixel images, and individual PNGs at 16, 32, 48, 192, and 512 pixels.

NoteOne favicon.ico is no longer sufficient. Modern platforms request larger, separate PNG files.

A small source is a real limit

A 16 pixel icon is being asked to represent something in very few pixels, and what survives is shape rather than detail. A wordmark, a photograph, or anything with fine interior detail becomes an unreadable smudge at that size, no matter how well the source was prepared. The practical approach is to start from artwork that already works small: a simple mark, a single letter, a bold silhouette, with generous padding so it does not touch the edges. Starting from a 1,024 pixel master is sensible, and a 64 pixel source is already working at the limit of what 16 pixels can show.

• A 16 pixel icon can only show shape, not detail.
• Text and photographs become smudges at tab size.
• Start from simple artwork: a mark, a letter, a bold silhouette.
• Leave padding so the mark does not touch the icon edge.
• A 1,024 pixel master is sensible. Below about 64 pixels, nothing is gained.

The square canvas and the transparency question

Icons are square, and a source that is not will be fitted to a square one way or another, which either crops it or adds a background. For a mark with a transparent background that is exactly what you want, and PNG preserves it. A source photo needs a background added, because a photo has no transparency to preserve and the result will otherwise be a square of whatever was behind it. Whether a mark should touch the edges is a design decision: most system icons on phones are given a margin by the operating system, and artwork that fills the whole square looks cramped beside them.

• Icons are square. A non square source is either cropped or padded.
• A transparent PNG logo fits cleanly and keeps its background.
• A photo needs a background colour added deliberately.
• Phone home screen icons are displayed with a margin by the system.
• Artwork filling the whole square looks cramped next to system icons.

Wiring the files into a site

Generating the files is the easy part. A browser looks for favicon.ico at the root of the domain by default, without any markup, and placing it there is enough for a basic tab icon. The larger sizes need to be declared in the page head, each with its own link element, and that is what tells a phone or a pinned tab to use the sharp version rather than enlarging the 16 pixel one. Getting the paths wrong is the usual reason a favicon appears in a local build and not in production, and relative paths break it, so absolute or root relative paths are the safer choice.

• favicon.ico at the domain root is found automatically, no markup needed.
• The larger PNGs need link elements in the page head.
• Use root relative or absolute paths. Relative paths break in subdirectories.
• A favicon that works locally but not in production is usually a path problem.

NoteIf the icon shows in preview but not on the live site, the path is the first thing to check.