Quali file favicon servono a un sito e con quali dimensioni

Un sito ha bisogno di un piccolo insieme di file icona, e la maggior parte delle scelte riguarda le dimensioni. Metti nella radice del sito un favicon.ico con immagini da 16, 32 e 48 pixel, per le schede del browser e per Windows. Aggiungi un'icona Apple touch da 180 pixel per la schermata Home di iPhone e iPad, e icone PNG da 192 e 512 pixel elencate in un manifest di app web. Il generatore di favicon crea tutte queste icone a partire da un solo logo e scrive le righe HTML da incollare nelle tue pagine.

I file e le loro dimensioni

Lo ZIP che scarica il generatore contiene tutti e sette i file. Il file favicon.ico è composto da tre immagini PNG, da 16, 32 e 48 pixel, conservate in un unico file. Ogni icona è lo stesso logo disegnato in scala più piccola. Il generatore parte da una versione di 512 pixel della tua immagine e da lì ricava ogni dimensione.

Le righe HTML

Il generatore scrive quattro righe per l'head delle tue pagine:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

La prima riga punta a favicon.ico e la dichiara di 48 per 48. La seconda indica il PNG da 32 pixel. La terza richiama l'icona Apple touch, e la quarta punta al manifest, dove sono elencate le icone da 192 e 512 pixel. Il PNG da 16 pixel è nello ZIP ma non in queste righe. I browser cercano comunque /favicon.ico da soli, quindi il file viene trovato anche se manca la prima riga. Mantieni i percorsi così come sono, a meno che i tuoi file non si trovino in un'altra cartella.

Perché le dimensioni piccole richiedono forme semplici

A 16 per 16 pixel un'icona ha 256 pixel in totale. Una icona da 48 pixel ne ha 2.304, e la sorgente da 512 pixel ne ha 262.144. Già a 16 pixel gran parte dei dettagli di un logo scompare, quindi una linea sottile o una parola piccola diventano una macchia. Usa un segno semplice, oppure una o due lettere con un forte contrasto.

L'opzione lettera accetta uno o due caratteri e li disegna grandi al centro dell'icona, riducendoli se sono troppo larghi. Le forme disponibili sono Quadrato, Arrotondato e Cerchio. L'anteprima mostra affiancati i risultati a 16, 32, 48, 180 e 512 pixel, e le schede chiara e scura, così puoi valutare le dimensioni piccole prima di scaricare. Le anteprime si aggiornano mentre cambi forma, margine o sfondo, quindi puoi provare ogni impostazione prima.

Margine, sfondo e icona Apple

Il margine ha tre impostazioni: Nessun margine, Piccolo e Grande. Piccolo lascia vuoto il 10 per cento dell'icona su ciascun lato, Grande il 20 per cento. In modalità immagine, Nessun margine ritaglia la foto al quadrato centrale, quindi le estremità di un logo largo vanno perse. Le impostazioni con margine, invece, inseriscono tutta l'immagine dentro il quadrato.

Le scelte di sfondo sono Trasparente, Bianco e Personalizzato, e Trasparente è il valore predefinito. L'icona Apple touch è sempre opaca. In modalità immagine, le sue zone trasparenti assumono lo sfondo scelto, oppure il bianco se lo sfondo è Trasparente. In modalità lettera assumono il colore di sfondo della lettera. Le zone trasparenti in un'icona Apple touch possono apparire nere su iPhone e iPad, quindi il generatore le riempie. Le altre dimensioni mantengono la trasparenza che hai scelto. Perché un PNG trasparente diventa nero spiega la causa.

Una favicon è quadrata, quindi un logo largo ha prima bisogno di una cornice quadrata. Il creatore di foto quadrate inserisce tutta l'immagine in una cornice 1:1, con bordo sfumato, bianco, nero o personalizzato, così non si perde nulla. Ridimensiona immagine imposta pixel esatti. Con Mantieni proporzioni attivo e entrambi i lati compilati, l'immagine entra nel riquadro senza deformarsi. Proporzioni delle foto spiegate illustra le forme più comuni.

Modifiche che richiedono tempo per vedersi

I browser conservano le favicon in una cache. Un file modificato allo stesso indirizzo può continuare a mostrare la vecchia icona per un po', quindi un normale aggiornamento spesso non basta. Apri direttamente l'indirizzo dell'icona per verificare che il nuovo file sia sul server, poi ricarica la pagina ignorando la cache. Se la vecchia icona compare ancora, dai al nuovo file un nome diverso e aggiorna il collegamento perché punti a quello.

Come farlo con fixmint

1. Scegli Immagine e trascina il logo nel riquadro, oppure scegli Lettera e digita uno o due caratteri.
2. Imposta Margine su Nessuno, Piccolo o Grande, e Sfondo su Trasparente, Bianco o Colore personalizzato.
3. Controlla le icone da 16, 32 e 48 px sulle schede chiara e scura, e le anteprime da 180 e 512 px.
4. Premi Scarica ZIP per tutti e sette i file, oppure Scarica favicon.ico per quel solo file.
5. Premi Copia HTML e incolla le righe di HTML per l'head nell'head di ogni pagina.

Casi limite

• La tua immagine resta sul tuo dispositivo. Il generatore crea le icone nel tuo browser e non carica nulla.
• Lettere di due caratteri. Due caratteri sono accettati e vengono disegnati più piccoli perché entrino entrambi, il che li rende più difficili da leggere a 16 pixel rispetto a una lettera singola.
• Nomi dei file. Mantieni i nomi che usa l'HTML, perché i collegamenti puntano a quelli.
• File non leggibili. Se un'immagine non può essere trasformata in icone, il generatore mostra il messaggio "Impossibile creare le icone da questo input. Prova con un'altra immagine." e svuota i risultati. Prova un file diverso, oppure salva di nuovo l'immagine in un formato comune.