Skip to content
Search

Favicon

lastmod 2025-02-14created 2020-12-2718 edits

A favicon (favicon, 'favorites + icon') is an icon representing a website or web page, displayed in the address bar of an internet web browser.

Categories

Favicon summary for 2021

Six files that fit most needs

  • Browser specs require numerous files; this condenses them into one set
  • 5 images and one JSON file
    • .ico 32x32 : older browsers
    • .svg : scalable, most modern browsers, also supports dark mode
    • apple-touch-icon 180x180 : for Apple devices, 180x180 size for iOS8+ and later. Looks good with about 20px of padding and a background color
    • manifest(JSON) : for PWA and Android devices
      • 192x192 : home screen
      • 512x512 : for the splash screen while a PWA loads

Extremely short version

Instead of serving dozens of icons, all you need is just five icons and one JSON file.

In your HTML, for the browser: 

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

And in your web app manifest: 

// manifest.webmanifest
{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

That is it. If you want to know how I arrived at this, which compromises I had to take, and how to build a set like this from scratch in a step-by-step fashion, tune in for the rest of the article.

Favicon summary for 2025

Changing the favicon when switching browser tabs

On receiving the "visibilitychange" event, check the document.hidden value and swap the icon 

const favicon = document.querySelector('link[rel="icon"]')

document.addEventListener("visibilitychange", () => {
    const hidden = document.hidden

    favicon.setAttribute(
        "href", 
        `/favicon${hidden ? "-hidden" : ""}.ico`
    )
})

Projects

Supercookie
Fingerprinting with favicons
https://github.com/jonasstrehle/supercookie
favicons
Favicons generator for Node.js
https://github.com/itgalaxy/favicons
Tinycon
A favicon manipulation library
Can add notification bubbles to the favicon shown at the top of the browser
Adaptive Favicon
Building a favicon that supports dark mode using SVG
Specify both ico and svg so it applies only in browsers that support it
Include a tag inside the SVG xml to add prefers-color-scheme: dark
Favicon Generator for perfect icons on all browsers
Favicon Generator. For real.
Random Favicon Generator
Select a beautiful random favicon from a set of over 1950 MIT-licensed, free, awesome Tabler icons set. Choose colors, stroke width, and other styling properties to give a custom and unique look and feel.
Uses Tabler icons, 1950 MIT-licensed images
Can set the background type (circle, square, rounded square, transparent), fill color, stroke width and color, rotation, scale, and more
Favicon Generator - Free, Privacy focused In-Browser Conversion
https://www.favicon.software/
  • A web application that generates favicons from images/logos
  • Supports formats such as SVG, PNG, WEBP, JPEG, BMP, GIF, AVIF
  • Generates favicons in 4 formats, downloadable as a bundle
    • Browser 16x16
    • Taskbar shortcut 32x32
    • Apple touch 180x180
    • WordPress 512x512

See also

Favorite site

author Zer0 sitemap