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

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

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

<!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.

<!-- How the browser processes the page -->
Page load starts
  ↓ Immediately (preload)
  ├ Fetch NotoSansJP-Regular.woff2
  ├ Connect to fonts.googleapis.com (preconnect)
  ↓ After CSS is parsed
  └ Apply font (already downloaded, applied instantly)
During idle time
  └ Prefetch page2.html (prefetch)

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.