<link rel="icon"> / <link rel="preload">

Since:		HTML5（2014）

link rel="icon" specifies the favicon displayed in browser tabs, bookmarks, and search results. link rel="preload" instructs the browser to fetch resources early, improving page load performance.

Syntax

<!-- Favicon (SVG recommended; PNG and ICO also supported) -->
<link rel="icon" href="/favicon.svg?lang=en" type="image/svg+xml">
<link rel="icon" href="/favicon.png?lang=en" type="image/png">
<link rel="icon" href="/favicon.ico?lang=en">

<!-- Home screen icon for iOS / iPadOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png?lang=en">

<!-- preload: fetch a font early -->
<link rel="preload" href="/fonts/NotoSansJP.woff2?lang=en"
      as="font" type="font/woff2" crossorigin>

<!-- preload: fetch critical CSS early -->
<link rel="preload" href="/css/style.css?lang=en" as="style">

<!-- prefetch: fetch resources needed on the next page (low priority) -->
<link rel="prefetch" href="/next-page.html?lang=en">

rel attribute values

preload fetches resources that are definitely needed on the current page, while prefetch fetches resources that may be needed on the next page. The crossorigin attribute is required when preloading font files. This is required by browser security specifications (CORS).

rel value	Description
icon	Specifies the favicon shown in browser tabs, bookmarks, and search results.
apple-touch-icon	Specifies the icon used when the page is added to the home screen on iOS or iPadOS. The recommended size is 180×180 px.
preload	Fetches a resource needed soon on the current page at high priority. Use it for fonts, CSS, images, scripts, and similar assets.
prefetch	Fetches a resource that may be needed on the next page at low priority. The browser retrieves it during idle time.
preconnect	Establishes a connection to an external domain early — including DNS resolution, TCP handshake, and TLS negotiation.
dns-prefetch	Performs only the DNS resolution for an external domain in advance. Lighter than preconnect.

Sample code

sample_link_icon_preload.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <!-- Favicon: SVG-capable browsers use SVG; others fall back to PNG or ICO -->
  <link rel="icon" href="/favicon.svg?lang=en" type="image/svg+xml">
  <link rel="icon" href="/favicon.png?lang=en" type="image/png" sizes="32x32">
  <link rel="icon" href="/favicon.ico?lang=en" sizes="any">

  <!-- Home screen icon for iOS -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png?lang=en" sizes="180x180">

  <!-- Pre-connect to Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Preload critical font to prevent layout shift -->
  <link rel="preload"
        href="/fonts/NotoSansJP-Regular.woff2?lang=en"
        as="font"
        type="font/woff2"
        crossorigin>

  <!-- Prefetch the next page -->
  <link rel="prefetch" href="/page2.html?lang=en">

  <link rel="stylesheet" href="/css/style.css?lang=en">
  <title>Sample page</title>
</head>
<body>
  <h1>Performance optimization example</h1>
</body>
</html>

Result

The browser tab displays the SVG or PNG favicon. When the page is added to the home screen on iPhone, the 180×180 px icon is used. Because the font is preloaded, the browser starts fetching the font file while parsing the HTML — without waiting for CSS parsing to finish — so the time until text renders in the correct font is reduced.

View sample page

Notes

SVG is currently the most recommended format for favicons. Because SVG is vector-based, it renders sharply at any size, and dark mode support can be handled with CSS. However, it is still recommended to include PNG and ICO as fallbacks for older browsers that do not support SVG. When multiple link rel="icon" elements are listed, the browser picks the last one it supports, so the standard practice is to list SVG first and ICO last.

link rel="preload" is a way to fetch resources that are definitely needed on the current page earlier. Web fonts in particular tend to load late because fetching begins only after CSS is parsed. With preload, the fetch starts at the same time as HTML parsing. Always include the crossorigin attribute when preloading fonts. Omitting it causes the same font to be fetched twice.

Overusing preload can have the opposite effect. Preloading resources that are not actually used on the page delays the fetch of resources that are truly needed. Limit preload to resources you are certain will be used soon on that page. If you simply want to speed up connections to external services, the lighter-weight preconnect or dns-prefetch is more appropriate.

Dark Mode SVG Favicon

SVG favicons can embed CSS prefers-color-scheme media queries, automatically switching colors between light and dark mode.

<!-- Contents of favicon.svg (written inside the favicon.svg file) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    /* Black in light mode, white in dark mode */
    circle { fill: #333; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #fff; }
    }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

<!-- Load in HTML (SVG first, ICO as fallback) -->
<link rel="icon" href="/favicon.svg?lang=en" type="image/svg+xml">
<link rel="icon" href="/favicon.png?lang=en" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon.ico?lang=en">

The as Attribute and Resource Types for preload

When using rel="preload", the as attribute value must match the type of resource. Incorrect values cause the browser to assign the wrong fetch priority.

as value	Resource type	Example
font	Web font files	NotoSans.woff2
style	CSS files	critical.css
script	JavaScript files	app.js
image	Image files	hero.webp, icon.png
fetch	Resources fetched by XMLHttpRequest or the Fetch API	data.json (crossorigin required)
document	HTML documents used in iframes	embed.html

<!-- Preload a hero image (WebP with PNG fallback) -->
<link rel="preload" href="/img/hero.webp?lang=en" as="image" type="image/webp">

<!-- Preload a JSON fetch -->
<link rel="preload" href="/api/data.json?lang=en" as="fetch" crossorigin>

<!-- Preload critical CSS and apply it immediately -->
<link rel="preload" href="/css/critical.css?lang=en" as="style"
      onload="this.onload=null;this.rel='stylesheet'">