Skip to content


Minimal example:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Example that includes for Apple and Android (via Evil Martians):

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

And the manifest:

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

If there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used.

Creating a favicon

Favicon Generator:

WordPress plugin:

Generator as used by above plugin:

Online Favicon Generator

Change on browser tab switching

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

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

        `/favicon${hidden ? "-hidden" : ""}.ico`

Credit: Change favicon on switching browser tabs in JavaScript