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.

The favicon sizes you need in 2026: 16, 32 and 48 in favicon.ico, 180 for iOS, 192 and 512 for Android and PWA. Check yours with the size checker.

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 needs a square favicon at a multiple of 48x48px, linked with rel=icon and crawlable by Googlebot. Why yours may not show and how long it takes.

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.

A favicon.ico is usually 5–15KB and a 32px PNG 1–3KB; even a 512px icon stays under 100KB. Typical file sizes, and why hundreds of KB means a mistake.

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.

Declare at least a 192x192 and a 512x512 PNG in the manifest.json icons array, each with src, sizes, type and purpose. JSON example and field guide.

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.

manifest.json (or site.webmanifest, both work) gives browsers your app's name, icons, colours and display mode. Key fields and a minimal example.

A PWA needs a 192x192 and a 512x512 PNG in its manifest or browsers won't offer install. Add a maskable icon for Android and an 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.

apple-touch-icon.png is one 180x180 PNG that iOS uses for Home Screen icons. The link tag to copy, why transparency turns black, and the precomposed name.

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 one-colour SVG declared with rel="mask-icon" and a color attribute. Recent Safari falls back to your favicon, so it is optional.

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.

Set apple-mobile-web-app-capable to yes and iOS opens your home-screen web app full-screen. Plus the status-bar-style tag and the 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.