Quali dimensioni di favicon servono nel 2026? Il set ideale

Nel 2026 il set di favicon ideale è composto da: un favicon.ico che contiene immagini da 16, 32 e 48 px, un PNG 96x96 (per Google Search), una favicon SVG facoltativa, un apple-touch-icon.png 180x180 e dei PNG 192x192 e 512x512 (più un 512 maskable) dichiarati in un web app manifest. Le tile di Windows e le vecchie dimensioni Apple servono solo se devi supportare dispositivi molto datati. Qui sotto trovi il perché, con una tabella delle dimensioni, HTML pronto all'uso e gli errori più comuni da evitare.

Il panorama delle favicon era un tempo caotico: ogni browser e sistema operativo richiedeva una propria dimensione, con il risultato di blocchi <head> di 20 righe. Oggi gran parte di tutto ciò è obsoleta. I browser moderni scalano un'unica icona fatta bene, iOS vuole una sola dimensione e Android legge il manifest. Questo articolo separa ciò che serve davvero da ciò che è solo utile avere.

La risposta breve: il set ideale di file favicon

• favicon.ico (16, 32, 48 px in un unico file) nella root del sito. Browser, feed reader e molti strumenti richiedono ancora automaticamente /favicon.ico.
• favicon.svg (facoltativo ma consigliato) per un rendering nitido a qualsiasi dimensione e il supporto alla modalità scura.
• PNG 16x16, 32x32 e 96x96 come fallback espliciti. La versione da 96 px aiuta Google Search, che richiede un multiplo di 48 px.
• apple-touch-icon.png a 180x180, opaco, senza trasparenza.
• PNG 192x192 e 512x512 in manifest.json, più un'icona maskable 512x512 per Android.
• Meta tag theme-color per colorare l'interfaccia del browser su mobile.
• Tile di Windows (70, 150, 310 px) con browserconfig.xml solo per Windows datato e per i siti aggiunti in evidenza su IE11.

Tabella delle dimensioni delle favicon: scopo, nomi dei file e priorità

Usa questa tabella come checklist. "Obbligatorio" significa che un normale sito apparirà rotto o incompleto senza quel file; "Consigliato" indica un chiaro miglioramento della qualità; "Opzionale" indica un uso di nicchia o legacy.

favicon.ico: 16, 32 e 48 px in un unico file

