Come inserire una favicon su blog wordpress

Ultimamente mi sono scontrato con un piccolo problema, far visualizzare una favicon su un blog wordpress sia su Firefox che su Internet Explorer.

Sembra una banalità, ma il tempo speso per questi piccoli contrattempi non è poco.
In uno dei miei ultimi lavori per un’azienda, riscontravo che la favcon inserita da me, risultava vedersi perfettamente su Firefox ma non ne voleva sapere di apparire su Explorer 7 (lasciamo perdere il discorso per la versione 6 ;) ).
A questo punto, mi sono informato un pò in giro ed ho risolto in questo modo.

Inserire una favicon in 4 step su wordpress

realizzare-favicon-wordpress

Anni fa avevo già pubblicato un articolo su cos’è e come inserire una favicon in un sito web.
In questo caso ho evitato di utilizzare dei plugin per inserire la favicon in modo automatico, ho scelto di apportare delle piccole modifiche al codice a mano.

Questi sono i passaggi che ti permettereanno di inserire una favicon in modo corretto senza utilizzare plugin.

  • Step1:
    Crea o ritaglia una piccola immagine per la tua favicon di dimensioni standard: 16×16 px.
    Di solito puoi utilizzare o il simbolo del tuo logo, o la lettera inziale ;) .
  • Step2:
    Crea il file favicon.ico e caricalo via ftp sul tuo blog.
    Per creare il suddetto file, sono presenti on line molti servizi gratuiti che in pochi secondi ti permettono di caricare l’immagine da mostrare a lato della url del tuo blog.
  • Step3:
    cerca nella cartella del tema wordpress (il percorso per raggiungere il tema tramite ftp: wp-content/themes/tema-wordpress-utilizzato) che stai utilizzando il file header.php e inserisci la seguente stringa di codice all’interno dei tag <head>:

     <link rel="icon" type="image/gif" href="favicon.gif" >

<!—[if IE]>
<link rel="shortcut icon" href="favicon.ico"
 type="image/vnd.microsoft.icon" >
<![endif]—>

    Questa stringa di codice ti permette di mostrare a video la simpatica immagine sia su firefox che su explorer (non il 6).
    Fai attenzione ad inserire l’immagine nel percorso giusto, altrimenti non la vedrai mai questa benedetta favicon ;) .

  • Step4:
    Aggiorna la pagina del tuo blog (Ctrl + F5) e vedi il risultato finale su entrambi questi due browser.

Io ho risolto in questo modo, hai mai avuto problemi simili? Per quali scelte hai optato?

Ti è piaciuto questo articolo?

Ricevi continui aggiornamenti su come migliorare il tuo blog:

Scegli di seguire i post e le chicche di blographik (esclusiva ai soli iscritti), direttamente nella tua casella email.

Abbonati ora alla newsletter compilando questo form.

Nome:
Email:
 
 

Articoli correlati:

