Favicon Glossary

A favicon is the small icon a browser shows for your site in tabs, bookmarks and history. What it is, the sizes and formats you need, and how to add one.

An app icon represents an installed app on a home screen or launcher, not a site in a browser tab. Where each platform reads it from, and what to ship.

Complete guide to favicon sizes. Every dimension for browsers, iOS, Android and PWA, which ones are essential, and where each file goes.

ICO vs PNG favicon compared: colour depth, transparency, file size and browser support, plus the head tags to ship both without conflicts.

An SVG favicon is one vector file that stays sharp at every size and can react to dark mode. Browser support, the link tag, and the fallbacks to keep.

favicon.ico is the icon browsers request from your site root when no icon is declared. What is inside the file, where to put it, and why to keep it.

Manifest icons are the entries in the icons array of manifest.json. What each field does, the sizes to declare, and how browsers pick one.

A maskable icon fills the whole square so platforms can crop it to any shape. The 80% safe zone, the manifest purpose field, and how to test it.

The apple-touch-icon is the PNG iOS uses when a site is added to the Home Screen. The 180x180 size, the link tag, and why transparency turns black.

The theme-color meta tag tells browsers what colour to paint UI around your page. Where it shows up, dark mode variants, and the manifest equivalent.