Un file ICO è un contenitore che racchiude più bitmap. Un buon favicon.ico include immagini 16x16, 32x32 e 48x48 in modo che il browser o il sistema operativo possa scegliere quella più vicina. Posizionalo nella root del dominio (https://example.com/favicon.ico). Anche se il tuo HTML punta altrove, molti crawler, lettori RSS e browser meno recenti richiedono comunque proprio quell'URL, quindi averlo evita errori 404 nei log.

Non limitarti a rinominare un PNG in .ico. La maggior parte dei browser lo tollera, ma alcuni strumenti lo rifiutano e perdi il vantaggio della multirisoluzione. Esporta un vero file ICO.

Favicon PNG: 16, 32 e 96 px

I link PNG con sizes esplicito permettono al browser di scegliere la bitmap migliore senza analizzare l'ICO. In pratica il 32x32 copre le schede ad alta densità, mentre il 16x16 oggi è quasi ridondante. Vale la pena aggiungere la dimensione 96x96 perché Google Search mostra le favicon accanto ai risultati e richiede un'icona quadrata la cui dimensione sia un multiplo di 48 px (48x48, 96x96, 144x144 e così via). Un file da 96 px offre a Google una sorgente più nitida rispetto a uno da 48 px quando riduce l'immagine per i risultati mobile.

Consiglio di design: a 16 px i dettagli sottili scompaiono. Usa una forma semplice e decisa, alto contrasto e poco o nessun testo. Puoi ritoccare e visualizzare in anteprima la tua icona nell'editor di MakeFav prima di esportarla.

Favicon SVG e modalità scura

Una favicon SVG è un unico file minuscolo che resta nitido a qualsiasi densità di schermo. È supportata dai browser basati su Chromium e da Firefox. Il supporto di Safari è stato storicamente limitato, quindi non affidarti mai solo all'SVG: mantieni i fallback ICO e PNG.

Il vantaggio maggiore è la possibilità di adattare il tema. Poiché un SVG può contenere CSS, puoi adattare l'icona allo schema di colori dell'utente con prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Tieni presente che la media query riflette il tema del browser o del sistema operativo, che è quello usato dalla barra delle schede. Non segue un eventuale selettore di tema presente sul tuo sito.

Una stranezza nota: quando sono elencati sia un ICO sia un SVG, Chrome può scegliere l'ICO. Dichiarando l'ICO con sizes="32x32" ed elencando l'SVG subito dopo, Chrome preferisce l'SVG, come mostrato nel codice qui sotto.

Apple touch icon: 180x180 e le dimensioni legacy

Quando un utente aggiunge il tuo sito alla schermata Home di iOS o iPadOS, Safari usa la apple-touch-icon. Oggi basta un singolo PNG da 180x180 px: iOS lo riduce per i dispositivi meno recenti e per gli iPad. Chiamalo apple-touch-icon.png e mettilo nella root; iOS cerca persino quel file per impostazione predefinita se non esiste alcun tag link.

Regole per l'icona Apple:

• Nessuna trasparenza. iOS riempie di nero i pixel trasparenti, quindi un logo trasparente spesso diventa una macchia nera. Aggiungi un colore di sfondo pieno.
• Nessun angolo arrotondato. iOS applica la propria maschera arrotondata. Fornisci un quadrato pieno.
• Tieni i contenuti chiave lontani dai bordi, poiché gli angoli vengono tagliati.

Quando servono le dimensioni legacy (57, 72, 76, 114, 120, 144, 152, 167)? Solo se supporti iOS 6 o versioni precedenti, oppure se vuoi un controllo esatto dei pixel per dispositivo per iPad Pro (167 px) e iPad (152 px). Per quasi tutti i siti nel 2026, il solo file 180x180 è sufficiente. La configurazione a massima compatibilità qui sotto ne include alcune per completezza.

Icone Android e PWA: 192, 512 e maskable

Chrome su Android e gli altri browser compatibili con le PWA leggono le icone dal web app manifest, non da <link rel="icon">. Per l'installabilità servono almeno un PNG 192x192 e uno 512x512. L'icona da 192 px viene usata nella schermata Home e nel launcher delle app; quella da 512 px compare negli splash screen e nelle finestre di installazione.

Icone maskable e zona sicura

Le icone adattive di Android possono essere ritagliate a cerchio, squircle o altra forma a seconda del dispositivo. Un'icona maskable è progettata per essere ritagliata in sicurezza: il contenuto importante deve stare dentro la zona sicura, un cerchio centrato con diametro pari all'80% dell'immagine (il raggio equivale al 40% del lato). Per un file 512x512 significa mantenere il logo entro un cerchio di circa 410 px di diametro ed estendere il colore di sfondo a tutti e quattro i bordi, così che dopo la mascheratura non restino vuoti.

Dichiara l'icona maskable come voce a sé stante con "purpose": "maskable". Evita "any maskable" su un solo file: il margine necessario alla mascheratura appare troppo piccolo quando l'icona viene mostrata senza maschera.

Esempio di manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Servi il file come application/manifest+json (o application/json) e collegalo da ogni pagina con <link rel="manifest" href="/manifest.json">. Alcuni progetti lo chiamano site.webmanifest; il nome non conta, conta il link.

Tile di Windows e browserconfig.xml

Windows 8.1 e 10 permettono agli utenti di aggiungere un sito al menu Start, e IE11 ed Edge legacy leggono le immagini delle tile da browserconfig.xml. Le dimensioni abituali sono 70x70 (piccola), 150x150 (media), 310x150 (larga) e 310x310 (grande). Edge basato su Chromium usa invece il manifest e le favicon normali, quindi si tratta di una funzione legacy. Includila solo se il tuo pubblico comprende ancora configurazioni Windows datate, per esempio in ambienti aziendali.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: colorare l'interfaccia del browser

Il meta tag theme-color indica ai browser mobile (e ad alcuni desktop) quale colore usare per la barra degli indirizzi o la barra del titolo. Non è una favicon, ma fa parte dello stesso insieme di elementi di branding. Puoi fornire valori distinti per la modalità chiara e scura:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Configurazione moderna minima o massima compatibilità

Configurazione moderna minima (consigliata per la maggior parte dei siti)

Cinque file coprono oltre il 99% dei casi d'uso reali: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) e le due icone del manifest (192 e 512). Aggiungi il PNG 96x96 se la visibilità su Google Search è importante, e un'icona maskable se pubblichi una PWA.

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

Configurazione a massima compatibilità

Scegli questa soluzione quando ti rivolgi a un pubblico ampio o aziendale, o quando vuoi coprire ogni client possibile. Aggiunge dimensioni PNG esplicite, dimensioni Apple legacy, tile di Windows e colori del tema.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Nota i percorsi relativi alla root che iniziano con /. Funzionano a qualsiasi profondità di pagina, il che ci porta agli errori più comuni.

Errori comuni con le favicon e come correggerli

1. Percorsi sbagliati

Un link come href="favicon.ico" viene risolto rispetto all'URL corrente, quindi funziona su / ma si rompe su /blog/post/. Usa URL relativi alla root (/favicon.ico) o assoluti. Verifica inoltre che i file esistano davvero: apri ogni URL direttamente nel browser e controlla che restituisca HTTP 200, non un reindirizzamento a una pagina 404 o a una pagina di login.

2. Attributo sizes mancante o errato

Senza sizes, i browser devono scaricare le icone per ispezionarle e possono scegliere quella sbagliata. Dichiara sempre sizes sui link PNG e assicurati che corrisponda alle dimensioni reali in pixel. Un file etichettato 32x32 che in realtà è 64x64 produce risultati incoerenti.

3. Cache aggressiva

I browser mettono in cache le favicon per molto tempo, spesso indipendentemente dalla cache della pagina. Dopo un rebranding la vecchia icona può restare visibile per giorni. Cambia il nome del file o aggiungi una query string di versione (/favicon.ico?v=2) e aggiorna i tag link. I ricaricamenti forzati spesso non aggiornano l'icona della scheda; aprire direttamente l'URL dell'icona e ricaricarlo di solito funziona.

4. Immagini non quadrate

Le favicon devono essere quadrate. Un logo rettangolare viene stirato, ritagliato o incorniciato con bande in modo imprevedibile. Progetta un marchio quadrato dedicato, come un'iniziale o un simbolo, invece di rimpicciolire un logotipo largo.

5. Apple touch icon trasparenti che diventano nere

iOS riempie di nero la trasparenza. Dai all'icona 180x180 uno sfondo opaco e non arrotondare in anticipo gli angoli.

6. Icone maskable senza zona sicura

Se il logo tocca i bordi di un'icona maskable, Android lo taglierà. Mantienilo dentro il cerchio centrale dell'80% e riempi l'intera tela con il colore di sfondo.

7. Bloccare le icone ai crawler

Se robots.txt vieta il percorso della tua favicon, Google non può recuperarla e mostrerà un'icona generica a forma di globo nei risultati di ricerca. Ricorda anche che Google richiede la favicon sullo stesso host della pagina e la aggiorna solo di tanto in tanto, quindi le modifiche possono impiegare giorni o settimane per comparire.

8. Dimenticare il link al manifest o le finalità delle icone

Un manifest non collegato, o privo di icone da 192 e 512 px, impedisce la richiesta di installazione in Chrome. Convalidalo negli strumenti per sviluppatori del browser, nella scheda Application.

Genera l'intero set con un clic

Creare una dozzina di file a mano in un editor di immagini, poi convertirli in ICO e scrivere il manifest, è noioso e soggetto a errori. MakeFav genera tutti i file sopra elencati partendo da una sola immagine, testo o emoji: favicon.ico multidimensione, PNG, SVG, Apple touch icon, PNG 192/512, un'icona maskable, tile di Windows, manifest.json e browserconfig.xml, oltre a uno snippet HTML pronto da incollare, tutto in un unico download ZIP. Puoi perfezionare sfondo, margini e forma nell'editor, verificare un sito esistente con il controllo favicon e automatizzare la generazione tramite le risorse per sviluppatori.

Checklist di pubblicazione

1. Carica tutti i file nella root del tuo sito.
2. Incolla lo snippet HTML nel <head> di ogni pagina (o nel layout condiviso).
3. Assicurati che i percorsi siano relativi alla root e restituiscano HTTP 200.
4. Controlla la modalità chiara e scura, un'installazione nella schermata Home di iOS e un'installazione su Android.
5. Esegui il controllo per individuare dimensioni mancanti o non corrispondenti.
6. Aggira la cache con una stringa di versione se hai sostituito una vecchia icona.

Domande frequenti

Serve ancora il favicon.ico nel 2026?

Sì. Anche se i browser moderni accettano PNG e SVG, molti crawler, feed reader, client di posta e browser meno recenti richiedono ancora direttamente /favicon.ico. Un ICO multidimensione con immagini da 16, 32 e 48 px è un file piccolo che evita icone mancanti ed errori 404.

Che dimensione deve avere una favicon per Google Search?

Google richiede una favicon quadrata la cui dimensione sia un multiplo di 48 px, almeno 48x48. Un PNG 96x96 è una scelta sicura, e anche l'SVG è supportato. Google ha inoltre bisogno che il file sia scansionabile, quindi non bloccarlo in robots.txt. Gli aggiornamenti possono richiedere giorni o settimane per comparire.

180x180 basta per l'Apple touch icon?

Per quasi tutti i siti, sì. iOS e iPadOS riducono un PNG 180x180 per ogni dispositivo attuale. Le dimensioni più vecchie (da 57 a 152 px) contano solo per versioni di iOS molto datate. Ricorda di usare uno sfondo opaco in modo che l'icona non diventi nera.

Che cos'è un'icona maskable e mi serve?

Un'icona maskable è un PNG 512x512 progettato per le forme delle icone adattive di Android. Il contenuto importante sta dentro un cerchio centrale con diametro pari all'80%, e lo sfondo riempie l'intero quadrato. Ti serve solo se offri una PWA installabile, ma fa apparire l'icona nativa invece di inserirla in un cerchio bianco.

Perché la mia vecchia favicon compare ancora dopo che l'ho cambiata?

I browser mettono in cache le favicon separatamente e per molto tempo. Rinomina il file o aggiungi una query string di versione come ?v=2, aggiorna i tag link, quindi apri direttamente l'URL dell'icona e ricaricalo. I motori di ricerca possono impiegare più tempo ad aggiornare la propria copia.