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.

A favicon is the tiny tab icon; an Open Graph image is the large preview when your link is shared. Different files for different jobs: here's which is which.

A logo is your full brand mark; a favicon is a tiny derivative that has to read at 16 pixels. Why you can't just shrink the logo, and how to derive one that works.

Making a favicon by hand means exporting each size and writing the tags yourself; a generator does both in seconds. When hand-rolling is fine and when it isn't.

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

The <link rel="icon"> tag tells the browser where your favicon is. What rel, href, type and sizes each do, where the tag goes, and the modern set worth shipping.

"shortcut icon" is a legacy rel value for favicons. Why the "shortcut" keyword is redundant, whether you still need it, and what to write instead.

Browsers cache favicons harder and longer than most assets, and separately from the page. Why they're so sticky, and how to force a favicon to refresh.

A favicon can respond to the OS light or dark setting: an SVG with a media query inside, or two PNGs swapped via prefers-color-scheme on the link tag.

Google shows a favicon next to your result, mainly on mobile. The size and format it needs, how it finds the icon, and why yours might not appear.

Browsers and crawlers request /favicon.ico from your domain root whether or not you link it. Why the file belongs at the root, and how frameworks change where you put it.

BIMI shows your brand logo next to emails in supporting inboxes: the favicon of email. What it needs: an SVG Tiny PS logo, DMARC enforcement, and often a certificate.

Favicons render in square slots, so a non-square image gets letterboxed or stretched. Why square is effectively required, and how to handle a wide logo.

Favicons are tiny: a favicon.ico is usually a few kilobytes and PNG sizes well under 100KB. What drives the size, and why an oversized favicon is a red flag.

A docs favicon is your normal site icon wrapped in a coloured outline, used on a documentation subdomain so its tabs are tellable from the main app's. What it is and how to deploy it.

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.

You can inline a favicon as a base64 data URI instead of a separate file. When that saves a request, and the surfaces where it quietly breaks.

Some browsers animate a GIF favicon in the tab. Which support it, why sites use JavaScript for live status instead, and when to keep it static.

WebP favicons work in most modern browsers but not everywhere, and never for /favicon.ico. When a WebP icon is fine and why PNG and ICO stay the safe choice.

Transparent favicons look clean in a tab but break on iOS home screens, which composite onto black. When transparency helps and when to use a solid background.

You can use an emoji as a favicon with a one-line inline SVG: handy for a quick placeholder. Why it renders differently per OS, and when to export a real file.

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 web app manifest is a JSON file that tells browsers how your site behaves when installed: its name, icons, colours and display mode. What it holds and why.

A PWA needs specific icons before a browser will offer to install it: 192x192 and 512x512 in the manifest, ideally a maskable one, plus apple-touch-icon for iOS.

The manifest display property decides how an installed PWA looks: browser, minimal-ui, standalone or fullscreen. What each mode shows and which to pick.

A manifest has two colours that do different jobs: theme_color tints the OS UI around your app, background_color paints the splash screen. Plus the meta theme-color.

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.

Safari pinned tabs use a monochrome SVG declared with rel="mask-icon". What the file must look like, the color attribute, and whether it still matters.

The precomposed variant told old iOS not to add its glossy shine to a home screen icon. Whether it still does anything, and what to use today.

browserconfig.xml and the msapplication-* meta tags defined pinned-site tiles for Windows and legacy Edge. What they did and whether you still need them.

The apple-mobile-web-app-capable meta tag runs a home-screen web app full-screen on iOS. What it does, the status bar tag, and the modern manifest alternative.

apple-touch-startup-image sets the launch screen for a web app added to the iOS home screen. Why it needs one image per device size and the media queries involved.