Il miglior modo per creare una favicon? Real Favicon Generator

Il miglior modo per creare una favicon? Real Favicon Generator

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:

logo

Ritagliata, data in pasto a gimp per farla diventare trasparente e da 260px; ho dunque ottenuto un’immagine in png rappresentativa del mio sito.

favicon

Fatto ciò sono andato su realfavicongenerator.net

Ho cliccato su: Select your Favicon picture

favicon_select

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):

realfavicongenerator_net

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):

metatag

Questi, invece, i file scaricati

da inserire nella root del proprio sito (Favicon package):

favicon_archivio

Come sapere se tutto è stato fatto correttamente?

favicon_check

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.




Lascia un commento