Guida HTML interattiva: Favicon

Q: Come aggiungo una favicon in HTML?

Metti il file dell'icona sul tuo sito e aggiungi (o il percorso di un PNG o SVG) dentro . I browser la mostrano poi nella scheda, nei preferiti e nella cronologia.

Q: Che dimensione deve avere una favicon?

Fornisci una favicon.ico (o PNG) da 32×32 per le schede, un SVG che si adatta a qualsiasi dimensione e un PNG apple-touch-icon da 180×180 per la schermata Home dell'iPhone. Le web app con un manifest elencano anche PNG da 192×192 e 512×512.

Q: Perché la mia favicon non si vede?

Le cause abituali sono un percorso sbagliato in href, il fuori da , o il browser che mostra ancora una vecchia icona dalla cache. Apri direttamente l'URL dell'icona per controllare il percorso, poi ricarica svuotando la cache o aggiungi una versione come ?v=2 all'URL.

Q: Posso usare un SVG o un PNG come favicon?

Sì. Usa o . L'SVG funziona in Chrome, Edge e Firefox; tieni anche un ICO o un PNG per i browser che non lo supportano.

Q: Serve rel="shortcut icon"?

No. rel="icon" è il valore standard. La parola shortcut è un residuo del vecchio Internet Explorer e non fa nulla nei browser attuali.

Come aggiungere una favicon

Salva la tua icona sul sito e puntala da un tag <link rel="icon"> dentro <head>:

<link rel="icon" href="/favicon.ico">

Per un sito semplice è tutto qui. L'href può puntare a un file .ico, .png o .svg. L'esempio qui sotto usa un SVG scritto direttamente nell'href come data URI, così non serve un file separato. Un'anteprima dentro un'altra pagina non può cambiare la scheda del tuo browser, quindi lo script disegna la stessa icona in una finta scheda e in tre dimensioni:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

A 16 pixel c'è spazio per una lettera in grassetto o una forma semplice, e i dettagli fini spariscono. Progetta l'icona partendo dalla dimensione più piccola. Cambia fill='%232563eb' con un altro colore (%23 è il # codificato per URL) e ogni copia si aggiorna.

Quali file fornire

Browser, telefoni e launcher di app cercano icone diverse. Un piccolo insieme le copre tutte:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<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.webmanifest">

File	Dimensione	Usato per
`favicon.ico`	32×32	Schede del browser, e strumenti che cercano solo `/favicon.ico`
`icon.svg`	Qualsiasi (vettoriale)	Schede nitide a ogni densità di schermo, in Chrome, Edge e Firefox
`apple-touch-icon.png`	180×180	L'icona quando qualcuno aggiunge il tuo sito alla schermata Home di un iPhone o iPad
Icone del manifest	PNG da 192×192 e 512×512	Schermata Home di Android e web app installate

La maggior parte dei browser richiede anche da sola /favicon.ico dalla radice del sito quando una pagina non ha un link all'icona, quindi mettere lì una favicon.ico è un utile valore predefinito. L'attributo sizes dice al browser di che dimensione è ogni file, così può scegliere quello più adatto. Usa rel="icon"; il vecchio rel="shortcut icon" funziona solo perché i browser ignorano la parola in più.

Una favicon emoji

Per un prototipo o una pagina personale, un'emoji è una favicon veloce. Mettila dentro un elemento SVG <text>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA è l'emoji del biscotto, codificata per URL. L'emoji viene disegnata dal font emoji del sistema operativo, quindi ha un aspetto diverso su Windows, macOS e Android, e per un prodotto vero è meglio un'icona disegnata apposta.

Un'icona che segue la modalità scura

Una favicon SVG può contenere il suo CSS, compresa una media query prefers-color-scheme, così un'icona scura può diventare chiara quando il browser usa un tema scuro:

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

Cambiare la favicon con JavaScript

I siti usano una favicon che cambia per un pallino di notifica o un colore di stato. Disegna la nuova icona su un <canvas> e imposta l'href del link sull'immagine del canvas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

In una pagina vera in Chrome o Firefox, l'icona della scheda cambia ogni volta che viene impostato href, nello stesso momento in cui qui cambia l'immagine di anteprima.

Errori comuni

Un percorso sbagliato. href="favicon.ico" è relativo alla pagina attuale, quindi non funziona su /blog/post. Usa un percorso dalla radice: href="/favicon.ico".
Aspettarsi che un aggiornamento si veda subito. I browser tengono le favicon in cache con ostinazione. Ricarica svuotando la cache, o cambia l'URL (/favicon.ico?v=2) quando sostituisci l'icona.
Un logo dettagliato ridotto a 16 pixel. Semplificalo: una lettera o una forma con un contrasto forte.
Solo un SVG. Tieni anche un ICO o un PNG per i browser senza supporto per le favicon SVG, e aggiungi l'apple-touch-icon per iOS.
Mettere il link nel <body>. Tienilo in <head> con il tag title e gli altri metadati.

Domande frequenti

Come aggiungo una favicon in HTML?

Metti il file dell'icona sul tuo sito e aggiungi <link rel="icon" href="/favicon.ico"> (o il percorso di un PNG o SVG) dentro <head>. I browser la mostrano poi nella scheda, nei preferiti e nella cronologia.

Che dimensione deve avere una favicon?

Fornisci una favicon.ico (o PNG) da 32×32 per le schede, un SVG che si adatta a qualsiasi dimensione e un PNG apple-touch-icon da 180×180 per la schermata Home dell'iPhone. Le web app con un manifest elencano anche PNG da 192×192 e 512×512.

Perché la mia favicon non si vede?

Le cause abituali sono un percorso sbagliato in href, il <link> fuori da <head>, o il browser che mostra ancora una vecchia icona dalla cache. Apri direttamente l'URL dell'icona per controllare il percorso, poi ricarica svuotando la cache o aggiungi una versione come ?v=2 all'URL.

Posso usare un SVG o un PNG come favicon?

Sì. Usa <link rel="icon" href="/icon.svg" type="image/svg+xml"> o <link rel="icon" href="/icon.png" type="image/png">. L'SVG funziona in Chrome, Edge e Firefox; tieni anche un ICO o un PNG per i browser che non lo supportano.

Serve rel="shortcut icon"?

No. rel="icon" è il valore standard. La parola shortcut è un residuo del vecchio Internet Explorer e non fa nulla nei browser attuali.

Posso usare un'emoji come favicon?

Sì, racchiudendola in un SVG: un data URI SVG che contiene un elemento <text> con l'emoji. È comodo per i prototipi, ma l'emoji ha un aspetto diverso su ogni sistema operativo.

Concetti correlati