Hai già un logo. Ciò che ti serve è quel logo trasformato nel mucchio di minuscoli file icona che un browser si aspetta — un favicon.ico, una manciata di PNG a dimensioni specifiche, un web manifest e l'HTML per collegare il tutto. Quella conversione è meccanica, e puoi farla in circa un minuto senza installare nulla.
L'intoppo è che non ogni logo si riduce con grazia. Quindi questa guida copre sia il percorso rapido sia come sistemare un logo che si trasforma in poltiglia a 16 pixel.
La versione breve
- Prendi il tuo logo come immagine quadrata — idealmente 512×512 o più grande, su sfondo trasparente o pieno.
- Trascinalo nel Generatore di favicon.
- Scarica il set generato e metti i file nella radice del tuo sito.
- Incolla lo snippet HTML fornito nel tuo
<head>.
È tutto il lavoro. Il generatore produce favicon.ico, i PNG a 16, 32, 48, 180, 192 e 512, un webmanifest e gli esatti tag <link> — così non ritagli a mano sei immagini né indovini la sintassi del manifest.
Prepara prima il tuo logo — è qui che la qualità si vince o si perde
Una favicon vive a 16×16 nella scheda del browser. Qualunque dettaglio non possa sopravvivere a quella dimensione è sprecato. Passa due minuti qui e il risultato appare nitido ovunque.
Rendilo quadrato. Le favicon sono quadrate. Un logo largo e orizzontale verrà messo in letterbox o schiacciato. Ritaglia sull'elemento più riconoscibile — di solito il simbolo o una singola iniziale — e centralo in un riquadro quadrato.
Elimina il marchio testuale. Il nome della tua azienda per intero non sarà leggibile a dimensione scheda. "Acme Corporation" diventa una macchia grigia. Mantieni il simbolo, o una singola lettera, e lascia che il titolo della scheda porti il nome.
Controlla il contrasto su entrambi i temi. Le schede del browser sono chiare e scure. Un'icona blu scuro sparisce su una scheda scura; un'icona pallida sparisce su una chiara. Se il tuo marchio è di un solo colore piatto, assicurati che quel colore si legga su entrambi. Un contorno discreto o un piccolo riquadro di sfondo pieno possono aiutare.
Lascia spazio per respirare. Aggiungi un po' di margine dentro il quadrato così l'icona non si schiaccia contro i bordi. Apparirà più bilanciata in ogni slot.
Parti grande. Una sorgente 512×512 (o più grande) dà al generatore dettaglio pulito da cui ridurre. Ingrandire prima un logo minuscolo incorpora semplicemente la sfocatura.
Sfondo trasparente o pieno?
Entrambi funzionano — dipende dall'aspetto che vuoi.
- Trasparente lascia trasparire lo sfondo della scheda o della schermata home. Pulito e moderno, e si adatta all'ambiente chiaro/scuro. Migliore quando il tuo marchio è una forma distinta.
- Riquadro di sfondo pieno (un quadrato arrotondato colorato dietro il marchio) garantisce che l'icona si legga qualunque cosa ci sia dietro. È ciò che fanno la maggior parte delle icone di app, ed è la scelta più sicura se il tuo logo è sottile o a basso contrasto.
Nel dubbio, un riquadro pieno nel colore del tuo marchio è l'opzione robusta — non sparisce mai in uno sfondo corrispondente.
Dopo il download: dove vanno i file
Il generatore ti consegna un set di file e uno snippet. Due regole di posizionamento lo coprono:
favicon.icova alla radice del tuo sito (/favicon.ico). I browser e Windows lo cercano lì per nome anche senza un tag<link>.- Tutto il resto può stare dove vuoi purché i percorsi nello snippet HTML corrispondano. La maggior parte delle persone li mette tutti alla radice e incolla lo snippet così com'è.
Poi è solo lo snippet del <head> — i link delle icone, l'apple-touch-icon e il riferimento al manifest. Incolla, distribuisci, aggiorna forzando, e dovresti vedere il tuo logo nella scheda.
Perché farlo nel browser?
Perché il tuo logo non lascia mai la tua macchina. L'intero processo — leggere l'immagine, ridimensionare a ogni dimensione, impacchettare l'.ico, scrivere il manifest — avviene localmente nel tuo browser usando Canvas. Nulla viene caricato su un server, non c'è registrazione né filigrana, e dopo la prima visita lo strumento funziona offline. Per una risorsa di brand che potresti non aver ancora pubblicato, tenerla fuori dai server di terze parti è l'impostazione predefinita sensata.
Una volta che il tuo logo è quadrato, ad alto contrasto e leggibile in piccolo, generare il set completo è la parte facile.