Favicons & App Icons

A favicon ("favorite icon") is the small square icon shown in a browser tab, bookmarks list, history, and address bar. It is one of the smallest assets on a site, but its absence is one of the most noticeable — a generic blank-page icon in a row of tabs makes a site look unfinished.

Beyond the classic tab icon, modern browsers and operating systems ask for several more icon sizes: home-screen icons on iOS/Android, tile icons on Windows, and manifest icons for installable web apps (PWAs).

The Legacy favicon.ico

Historically, browsers looked for a file literally named favicon.ico at the root of a domain — no HTML markup required. This convention still works today as a fallback, which is why most sites still ship a /favicon.ico even alongside modern <link> tags.

Text

https://example.com/favicon.ico

Note

The .ico format can bundle multiple resolutions (16×16, 32×32, 48×48) in a single file, which is why it survived even after PNG and SVG became easy to use everywhere else on the web.

Modern <link rel="icon"> Tags

Explicit <link> tags in <head> give you control over format and size, and let you serve different icons for light/dark themes or different pixel densities.

HTML

<head>
  <!-- Fallback / legacy -->
  <link rel="icon" href="/favicon.ico" sizes="any">

  <!-- Modern SVG favicon (scales to any size, tiny file) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- PNG icons at specific sizes for browsers that need a raster fallback -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
</head>

Attribute	Purpose
rel="icon"	Marks this link as a favicon resource
type	MIME type of the icon file (image/png, image/svg+xml, image/x-icon)
sizes	Pixel dimensions the icon is intended for, e.g. "32x32" or "any" for SVG
href	Path to the icon file

Apple Touch Icon

iOS Safari ignores standard favicons when a user adds a site to their home screen. It looks instead for an apple-touch-icon, a larger square PNG (typically 180×180) without transparency — iOS applies its own rounded-corner mask on top.

HTML

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

Warning

Apple touch icons should not use a transparent background. iOS renders transparent areas as solid black on the home screen, which usually looks broken. Fill the background with your brand color instead.

manifest.json for PWA Icons

A web app manifest is a JSON file that describes a site as an installable app — name, theme color, start URL, and a set of icons at various sizes for Android home screens, app launchers, and splash screens.

HTML

<link rel="manifest" href="/manifest.json">

JSON

{
  "name": "Let Codes",
  "short_name": "LetCodes",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1976d2",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "/icons/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Note

The purpose: "maskable" icon should have important content confined to a safe zone in the center — Android may crop it into a circle, squircle, or rounded square depending on the device's icon shape.

SVG Favicons

SVG favicons are the modern default of choice: one file, infinitely scalable, tiny in file size, and — unlike PNG — can even respond to the user's OS color scheme using an embedded <style> media query.

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #1976d2; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #90caf9; }
    }
  </style>
  <circle cx="16" cy="16" r="14" />
</svg>

Tip

Browser support for SVG favicons is strong in Chrome, Firefox, and Edge, but Safari's support has historically been inconsistent. Always keep a PNG or ICO fallback link alongside the SVG one — browsers pick the first supported format they understand.

Recommended Minimal Set

For most projects, this covers the practical cross-browser/cross-device baseline without going overboard on icon variants:

HTML

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

Where Files Should Live

favicon.ico at the site root (/favicon.ico) as the universal legacy fallback.
icon.svg, PNG variants, and apple-touch-icon.png typically in the public/static root or an /icons folder.
manifest.json at the root, referenced via a <link rel="manifest"> tag.
In Next.js App Router specifically, files named favicon.ico, icon.png, or apple-icon.png placed directly in the app/ directory are picked up automatically without manual <link> tags.

Key Takeaways

favicon.ico at the domain root still works as a zero-config legacy fallback.
Use explicit <link rel="icon"> tags for control over format, size, and light/dark variants.
apple-touch-icon is a separate, opaque PNG required for iOS home-screen icons.
manifest.json supplies the icon set (including maskable icons) for installable PWAs on Android.
SVG favicons are the modern, scalable, tiny-file-size default — pair them with a PNG/ICO fallback for older browsers.