Indice dei contenuti
Con il termine Favicon, crasi di Favorite Icon (icona dei preferiti), si intende la icona di 16x16 pixel convenzionalmente associata a una pagina web. Nella quasi totalità dei browser la favicon viene visualizzata nella parte sinistra della barra degli indirizzi e compare nel momento in cui si naviga su un sito che ne è provvisto. Viene inoltre visualizzata nella tab di navigazione attiva, nel menu e nella barra dei preferiti.
A cosa serve
L'utilità della favicon non è meramente estetica: consente all'utente di riconoscere il sito web con maggiore immediatezza, soprattutto quando si ha un elenco dei preferiti molto vasto o numerose tab aperte contemporaneamente. Dotare il proprio sito di una favicon sufficientemente distintiva può inoltre aiutare ad instaurare un rapporto più stretto con l'utente, che tenderà ad abituarsi a essa; conferisce inoltre alle pagine del sito un livello di personalizzazione maggiore e un aspetto più professionale.
Come realizzarla
Aggiungere una favicon al proprio sito è una operazione che consta di due passaggi fondamentali: scegliere l'immagine giusta e installarla sul proprio sito web. Vediamo come realizzarli entrambi.
Scegliere l'immagine giusta
Se volete che la vostra favicon sia visivamente efficace, la scelta dell'immagine è fondamentale. Questi i consigli più importanti da tenere presente:
- Evitate come la peste fotografie, disegni eccessivamente elaborati o immagini complesse: dovete sempre tenere presente che stiamo parlando di una icona di 16x16 pixel. che deve quindi poter funzionare a risoluzioni estremamente contenute. Al contrario, le favicon che funzionano meglio sono solitamente molto semplici: lettere, numeri, composizioni formate da sagome basilari. Se il vostro sito ha già un logo, provate a utilizzare quello: se vi sembra troppo complesso, provate a realizzare una versione semplificata o a utilizzare la prima lettera, magari personalizzata con il "vostro" font e/o colorata con i "vostri" colori.
- Limitate la scelta dei colori e delle sfumature: lo spazio a vostra disposizione non vi consente derive cromatiche eccessive. La maggior parte delle Favicon che funzionano non contano più di tre o quattro colori al loro interno.
- Puntate sulla chiarezza e sulla leggibilità, anche a discapito dell'estetica: ricordate sempre che la vostra favicon deve servire ad orientare l'utente, non a sorprenderlo. L'obiettivo primario è quello di essere riconoscibili, quindi assicuratevi che la lettera e/o il simbolo su cui state puntando sia comprensibile e sufficientemente chiaro.
Il consiglio più importante è però sempre il solito: prendete spunto da chi è venuto prima di voi. Date un'occhiata - senza copiare, possibilmente! - a quanto proposto dagli altri siti web. Non limitatevi a siti simili al vostro: prendete in esame i social network, i siti delle vostre app preferite e quelli di qualsiasi attività commerciale che abbia investito qualche dollaro in comunicazione integrata... E' lì che potrete farvi un'idea di ciò che va per la maggiore, nonché di quanto è possibile fare in sedici pixel. Qualche esempio:
Realizzare la favicon
La favicon, come detto in precedenza, non è altro che una immagine 16x16 pixel. Realizzarla manualmente è piuttosto semplice, tutto quello che dovete fare è creare la vostra immagine con un software di grafica raster come Gimp (open-source) o Adobe Photoshop (commerciale) e salvarla in formato .ico con dimensioni pari a 16x16 pixel.
Negli ultimi anni, conseguentemente all'affermarsi della nuova generazione di browser, dispositivi mobili e web app, hanno cominciato a diffondersi una pluralità di favicon aventi formati diversi, più o meno elaborati a seconda del client di riferimento. Questa una lista non esaustiva dei formati di favicon ad oggi più diffusi:
|
1 |
16x16, 32x32, 57x57, 60x60, 72x72, 76x76, 96x96, 114x114, 120x120, 144x144, 152x152, 180x180, 192x192 |
Alcuni di questi formati cominciano ad essere utilizzati, se presenti, anche da alcuni browser web. Poiché realizzarli manualmente è piuttosto oneroso, nel caso in cui vogliate intraprendere questa strada è consigliabile utilizzare uno dei numerosi strumenti disponibili sul web che consentono di creare l'intero package di favicon automaticamente: i più famosi sono www.favicon-generator.org e favicon.cc, entrambi gratuiti (e consigliatissimi). Inutile dire che questa scelta è ideale anche per chi non abbia particolare dimestichezza con i programmi di grafica raster sopra indicati.
Attualmente il mio preferito, qualitativamente parlando, è realfavicongenerator.net, che dà la possibilità di generare favicon che si adattano ottimamente alle GUI dei vari dispositivi.
Installare la favicon sul proprio sito web
Una volta creata, l'ultimo passaggio da effettuare è installare la favicon sul proprio sito web. La procedura, inutile dirlo, varia considerevolmente a seconda della tipologia di sito.
WordPress
Se volete ricorrere a un plugin, non posso che consigliare l'ottimo Favicon by RealFaviconGenerator, realizzato dallo staff dell'ottimo generatore di favicon sopra indicato. Esistono comunque molti altri siti che offrono gratuitamente questo servizio, tra cui:
Se invece preferite operare manualmente, è sufficiente aggiungere la seguente action al proprio file functions.php mediante il pannello di amministrazione di WordPress (Aspetto -> Editor -> functions.php):
|
1 2 3 4 |
function wp_add_favicon() { echo '<link rel="shortcut icon" href="'.bloginfo('stylesheet_directory').'/images/favicon.ico" type="image/x-icon" />'; add_action('wp_head', 'wp_add_favicon'); } |
Contestualmente a questa modifica, copiate tramite FTP l'immagine relativa alla vostra favicon 16x16 anella cartella /images/ del vostro tema.
Sito web generico
Aprite il file .html relativo alla pagina in cui volete inserire la favicon o, nel caso in cui il vostro sito faccia uso di un template html utilizzato per la generazione di tutte le pagine (phpBB, Joomla, Drupal, la maggior parte dei Content-Management-System, etc.), il template suddetto. Aggiungete quindi il seguente codice HTML all'interno del blocco <head> :
|
1 |
<link rel="shortcut icon" href="/path/to/favicon-16x16.ico" type="image/x-icon" /> |
Abbiate cura di sostituire /path/to/favicon-16x16.png con il percorso e nome file relativo alla vostra favicon 16x16.
IMPORTANTE: Se la favicon non viene visualizzata immediatamente, ricordate di cancellare la cache del vostro browser, del vostro reverse-proxy (se lo utilizzate), di WordPress ovvero del vostro sito web.
Felice sviluppo!
