Parti da un'immagine quadrata semplice
Usa un semplice marchio del logo, non un'immagine dettagliata, perché verrà mostrato molto piccolo. L'icona di una scheda è larga solo 16 pixel su molti schermi, quindi linee sottili e testo piccolo spariscono. Un'immagine quadrata di almeno 512 per 512 pixel dà i risultati migliori, perché può essere ridotta in modo pulito a tutte le altre dimensioni.
Se il tuo logo non è quadrato, ritaglialo nella parte che funziona meglio da sola, come una singola lettera o un simbolo. Di solito è meglio mostrare chiaramente un pezzo piccolo che l'intero logo in modo scadente. Uno sfondo trasparente va bene nella maggior parte dei casi, ma un colore pieno può aiutare sulle schede scure.
Di quali file hai bisogno
- favicon.ico con versioni da 16, 32 e 48 pixel per i browser più vecchi
- Icone PNG da 32 e 16 pixel
- apple-touch-icon.png da 180 per 180 per iPhone e iPad
- Icone PNG da 192 e 512 pixel per Android e per i manifest delle web app
Un manifest web è un piccolo file JSON che elenca le tue icone più grandi, in modo che i telefoni possano usarle quando un sito viene salvato nella schermata iniziale.
In alcune guide potresti trovare consigliate altre dimensioni. Il set qui sopra copre i casi comuni per le schede del browser, i segnalibri, le schermate iniziali di iOS e le installazioni su Android, ed è di solito sufficiente per un normale sito web.
Aggiungi l'HTML
Metti i file nella radice del sito e aggiungi nell'head delle pagine i tag link che puntano a essi. Un generatore può darti i tag esatti da incollare. Aggiungi il manifest con un altro tag link. Se sposti i file in una cartella, aggiorna di conseguenza i percorsi nei tag.
Un tipico set di tag indica il file ico, i due PNG piccoli, l'apple-touch-icon e il manifest. Incollali una sola volta nell'intestazione condivisa del sito invece che in ogni pagina a mano, così tutte le pagine restano coerenti.
Consigli di design
Lascia un po' di margine interno in modo che le maschere rotonde non taglino i bordi, perché alcuni telefoni ritagliano le icone in cerchi o quadrati arrotondati. Usa un contrasto forte e una forma semplice. Controlla l'icona sia con i temi chiari sia con quelli scuri del browser, perché un logo scuro su sfondo trasparente può scomparire su una barra delle schede scura.
Prova una bozza guardandola a 16 pixel sul tuo schermo. Se a quella dimensione non riesci a capire cos'è, semplifica la forma, togli i dettagli fini e ispessisci le linee.
Un esempio pratico (illustrativo)
Supponi che il tuo sito sia una piccola panetteria e che il logo sia una spiga di grano con il nome del negozio sotto. A 16 pixel il nome è illeggibile. Ritaglia solo la spiga, mettila su uno sfondo pieno dai toni caldi con un po' di margine ed esporta un quadrato di 512 per 512. Da questa sola sorgente puoi produrre tutte le dimensioni dell'elenco qui sopra.
Se il primo tentativo appare confuso a 16 pixel, prova un contorno più marcato o meno colori ed esporta di nuovo. Due o tre tentativi sono normali.
Procedura passo dopo passo
- Scegli o disegna un marchio semplice e ritaglialo in un quadrato
- Aggiungi margine interno e, se serve, uno sfondo pieno
- Genera il set completo di dimensioni dell'icona dalla sorgente grande
- Carica i file nella radice del sito
- Incolla i tag link nell'head delle pagine
- Ricarica e prova in una scheda del browser, e svuota la cache se resta la vecchia icona
Errori comuni
- Usare un logo largo con del testo, che diventa una minuscola macchia
- Partire da un'immagine piccola e ingrandirla
- Dimenticare il margine interno, così i bordi vengono tagliati sui telefoni
- Lasciare vecchi tag link che puntano a file mancanti
- Aspettarsi che la modifica appaia subito, quando i browser spesso conservano le favicon in cache per un po'
Lista di controllo rapida
- Sorgente quadrata di 512 pixel o più
- favicon.ico più PNG da 16 e 32 pixel
- apple-touch-icon da 180 pixel
- Icone da 192 e 512 pixel e un manifest
- Tag link aggiunti a ogni modello di pagina
Farlo con DoneImg nel tuo browser
Apri il generatore di favicon e aggiungi la tua immagine quadrata. Crea il favicon.ico con le dimensioni da 16, 32 e 48 pixel, i PNG da 16 e 32 pixel, l'apple-touch-icon da 180 pixel, i PNG da 192 e 512 pixel, un manifest web e uno snippet HTML, tutto insieme in un unico file ZIP.
Tutto viene creato nel tuo browser, quindi il logo non viene caricato da nessuna parte. Decomprimi i file nella radice del sito, incolla lo snippet nell'head della pagina e prova il risultato in una scheda.