Guide

Creare una favicon WordPress: la guida completa

Vuoi creare una favicon per WordPress ma non sai come fare? In questa guida troverai un elenco degli strumenti per creare e inserire una favicon usando un po’ di HTML.

icone

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

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

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

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 Prioritaria. 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 nostro Corso base HTML.

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.

Assistenza WordPress e SEO con SOS WP

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.

Vota questa guida

NOTA: Questa guida è stata aggiornata il

Registrare un dominio e uno servizio di hosting WordPress con SiteGround

Altre guide della stessa
categoria

40 COMMENTI
Commenta
  1. 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

    Rispondi
  2. 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: http://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

    Rispondi
  3. Fabiana

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

    Rispondi
  4. 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 http://miosito.it/wp-admin/
    Non capisco perchè. Grazie

    Rispondi
    • 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).

      Rispondi
      • Team

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

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

          Rispondi
    • Team