Creare una favicon WordPress: la guida completa

Come creare una favicon in WordPress

Prima di scoprire come creare una favicon da inserire su WordPress, cerchiamo di capire che cos’è una favicon.

Una favicon è una piccola icona, comunemente di misura 16×16 pixel, visualizzata nella barra di indirizzo del browser a sinistra dell’URL.

Nella maggior parte dei casi, questa icona rappresenta il logo o il branding di un sito ed è il primo segno per il suo riconoscimento.

Non si tratta di un piccolo dettaglio, ma di un elemento importante per dare alla tua piattaforma una autorevolezza professionale.

Sapere creare una favicon accattivante riuscirà a dare un tono maggiore al brand del tuo sito web.

Creare una favicon per WordPress

Creare una favicon per WordPress

Realizzare una favicon non è difficile. Solitamente, si sceglie di usare il proprio logo.

Tieni presente però che, una volta applicata al tuo sito, l’immagine sarà molto piccola.

Se l’immagine è molto elaborata e i contrasti non sono abbastanza accentuati, non sarà molto visibile.

Innanzitutto, devi creare la tua immagine nelle dimensioni e nel formato appropriato.

Infatti, le dimensioni dovranno essere di 16×16 pixel e il suo formato deve essere .ico.

Procedi in questo modo: crea un’immagine quadrata, delle dimensioni che preferisci, e nel formato che preferisci.

Per esempio, i classici software di creazione di immagini ti permettono di creare file .png, .jpg ecc.

L’immagine dovrà essere molto semplice e con un buon contrasto, altrimenti, come dicevo, non sarà ben visibile una volta rimpicciolita.

Ora, ridimensiona l’immagine e portala a 16×16 px.

Benissimo, ora dobbiamo utilizzare un convertitore immagini in file ico.

Se fai una ricerca su Google, ne troverai a centinaia, tutti online e gratuiti, che ti permettono di creare un file ico in pochi secondi.

Ad esempio, IcoConverter, Favicon Generator, o anche Online Convert.

Converti il file e salvalo sul tuo PC con il nome favicon.ico.

Creare una favicon online

Creare una favicon online

Vorrei segnalarti un interessante strumento online per creare favicon.

Si tratta di Favicon.cc.

Grazie ad una griglia di 16×16 quadretti, puoi disegnare la tua favicon un pixel per volta, scegliendo i colori che vuoi dal color picker.

Controlla il risultato nell’anteprima e, una volta soddisfatto, potrai scaricarla direttamente nel formato .ico e delle dimensioni 16×16 px.

Oppure, sfoglia le icone già create e scegli quella che più ti piace: potrai salvarla così com’è oppure modificarla usando l’apposita griglia.

Hai creato la favicon per il tuo sito? Benissimo, adesso vediamo come usarla.

Come inserire una favicon su WordPress

Inserire una favicon usando la funzionalità nativa di WordPress

Inserire una favicon usando la funzionalità nativa di WordPress

A partire da WordPress 4.3, è possibile inserire la favicon su WordPress attraverso una funzionalità nativa della piattaforma (cioè, non dovrai installare alcun plugin aggiuntivo).

Prima di tutto, crea la tua icona. Dovrà essere un’immagine quadrata con un lato di almeno 512 pixel.

Aggiungerla al tuo sito è molto semplice: accedi alla tua Bacheca e naviga in Aspetto > Personalizza.

Il pannello Personalizza ti permette di modificare alcuni aspetti del tuo sito e di vedere l’anteprima in tempo reale.

Clicca su Denominazione del Sito.

Qui, nella parte inferiore della sidebar vedrai una sezione chiamata Icona del sito.

Carica sul tuo sito l’icona che hai creato in precedenza cliccando Seleziona un’immagine.

A questo punto, hai la possibilità di ritagliare l’immagine.

Se non vuoi ritagliare, lascia tutto com’è e clicca su Salta ritaglio.

Completato questo passaggio, vedrai l’anteprima sia della favicon che dell’icona utilizzata dalle app.

Inserire la Favicon su WordPress

Come vedi, inserire la favicon su WordPress usando la funzionalità nativa è molto semplice.

In linea di massima, ti consiglio di usare sempre questa opzione.

Se invece preferisci utilizzare il codice, continua con la prossima sezione.

Inserire una favicon usando il codice HTML

Utilizzare l’HTML per inserire la favicon nel tuo sito non è affatto complicato.

Carica il file .ico nella root del tuo sito.

Non inserirla in una cartella, altrimenti non funzionerà.

Vai nell’editor di WordPress da Aspetto > Editor e apri il file header.php (Testata del tema), trova la riga in cui c’è scritto </head> e prima di essa aggiungi questa stringa:

