Favicon
/FAV-ih-kon/ · noun · CONTENT pattern · #097
The small icon a website shows in the browser tab, beside bookmarks and in history — usually a simplified version of the logo. The same image, at larger sizes, becomes the shortcut icon when someone adds the site to a phone’s home screen.
Also called: tab icon, site icon, browser tab icon, shortcut icon, bookmark icon.
You might call it
- “the little icon in the browser tab”
- “the little logo in the browser tab”
- “the small icon next to the URL”
- “the tab icon”
- “the icon next to a bookmark”
…its name is Favicon.
Common questions
What is the little icon in the browser tab called?
A favicon, short for “favorites icon” — it first appeared next to bookmarks, which Internet Explorer called Favorites. Browsers show it in the tab, the address bar, bookmarks and history. A number or dot added on top of it, as Gmail does for unread mail, is a badge.
Favicon vs logo: what is the difference?
The logo is the full brand mark used on the page; the favicon is a tiny, simplified version made to read at 16 to 32 pixels, usually just the symbol or first letter without the wordmark. Text and fine detail in a full logo turn to mush at that size.
What size should a favicon be?
Ship an SVG favicon that scales, a 32×32 PNG or favicon.ico as a fallback, a 180×180 apple-touch-icon for iPhone home screens, and 192×192 and 512×512 icons in the web app manifest for Android and installed apps.
In code
| Web (HTML) | <link rel="icon"> <link rel="apple-touch-icon"> |
|---|---|
| Web app manifest | icons 192 and 512 px icons for installed web apps |
| Next.js (App Router) | app/favicon.ico app/icon.png app/apple-icon.png |
| iOS / Android | Apps have an app icon instead; there is no tab to show a favicon in |
Prompt for your AI coding tool
Add a favicon set for this site: an SVG icon that is a simplified, bold version of the logo readable at 16 pixels, a 32-pixel PNG or favicon.ico fallback, a 180-pixel apple-touch-icon with a solid background, and 192- and 512-pixel icons in the web app manifest. Link them in the document head and check the icon stays legible on both light and dark browser tabs.
More UI words to use when vibe coding →
Related patterns
All the parts of a website, named →