Controllo favicon
Una piccola immagine rappresenta il tuo sito nelle schede, nei segnalibri, sulle schermate home dei telefoni e nei risultati di ricerca, e ognuno di questi posti vuole un file diverso. Questo controllo scarica ogni icona che pubblichi e la misura.
Un logo, quattro richieste diverse
La parola “favicon” risale al 1999, quando Internet Explorer 5 cominciò a cercare un file chiamato favicon.ico per decorare il menu Preferiti. Quel quadratino di 16 pixel viene richiesto ancora oggi, ma adesso non è più solo. Il file scaricato dipende dal dispositivo che il visitatore ha in mano:
| Dove appare | File usato | Dimensione |
|---|---|---|
| Scheda del browser, segnalibri, cronologia | favicon.ico, oppure un PNG o un SVG dichiarato con rel="icon" | Da 16 a 48 px, o vettoriale |
| Schermata home di iPhone e iPad | rel="apple-touch-icon" | 180 × 180 px |
| Schermata home di Android, web app installata | Icone elencate nel web manifest | 192 e 512 px |
| Risultati Google da telefono | Il file rel="icon" | Un multiplo di 48 px, o vettoriale |
Quando manca il file giusto, ogni sistema ripiega su qualcosa di peggio. Ottieni il simbolo di una pagina bianca nella scheda, una minuscola schermata della tua pagina su iOS, una lettera in un cerchio grigio su Android, un mappamondo in Google.
Cosa viene scaricato e misurato
Il controllo legge l’HTML della pagina che gli indichi e raccoglie ogni <link> il cui rel è icon, apple-touch-icon o mask-icon, più il link manifest e le icone elencate in quel file. Poi aggiunge due indirizzi che i browser provano senza che nessuno glielo dica: /favicon.ico e /apple-touch-icon.png.
Vengono scaricati fino a 16 file. Non prendiamo per buono l’attributo sizes dichiarato. Un file ICO viene aperto per elencare le dimensioni che contiene, di un SVG si legge il viewBox e i file PNG o JPEG vengono misurati in pixel. Per l’icona Apple, gli angoli vengono campionati per cercare trasparenza. Un file che si rivela una pagina di errore HTML viene segnalato come tale, e con /favicon.ico questa sorpresa è frequente.
Come leggere la lista di controllo
- Favicon classica
- Passa con un file ICO, o un PNG da 16, 32 o 48 px. Fallisce quando non esiste niente del genere e riceve un avviso quando l’unica icona è un SVG, perché lettori di feed, browser più vecchi e molti strumenti chiedono
/favicon.icoe nient’altro. - Icona SVG
- Facoltativa. Un file vettoriale resta nitido a qualsiasi dimensione e può cambiare colori in modalità scura.
- Icona Apple
- Fallisce se assente. Avvisi: più piccola di 180 px, sfondo trasparente (iOS lo dipinge di nero), oppure un file presente all’indirizzo predefinito senza un tag nella pagina.
- Manifest
- Un avviso quando la pagina non ne collega nessuno. Se ne collega uno che non si carica o non è JSON valido, è un fallimento. Al suo interno, un’icona da 192 px mancante è un fallimento, una da 512 px mancante è un avviso e un’icona “maskable” mancante è una nota.
- Colore del tema
- Facoltativo.
<meta name="theme-color">colora la barra del browser su Android. - Dimensione accettata da Google
- Un avviso, a meno che un’icona quadrata misuri un multiplo di 48 px (48, 96, 144, 192) o sia un SVG.
Qualsiasi fallimento dà il verdetto “Incompleto”, qualsiasi avviso “Quasi”. Le simulazioni sopra la lista mostrano l’icona che ogni sistema sceglierebbe tra quelle che pubblichi.
Un set completo da un solo disegno
Parti da una versione quadrata del tuo logo, semplificata finché resta riconoscibile a 16 pixel. Esporta questi file:
favicon.icocon dentro immagini da 16, 32 e 48 px, messo nella radice del sito.icon.svg, se il tuo logo esiste in versione vettoriale.apple-touch-icon.png, 180 × 180, su sfondo pieno con un margine di circa 20 px. Gli angoli li arrotonda iOS.icon-192.pngeicon-512.pngper il manifest.icon-maskable-512.png, con il logo dentro l’80% centrale del quadrato, perché Android può ritagliare l’immagine a cerchio.
Poi dichiarali:
<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="/site.webmanifest">I risultati includono questo blocco e un site.webmanifest corrispondente, con il nome del tuo sito già inserito.
Il controllo ti dice che i file esistono e hanno le dimensioni giuste. Non può dirti se il disegno è leggibile a 16 px o se sta bene su una barra delle schede scura. Guarda le simulazioni, poi un telefono vero.
Domande frequenti
Che dimensione deve avere una favicon?
Ne servono diverse. Fornisci un favicon.ico con 16, 32 e 48 px, un PNG da 180 px per i dispositivi Apple e PNG da 192 e 512 px in un web manifest. Un’icona SVG può coprire da sola tutte le dimensioni delle schede nei browser attuali.
Perché Google mostra un mappamondo invece della mia favicon?
Google vuole un’icona quadrata che sia un multiplo di 48 px o un SVG, dichiarata con rel="icon" sulla home page e raggiungibile da Googlebot (non bloccata in robots.txt). Dopo la correzione, la nuova icona compare quando la home page viene scansionata di nuovo, il che può richiedere giorni o qualche settimana.
Serve ancora un file favicon.ico?
Sì. I browser accettano PNG e SVG, ma molti altri programmi chiedono direttamente /favicon.ico: lettori di feed, servizi di anteprima dei link, alcuni password manager e browser più vecchi. Senza, il tuo server registra anche un 404 per ognuna di quelle richieste.
Perché la mia icona ha lo sfondo nero su iPhone?
L’apple-touch-icon ha zone trasparenti e iOS riempie la trasparenza di nero. Esporta il PNG su uno sfondo opaco nel colore del tuo marchio.
Ho cambiato la favicon. Perché vedo ancora quella vecchia?
I browser tengono le favicon in cache più a lungo di quasi ogni altro file. Apri direttamente l’indirizzo dell’icona e ricaricalo, oppure aggiungi una versione al link, per esempio href="/favicon.ico?v=2". I motori di ricerca si aggiornano coi loro tempi.
Cos’è un’icona maskable?
Un’icona disegnata con un margine in più, così Android può ritagliarla a cerchio, a quadrato arrotondato o a qualsiasi altra forma senza tagliare il logo. La dichiari nel manifest con "purpose": "maskable". Senza, Android rimpicciolisce l’icona normale e la mette su un disco bianco.