<link rel="shortcut icon" href="<php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
Inserire la favicon su WordPress nel codice dell'header

Salva il tuo file header.php e apri (o aggiorna) una pagina qualunque del tuo sito.

La favicon è al suo posto!

Se dovessi incontrare delle difficoltà nel caricare la tua favicon, puoi contattarci attivando l’Assistenza WordPress.

Entro un’ora ti risponderemo e risolveremo ogni tuo dubbio.

Anzi, se ti ho incuriosito e vuoi saperne di più su come usare l’HTML per migliorare il tuo sito WordPress, ti suggerisco di scoprire il modulo HTML del nostro Corso WordPress.

Plugin per la favicon? No, grazie!

Forse ti sarà capitato di trovare dei plugin che ti permettono di svolgere questa operazione.

Ma il mio consiglio è di non utilizzare plugin per inserire la favicon.

Solitamente si tratta di plugin poco recenti, che venivano utilizzati soprattutto prima della versione 4.3 di WordPress, quando non esisteva ancora la funzione nativa.

In generale, usare un plugin per una funzione che può essere tranquillamente svolta senza è sicuramente inutile e potrebbe anche risultare dannosa per il tuo sito.

Ad esempio, potrebbe provocare un rallentamento nel caricamento delle tue pagine.

Inoltre, consiglio di non usare mai plugin che non vengono aggiornati regolarmente oppure che non sono testati con le ultime versioni di WordPress, anche per motivi di sicurezza.

Conclusione

Come vedi, creare una favicon da inserire in WordPress con questi sistemi è veramente semplicissimo.

Non ti resta che provarli, e scegliere quello che fa maggiormente al caso tuo.

In ogni caso, con una favicon personalizzata, il tuo sito web risulterà ancora più professionale e maggiormente riconoscibile ai navigatori del web.

Hai una favicon personalizzata?

Quali strumenti hai utilizzato per crearla?

Condividi con noi la tua esperienza lasciandoci un commento nel box qui sotto.

Guide correlate:

