Cos’è e a cosa serve la favicon, come si inserisce sul sito

Perché è così importante mettere una favicon sul proprio sito? Un dettaglio così semplice può fare la differenza? Scopriamolo insieme con questa guida per gestire tutto.

10

La favicon è un elemento che completa la presentazione del tuo brand sul web. Si tratta di un’icona molto piccola che accompagna il tuo sito web in diverse situazioni.

favicon html
Mettere la favicon nell’HTML.

Di solito questo elemento grafico molto piccolo, tipico l’uso del logo, viene lasciato come ultima attività da svolgere. Non è una delle azioni decisive: meglio concentrarsi sull’ottimizzazione mobile del sito web e altri aspetti decisivi del design.

Un punto di vista comprensibile. Però la favicon è un piccolo file, con un formato specifico, che viene mostrato sul browser e nelle pagine di Google. Rappresenta il tuo brand in diverse occasioni. Questo è un buon modo per creare, non credi?

Cos’è la favicon: la definizione

È un file grafico che viene utilizzato dal sito web per mostrare la sua identità – quella del proprietario o autore del progetto – in diverse situazioni.

Il termine favicon deriva dalla fusione tra favorites e icon, traduzione di icona da usare per segnare i favoriti. Questo elemento, infatti, in passato veniva usato solo dal browser Explorer di Microsoft per riconoscere i siti web inseriti nella barra dei preferiti.

Da aiuto bookmark a elemento identificativo: l’evoluzione della favicon riguarda l’adozione da parte di tutti gli altri browser fino a diventare uno standard che viene inserito nell’head del sito web con attributo rel. Questo elemento contraddistingue la serp mobile di Google: viene mostrato nelle ricerche vicino agli snippet.

Da leggere: quali sono i meta tag di Google

Dove appare quest’icona grafica

Semplice, il primo luogo dove puoi ammirare questo dettaglio è la tab del browser. Vale a dire la linguetta della scheda. Se metti l’URL nei preferiti hai lo stesso risultato: basta un attimo per capire qual è l’identità dell’indirizzo salvato.

esempio di icona su pagina web
Ecco dove appare la favicon – Fonte Wikipedia

La favicon appare nella serp mobile di Google, diventando un elemento interessante in termini di aumento del CTR, proprio come per la meta description.

Questa icona viene mostrata anche su Google Discover, la sezione sullo smartphone che consente di estrapolare le notizie più interessanti per un determinato utente. 

A cosa serve la favicon del sito

La sua funzione principale permettere di riconoscere immediatamente il sito web. Che sia sula barra dei preferiti, nella serp o durante la navigazione non fa differenza

In un attimo io posso capire che quel link appartiene a un progetto che conosco bene. Per questo la favicon non deve essere sottovalutata: può essere uno strumento anche minore, ma comunque interessante per il tuo lavoro di brand building.

Dimensioni ed estensione del file

Prima di creare un’icona per rendere riconoscibile il progetto web devi ricordare che ci sono degli standard da rispettare. La favicon è una grafica con dimensioni precise. In particolar modo devi creare un file quadrato con dimensione 16×16 px.

Questa è la dimensione standard della favicon. Secondo lo standard Microsoft può essere anche 24×24, 32×32, 64×64 pixel in base alla situazione in cui si trova.

  • Barra indirizzi: 16×16.
  • Nuova tab: 32×32.
  • Barra del browser: 24×24.

Che tipo di file bisogna usare? Per fare in modo che sia visibile su tutti i browser, anche su Explorer, bisogna usare l’estensione ICO pensato per le piccole immagini.

Ma puoi applicare senza tanti problemi PNG e JPG. Però ricorda che tra le caratteristiche del file ICO è il multiformato: c’è anche la possibilità di far scegliere al software qual è la risoluzione migliore per una determinata situazione.

Come creare una favicon efficace

Per ottenere un file da inserire sul tuo sito web puoi seguire strade differenti. Prima devi scegliere il soggetto: cosa inserire come favicon? Io suggerisco di creare un logo e usare quello, altrimenti puoi puntare su foto personale o lettera iniziale.

uso del logo come favicon
Usa il logo nelle favicon.

Per creare un file utile puoi usare Photoshop per ridurre un’immagine in forma quadrata e con le dimensioni indicate. Poi le salvi in formato ICO e hai la tua favicon. Ecco, come trasformare un file di un qualsiasi altro formato, tipo JPG o PNG, in ICO?

Usa Favicon Generator online

Esatto, questa è una gran comodità: puoi usare diversi generatori di icone gratis che si trovano su internet. Tu carichi il file e te lo ritrovi con l’estensione che ti serve. Il funzionamento è semplice e ce ne sono tanti da provare. Io ti suggerisco:

