HTML Favicon

A favicon (short for "favorite icon") is the small square icon that represents your website. It shows up in the browser tab, next to bookmarks, in browser history, and as the app icon when a visitor adds your site to their phone's home screen.

Favicons are added using one or more <link> elements inside <head>.

1) Basic Favicon (.ico)


<link rel="icon" href="favicon.ico" type="image/x-icon">

The classic .ico format is supported by every browser, including very old ones. By convention, a file literally named favicon.ico placed at the root of a domain is picked up automatically by most browsers even without a <link> tag, but explicitly declaring it is more reliable.

2) Modern PNG Favicons (Multiple Sizes)


<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">

PNG favicons support transparency and sharper rendering at specific sizes. Providing several sizes lets the browser choose the best match for the tab, bookmark bar, or high-DPI screen.

3) SVG Favicon


<link rel="icon" type="image/svg+xml" href="favicon.svg">

SVG favicons scale perfectly to any size and can even respond to prefers-color-scheme for dark mode. Browser support is good in modern browsers, so it's common to list an SVG favicon first and a PNG/ICO fallback after it for older browsers.

4) Apple Touch Icon (iOS Home Screen)


<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

iOS Safari does not use the regular favicon when a user taps "Add to Home Screen." It instead looks for rel="apple-touch-icon", ideally a 180x180 PNG without transparency (iOS adds its own rounded corners and background).

5) A Complete Favicon Set


<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">

Combining an .ico fallback, an SVG for modern browsers, an Apple touch icon, and a web manifest (used by Android/PWA install prompts) covers almost every device your visitors might use.

Tips:

  • Recommended base sizes: 16x16 and 32x32 for tabs, 180x180 for Apple touch icon, 192x192/512x512 for Android/PWA icons.
  • Design your source icon as a simple, high-contrast square — small favicons lose fine detail.
  • Free online favicon generator tools can automatically produce every size and the matching <link> tags from a single source image.
  • Place <link rel="icon"> early in <head> so browsers can fetch it as soon as possible.
  • Even without a <link> tag, keep a favicon.ico at your domain root as a safety net.