Immagine di Andrea Di Rocco autore articoli SOS WP
Andrea Di Rocco Fondatore di SOS WP™
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 700 guide su WordPress e sulla SEO che ho pubblicato su questo blog. Se ne hai voglia ti invito a leggere la mia storia, cliccando sul pulsante qui sotto.
46Commenti
Lascia un commento
  1. Immagine avatar per Laura
    Laura

    Ciao Andrea,
    ho inserito la favicon nel sito e viene visualizzata correttamente, ma nel motore di ricerca su mobile viene visualizzata ancora la favicon di wordpress, ormai sono due settimane che l’ho modificata, ma google non la aggiorna, cosa posso fare secondo te?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Laura, se la tua favicon non viene visualizzata nei risultati di ricerca su dispositivi mobili, può darsi che serva più tempo a Google per rilevarla. Puoi usare lo strumento di controllo URL di Search Console e testare l’URL pubblicato, nonché eseguire una richiesta di indicizzazione. Questo potrebbe aiutarti ad aggiornare la favicon nella SERP. Restiamo a disposizione se hai altre domande, un saluto!

    2. Immagine avatar per Laura
      Laura

      Grazie per la risposta.
      Google Search Console mi dà questo avviso se provo a cliccare su indicizza la pagina:
      “Le azioni per la pagina sono temporaneamente disattivate”
      Però nel dettaglio vedo questo:
      Scansione
      Ultima scansione eseguita 4 dic 2020, 07:33:12
      Scansione eseguita da Googlebot per smartphone
      Scansione consentita? Sì
      Recupero pagina Esito positivo
      Indicizzazione consentita? Sì
      E se guardo nell’html analizzato dalla search console vedo il link della mia favicon

      Per questo non capisco perchè mostra ancora l’icona di wordpress…

    3. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Laura, hai ragione, purtroppo al momento le azioni sono disattivate poiché Google sta effettuando alcuni update, come riportato in questo annuncio, e non sappiamo quando lo strumento tornerà disponibile. è possibile che questa sia la causa del problema, ma puoi verificare intanto che tutto il resto sia in ordine: che sistema hai utilizzato per inserire la favicon? E puoi indicarci esattamente la parte di codice HTML che viene mostrato? Potrebbe anche essere un problema creatosi a causa di altri plugin, come le impostazioni di minificazione dei plugin di cache. Fai queste verifiche e facci sapere!

  2. Immagine avatar per Roberto
    Roberto

    Salve ho un problema a inserire un immagine in evidenza, cioè ho creato un sito con elementor su WordPress ora arriva la mia domanda… è possibile mettere un immagine in evidenza così da pubblicarla quando copio il link del mio sito nei vari social…. e se possibile senza pubblicarla nel mio sito….. Grazie

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Roberto, per questo puoi usare Yoast SEO, leggi questa guida. A presto!

  3. Immagine avatar per Riccardo
    Riccardo

    Buongiorno. Esiste un plugin per un sito di appartamenti che cambia la disposizione a seconda del browser utilizzato?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Riccardo, no a quanto ne sappiamo. Ci dispiace di non essere di maggiore aiuto!

  4. Immagine avatar per matteo
    matteo

    Ciao Andrea,
    Avrei una domanda tecnica: solitamente il formato della favicon è .ico, vabene anche se si caricano file .png? Potrebbe influenzare sulla seo?
    Chiedo questo perchè se carico file .ico non li visualizza wordpress

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Matteo, può andare bene lo stesso, ma consiglierei formato jpeg per non rallentare il sito.

  5. Immagine avatar per Roberto
    Roberto

    Ciao, e scusa se la mia domanda forse ti sembrerà banale ma ho un problema che da giorni nkn riesco a risolvere, se voglio inviare il link al mio sito tramite whatsapp e scrivo la url completa: https://www.serrature-h24.it mi esce come immagine una che ho sulla home page ma vorrei che li ci fosse il mio logo. potresti gentilmente auitarmi Grazie infinite
    Roberto

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Roberto, la home ha l’immagine di anteprima impostata?

    2. Immagine avatar per Roberto
      Roberto

      ciao Andrea e grazie per la risposta, veramente non trovo dove si imposta l’immagine di anteprima…

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Roberto, dovresti visualizzare il box relativo a destra, dalla pagina di editing.

    4. Immagine avatar per Roberto
      Roberto

      scusa ma intendi immagine in evidenza? perché se metto l’immagine in evidenza mi appare sua home page e io non vorrei quello..

    5. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Si, esatto. Dovresti scriverci a info@sos-wp.it per mostrarci esattamente cosa vuoi inserire e dove 😉

  6. Immagine avatar per Fabiana
    Fabiana

    Buongiorno, ho scaricato ed attivato il Plugin Favicon ma non compare quando lo vado a cercare in Aspetto e poi Menu.
    Sapresti aiutarmi?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Fabiana, scrivici a info@sos-wp.it. Un saluto!

  7. Immagine avatar per paolo
    paolo

    Ciao,
    ho WP 4.6.1 e ho inserito l’Immagine 512×512 pixel nell’apposito sezione della Personalizzazione però non Compare nella Barra degli Indirizzi. La casa strana è che invece Compare nella barra degli Indirizzi nel https://miosito.it/wp-admin/
    Non capisco perchè. Grazie

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao, hai provato con altri browser? Qual è il tuo dominio? Un saluto!

    2. Immagine avatar per giacomo
      giacomo

      non ho capito: compare o non compare nella “barra degli indirizzi”.

      Cmq a me con wp4.6 e il tema tweentysix non appare proprio (ho provato firefox e chrome, autenticato e no).

      Ho caricato un’immagine e WP la mostra sopra il titolo del sito (ci sta anche bene, ma io vorrei l’icona piccola accanto all’url nel browser).

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Giacomo, la favicon dovrebbe comparire nella barra degli indirizzi, e non in altra posizione. Che tema stai utilizzando? Un saluto!

    4. Immagine avatar per paolo
      paolo

      Sulla barra degli Indirizzi del Sito NON COMPARE, mentre compare nella Barra degli Indirizzi se entro nella Bacheca da Amministratore. Il Tema è Iconic One.

    5. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Paolo, scrivici (mandandoci un’immagine della barra in bacheca) a info@sos-wp.it. Un saluto!

    6. Immagine avatar per Giacomo
      Giacomo

      come dicevo ad un amico dopo che mi ha fatto notare dove sbagliavo, ho capito perché si chiama FAVICON: perché sono una fava (come si dice da noi) 🙂
      Mi ostinavo a caricare il file come LOGO, e non mi ero accorto che il pulsante per caricare la favicon era qualche centimetro piu’ sotto.
      Il tema è twentysixteen, come avevo scritto, ma il problema ero io :))

    7. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Importante è che hai risolto 😉

  8. Immagine avatar per michela mureddu
    michela mureddu

    ciao, ti ringrazio davvero per i preziosi suggerimenti che ci dai!!! volevo chiederti una cosuccia che non riesco a trovare.
    Vorrei applicare la dicitura “spedizione gratuita” su alcuni prodotti (che hanno la classe di spedizione gratis)
    Ho già la dicitura “in offerta” che appare quando sconto l’articolo….vorrei la stessa cosa per la spedizione gratuita.
    Devo scaricare una plug in specifica o è già in wordpress ?

    Grazie 1000 in anticipo

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Michela, usi WooCommerce per lo shop?
      Un saluto!

    2. Immagine avatar per michela mureddu
      michela mureddu

      si ^__^

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Michela, prova ad usare questo plugin: https://it.wordpress.org/plugins/woocommerce-advanced-free-shipping/. Un saluto!

  9. Immagine avatar per Noemi
    Noemi

    Ciao, scusa se scrivo qui un commento per niente inerente all’argomento favicon, ma ho cercato nell’archivio e non trovo l’argomento che mi serve di più in questo momento!
    Potresti consigliarmi un plugin da inserire in fondo al blog per contare le pagine? Il mio tema lo prevede solo se uso un certo layout, troppo essenziale per i miei gusti.
    In pratica vorrei che ci fosse, prima del footer, la possibilità di sfogliare le pagine o di cliccare su “previous” o “next” (il blog lo scrivo in inglese).
    Grazie in anticipo, adesso che sono passata a WordPress il tuo sito mi è utilissimo, ti seguo anche su FB 🙂

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Noemi, grazie dei complimenti intanto, sono felice di sapere che il nostro sito ti sia utile!
      Per quanto riguarda la tua richiesta, testa questo plugin, anche se un po’datato: https://wordpress.org/plugins/wp-post-navigation/.
      Un saluto!

  10. Immagine avatar per Taddeo
    Taddeo

    Come posso scaricare il file della favicon per poterla usare anche su un’altra piattaforma tipo prestashop?
    Grazie.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Taddeo,
      il file della favicon si trova nella cartella del tuo sito, quindi lo potrai rintracciare, e scaricare sul tuo pc.

  11. Immagine avatar per Mia Khalifa
    Mia Khalifa

    Ciao io ho utilizzato il Multicons e per crearla ho usato gimp. Grazie mille dell’articolo

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Mia,
      grazie del tuo commento, continua a seguirci 😉

    2. Immagine avatar per Ilaria
      Ilaria

      Ciao! Vorrei un consiglio. Dovrei aprire un blog per lo studio in cui lavoro e vorrei sapere se con WordPress potrei creare un collegamento con l’icona sul sito internet aziendale, in modo da poterci cliccare e rimandare al blog, come accade con altri social network, come Facebook, Google+, Linkedin, ecc.
      Ti ringrazio tanto
      Ilaria

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Ilaria,
      certamente, risposta affermativa!
      Se hai altre domande siamo qui 😉

  12. Immagine avatar per rocco
    rocco

    Ciao,
    io ho usato il plugin Favicon By RealFaviconGenerator per il logo,
    adesso che l’ho fatto e mi si vede sul sito, posso disattivare il plugin o
    se lo disattivo mi toglie il logo (favicon)??
    Grazie, attendo risposta.!
    Rocco

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Rocco,
      allora, ti consiglio di provare a disattivare il plugin e vedere se il logo scompare. Prima però assicurati di avere il file dell’immagine salvato sul tuo pc.
      Nel caso, se utilizzi l’ultima versione di WordPress, puoi inserire la favicon utilizzando l’impostazione nativa presente in questa release.
      La trovi all’interno del pannello “Personalizza”.
      Spero di esserti stato di aiuto, un saluto!

  13. Immagine avatar per Primo
    Primo

    Ciao Andrea,
    dopo aver creato e inserito su WP la nostra favicon è possibile disattivare e/o cancellare i plugin?

    Grazie mille!

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Primo,
      puoi farlo, ma come mai intendi disattivare? Noti dei rallentamenti nel sito web?
      Un saluto, e grazie del tuo commento!

    2. Immagine avatar per Primo
      Primo

      Personalmente preferisco disattivare i plugin che mi servono solo per operazioni temporanee. Il motivo è che ho già 7 plugin attivi. In questo caso, una volta creata la favicon, il plugin non mi servirà più perciò meglio ottimizzare, non credi? ;.)
      Ciao e grazie a te per l’ottimo lavoro che fai!

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Primo,
      complimenti perché ti vedo attento alla gestione del tuo sito web… spesso mi rendo conto che molti errori sono generati da un affollamento inspiegabile di plugin, che diversi clienti lasciano senza nemmeno aggiornare!
      Direi che tu con 7 sei sotto la soglia di attenzione, quindi ti dico Bravo.
      Un saluto, continua a seguirci.

  14. Immagine avatar per Spakka
    Spakka

    Grazie di cuore per tutte le info che ci date e le utili notizie….giornalmente le applico sul mio sito! 🙂
    Continuate così!!!

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao!
      Grazie a te per i complimenti, auguro il meglio a te e al tuo sito 😉
      Continua a seguirci!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *