Sappiamo tutti cos’è una favicon, vero?
Wikipedia: Favicon è un termine inglese, contrazione di favorites icon. In informatica indica un’icona associata a una particolare pagina web. Solitamente la favicon è una piccola immagine, spesso un logo, pertinente ai contenuti del sito web correlato.
Ma sappiamo tutti come crearla affinché sia “perfettamente compatibile” con tutti i dispositivi (mobile compresi)? … Scommetto di no!
Molti, infatti, si limitano a creare un’icona 16×16 e piazzarla nella root del proprio sito, senza nemmeno inserire i metatag, lasciando al browser il compito di cercarla e mostrarla (cosa non sempre garantita).
Altri, invece, inseriscono il file corretto con tanto di metatag, cercando così di garantire almeno la compatibilità con i browser più usati.
Ma cosa fare se vogliamo che la nostra favicon venga mostrata anche sui mobile, su tablet, su tutti i browser, senza aver mai alcun problema?
Beh, possiamo andare a cercare tutti gli standard per ogni potenziale dispositivo, e quindi creare l’immagine del formato corretto, e inserire l’apposito metatag… ma, ne vale la pena?
Na… meglio usare un tool che faccia tutto per noi con pochi e semplici click, non trovate? 🙂
Io ho fatto così!
Sono andato su: http://realfavicongenerator.net/
Ho inserito un’immagine da 260px (generata facilmente con firebug sfruttando il globo e il suo colore, quindi portandolo a cca 300px):
<i class="fa fa-globe" style="color:rgba(138, 192, 50, 0.9); font-size: 300px; background-color: white; padding: 10px"></i>
Risultato:
Ritagliata, data in pasto a gimp per farla diventare trasparente e da 260px; ho dunque ottenuto un’immagine in png rappresentativa del mio sito.
Fatto ciò sono andato su realfavicongenerator.net
…
Ho cliccato su: Select your Favicon picture
E quindi ho impostato il tutto come desiderato (scegliendo accuratamente i colori del tema e le dimensioni delle icone – anche per Windows 8 e 10, in “Other platforms, lì che il tab è secondario e potrebbe sfuggire):
Dopo aver ricontrollato più volte il tutto, e certo di aver configurato ogni dettaglio, ho cliccato su “Generate your favicon and HTML code“.
Questo il codice html ottenuto (da inserire nell’header del sito web):
Questi, invece, i file scaricati
da inserire nella root del proprio sito (Favicon package):
Come sapere se tutto è stato fatto correttamente?
Ecco, c’è anche il test 😀
Questo è tutto!
Adesso ho una favicon compatibile con tutti i dispositivi, e che genera le anteprime anche sui mobile.
Inoltre, così facendo, mi risparmio tanti errori 404 su browserconfig.xml, manifest.json, e gli altri file che vengono richiesti, ad esempio, dai dispositivi apple (apple-touch-icon).
PS: il sito rilascia metatag href=”/nomefile.png” …
Io ho modificato i miei aggiungendo l’url completo (stessa cosa nel file json e xml).
Questo perché inserisco i meta nel template, quindi su tutto il sito, e quindi sarebbero stati riferimenti non validi negli url secondari (eg: forum; directory; citazioni ecc).
Il tutto è stato fatto con pochi click grazie a notepad++
Ok, adesso è davvero tutto!
Spero possa tornarvi utile.