Se di tuo interesse, puoi consultare anche i seguenti post correlati:

  • Realizzare una favicon

  • [Video Tutorial]: Scopri come creare facilmente e velocemente una favicon con Photoshop

  • SEO e WordPress: Ecco 10 funzioni per aumentare la velocità di caricamento del tuo blog

  • 5+3 Semplici Modi per Rendere Sicuro il tuo Blog WordPress

  • Come personalizzare graficamente un blog porfolio (seconda parte)

    • http://toccosotto.com Feelbeen

      Ottimo. Grazie per la dritta. Ma il quinto step? :-P

    • http://www.blographik.it Mirko D’Isidoro

      @Feelbeen: benvenuto su blographik ;) .
      il quinto step non c’è, ho commesso un piccolo errore. correggo e grazie per la segnalazione.

    • http://www.webstato.com Andrea Giavara

      Grazie Mirko!
      Usando sempre Firefox non mi ero accorto che su IE non si vedeva la favicon!
      Consiglio a tutti, anche se lo saprete già, di testare sempre le modifiche cha apportate ai blog/siti sia con firefox che con IE!
      Ciao a tutti!

    • http://www.webstato.com Andrea Giavara

      Scusa Mirko una domanda: nel nome del file nel primo caso (tutti i browser) è scritto favicon.gif
      Mentre nel caso specifico per IE è scritto favicon.ico
      devono essere uguali invece, vero?
      Grazie ciao!

    • http://syymza.com syymza

      Io ho utilizzato questo plugin, molto semplice e intuitivo, sul mio blog :) http://www.digitalramble.com/favicon-manager-wordpress-plugin/

    • http://syymza.com syymza

      Però non ho idea se si vede su IE, non avendolo :(

    • http://www.blographik.it Mirko D’Isidoro

      ————-
      @Andrea:
      ————-

      riguardo la tua domanda:
      il file favicon.gif è l’immagine che deve essere presente nella root del blog per poter visualizzare la favicon nel browser.

      Il file favicon.ico serve per caricare l’immagine favicon.gif e visualizzarla nella barra di navigazione.

      Ci sono entrambi per permettere di non avere problemi con explorer e firefox.

      ————
      @syymza:
      ————

      bene, grazie per aver condiviso questa risorsa per wordpress.
      Se qualcun altro la utilizzerà, segnalerà se si vede bene anche su explorer.

    • http://www.luckylab.eu Lucky

      Anch’io scrissi tempo fa alcuni articoli sul tama “favicon”. Esiste un valido servizio online qui http://www.favicon.cc/ ne ho parlato qui http://www.luckylab.eu/2008/09/24/generatore-di-favicon-online/
      Per wordpress ho modificato il mio tema in uso nel file header.php inserendo questo codice:
      <link rel=”shortcut icon” href=”/wp-content/themes/tuotema/favicon.ico” />

      dove tuo tema è il nome del tema in uso. Il codice và inserito prima del tag .

      • http://www.blographik.it Mirko D’Isidoro

        ———–
        @Lucky:
        ———–

        Ottima segnalazione e grazie per aver condiviso le tue risorse ;) .
        Personalmente anch’io avevo optato per la stringa di codice che suggerisci, ma il risultato era che nn si vedeva nulla su ie 7, quindi mi sono dovuto attrezzare per risolvere il problema e la stringa condizionale che ho suggerito mi ha risolto questo impiccio.

        Alla prossima ;) .

    • http://www.luckylab.eu Lucky

      Io vedo l’icona sia u IE 7 che su firefox

    • http://www.blographik.it Mirko D’Isidoro

      ———–
      @Lucky:
      ———–

      ok, il problema era il tema che stavo utilizzando, cmq a me non si vedeva ed ho risolto come segnalto nel post ;) .

      Ciao

    • http://www.italianwebdesign.it Lauryn

      scusa mirko se mi permetto, ma se usi la .ico la vedrai sempre e comunque su tutti i browser, credo che il tuo errore fosse proprio perchè usavi una gif al posto di una .ico sai?

    • http://www.blographik.it Mirko D’Isidoro

      ———–
      @Lauryn:
      ———–

      grazie per la dritta ed il suggerimento.
      Ho provato con il solo file .ico ma su explorer non ne voleva sapere di vedersi.

      Mi sembra che anche sul tuo blog tu abbia pubblicato qualcosa in merito, tra le mie ricerche credo di essere capitato anche da te ;) .

      Comunque ti ringrazio per aver espresso il tuo parere da professionista, ora credo che tutti noi abbiamo le idee un pò più chiare ;) .

    • http://www.italianwebdesign.it Lauryn

      non vorrei dire cavolate, in passato diciamo che il problema si era presentato, ed avevo poi scoperto di dover inserire anche il “link rel” per farlo vedere, al contrario, su firefox ed altri, mentre explorer me lo prendeva di default.

      le cose da tenere presente sono:
      1. che il file si chiami favicon.ico (e quindi abbia estensione .ico) e
      2. che sia collegato nei meta tag con il link rel :

      in questo modo funziona ovunque. spero di essere stata di aiuto :D

    • http://www.blographik.it Mirko D’Isidoro

      ———–
      @Lauryn:
      ———–

      molto gentile e precisa la tua descrizione della soluzione ;) .
      Ecco a cosa servono i commenti, a discutere di un problema e a trovare la soluzione da parte degli stessi partecipanti ;) .

      Sei stata molto gentile, il tuo aiuto sarà prezioso a coloro che in futuro dovranno svrigarsela con le favicon sui propri siti e blog e non vorranno perdere troppo tempo, come è successo a me ;) .

      Per quanto riguarda quel lavoro, credevo di aver eseguito tutto in modo regolare, i tuoi suggerimenti sono ciò che ho realizzato fin dall’inizio, ma il problema c’era purtroppo.

      Forse è stato un problema di aggiornamento della cache di explorer, che forse mi ha portato sulla cattiva strada ;) .

      Sei stata di grande aiuto comunque, grazie.

    • http://www.markdvl.com Markdvl

      Se non avete voglia o non siete capaci di smanettare nel codice di wordpress per inserire la favicon allora vi segnalo che esistono dei plugin molto interessanti che faranno uil lavoro al posto vostro.
      Due su tutti sono Favicon Manager WordPress Plugin e MaxBlogPress Favicon.

      • http://www.blographik.it Mirko D’Isidoro

        @ Markdvl: grazie per aver suggerito alcuni plugin interessanti per l’inserimento di favicon su wordpress.
        In parte era ciò che avevo domandato nell’articolo, e di risorse ora ce ne sono diverse, dall’inserimento del codice a mano all’utilizzo di plugin appositi ;) .

    • http://www.salvatoremenale.it Salvatore

      Ciao Mirko!
      Ho inserito il seguente codice:

      e l’ho inserito prima di

      Risultato:
      - la favico si visualizza su Firefox ma non su Explorer.
      Dove pecco?

    • http://www.blographik.it Mirko D’Isidoro

      @Salvatore:
      Benvenuto su blogrpahik ;) .
      Il tema non permette di inserire il codice nei commenti ;) , quindi è un pò difficile risponderti.

      Fai una ricerca su google e vedi che risolvi, come faccio sempre io ;) .

      ciao

    • RescueMotion

      Grazie!! :)