Come funzionano? Semplice, carichi il file nelle dimensioni utili e converti il PNG o JPG in ICO. Molto interessante toolset.mrwebmaster.it che ti dà la possibilità di disegnare la favicon un pixel alla volta. In questo modo se non hai ancora una soluzione adatta al tuo sito web puoi risolvere il problema direttamente online.

Google può penalizzare le tue scelte?

Sì, dato che la favicon appare nei risultati di ricerca c’è la possibilità che Mountain View elimini il simbolo se riproduca elementi che possano violare le norme che trovi nelle linee guida ufficiali. Se l’icona viene bloccata appare il simbolo di default.

Come inserire una favicon sul sito

Per aggiungere questo file ci sono diverse soluzioni. Molti temi consentono di aggiungere l’icona con funzioni specifiche ma credo che sia giusto iniziare a indicare le procedure specifiche a prescindere dalle soluzioni individuali. Prima l’unica soluzione era l’inserimento del .ICO nella root del sito. Oggi ci sono strade diverse.

Aggiungere il file nell’editor WordPress

La soluzione comune: aggiungere una stringa di codice nella sezione head in modo manuale. Basta andare nell’editor di WordPress, pagina header.php, e prima della chiusura della sezione inserire questa stringa. Ecco un esempio chiaro.

<link rel="shortcut icon" href="<?php echo 
get_stylesheet_directory_uri(); ?>/favicon.ico" />

Ovviamente il file .ICO deve essere quello che hai caricato nella tua cartella. Se non hai la possibilità o non vuoi lavorare con il codice HTML puoi caricare e aggiungere la favicon al tuo sito in altro modo. Ecco qualche indicazione concreta su come fare.

Inserire l’icon con funzione WordPress

Le ultime versioni di questo CMS hanno una soluzione molto interessante. Se vai nell’area personalizza puoi caricare la favicon direttamente dal pannello di controllo, senza aprire alcun codice HTML. Basta andare in denominazione del sito e fare l’upload del file che hai creato.

cambia favicon wordpress
Personalizza la favicon su WordPress.

Come puoi ben vedere da questa sezione puoi cambiare tutto ciò che riguarda l’identità del sito, dal titolo al payoff. E poi, ovviamente, bastano pochi click per modificare o aggiungere per la prima volta la tua favicon con il relativo logo.

Plugin WordPress per inserire favicon

Esistono anche delle estensioni specifiche per aggiungere questo file. Onestamente, però, avendo la funzione nativa di WordPress a disposizione non vedo il motivo di aggiungere un plugin per inserire la favicon sul sito. Ti ricordo che un eccesso di estensioni può rallentare il sito web, quindi conviene evitare quelle inutili.

Favicon HTML: come aggiungerla su un sito statico

I metodi elencati sono quelli che riguardano il CMS WordPress. Per aggiungere la favicon a un qualsiasi sito web in HTML basta aggiungere questa stringa di codice nell’index.html.

<link rel="shortcut icon" href="http://tuosito.com/favicon.ico">

Secondo Google l’URL della favicon deve trovarsi nello stesso dominio della home page. Puoi usare un URL con percorso relativo o assoluto, non fa differenza.

Modificare e aggiornare la favicon

Nel momento in cui cambi la tua immagine ICO l’utente vede immediatamente la modifica. Google, invece, ha bisogno di tempo. Infatti deve scansionare di nuovo il tuo sito web per rendersi conto della modifica.

Conviene richiedere una verifica immediata del sito con strumento controllo URL o, meglio ancora se il sito ha molte pagine, un nuovo inserimento della sitemap.

Fav ed errore 404: come risolvere

Può capitare che si presentino degli errori 404 a causa proprio dell’assenza del file favicon. Il modo migliore per risolvere? Semplice, aggiungere questo file nei modi che ti ho suggerito. In questo modo eviti questo errore e dai una mano al tuo sito web.

Secondo te queste indicazioni sono chiare? Hai altre domande per affrontare il tema? Lascia i tuoi dubbi nei commenti, affrontiamo insieme questo argomento sempre importante per il tuo sito web.

10 COMMENTI

    • Hai ragione, sono quei dettagli che fanno la differenza. Posso aggiungere un passaggio e un consiglio? Dopo la favicon conviene aggiungere il gravatar!

    • Infatti, la favicon adesso da mobile fa la differenza. Comunicare subito il proprio brand, non è banale. E da non sottovalutare. Tu hai già inserito al favicon sul sito?

  1. Si, ho scelto l’immagine che vedi, che è anche il mio gravatar. E’ un po’ il marchio di fabbrica del mio personal branding.
    Colgo l’occasione per farti i complimenti per la grandissima qualità dei tuoi articoli, e per offrire sempre interessanti spunti di riflessione. Complimenti davvero.

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here