<
zhead
>

Early Access

Link

icon

Learn how to use the icon rel link tag to improve your site.

Links a web page to an icon graphic that browsers can use to represent the page, especially useful for favicon in browser tabs, bookmarks, history, etc. It supports various image formats and sizes.

Code Examples

<link rel="icon" href="/favicon.ico" sizes="16x16">
Links to a favicon.ico icon explicitly stating its size, ensuring legacy browser compatibility.
<link rel="icon" href="/icon.png" sizes="192x192">
Defines a high-resolution PNG icon suited for Progressive Web Apps and Android Chrome.
<link rel="icon" href="http://example.com/favicon.ico">
Icon is served over HTTP which can lead to mixed content warnings if the site uses HTTPS.
<link rel="icon">
Missing the href attribute. There’s no path specified for the browser to locate the icon, leading to a missing or default icon being displayed.

Recommendations

  • Multiple Icons for Different Contexts
    Define multiple <link rel="icon"> elements with different sizes for various device displays. It ensures the best quality icon is used across platforms.
  • Use the Correct Image Format
    While .ico format is the most backwards-compatible, modern browsers also support PNG and SVG, which allow for more detailed icons with smaller file sizes.
  • Serving Over HTTPS
    For security reasons and to avoid mixed content warnings, serve your icons from HTTPS URLs, especially if your site is also served over HTTPS.
  • Avoid Frequent Changes
    Browsers cache icons aggressively; frequent changes might not be reflected to users immediately. When changing icons, consider using a new filename to force browsers to fetch the updated icon.

Related Documentation