La piattaforma più utilizzata al mondo per realizzare siti web è WordPress, nato come CMS (Content Management System) per realizzare blog è oramai diffusissimo per siti di qualsiasi genere e tipo.
Tantissimi siti web che visitate regolarmente sono realizzati con WordPress: National Geographic, The Next Web, il sito di John Grisham, ESPN, Linkedin, Forbes, Kartell, Wall Street Journal, Techcrunch, etc.
Insomma, WordPress non è più il sistema per il blogger di passaggio, ma una realtà solida, che da la possibilità di gestire siti importanti, con un traffico elevato e con un’infinita possibilità di personalizzazione.
Da oggi comincio una serie di brevi tutorial (un po’ come faccio già con l’ HTML) su questo CMS, oggi si parla di “favicon” e di come inserirla in un sito creato con WordPress.
Cosa è una favicon?
E’ quella icona piccola piccola (16px per 16px) che si vede sulla barra degli indirizzi quando visitiamo una buona parte dei siti web, una immagine che può essere il logo o semplicemente richiamare i contenuti del sito.
Il termine è mutuato dalla crasi delle parole inglesi “favorite” e “icon”.
- Un sito web che ha una favicon risalta e rimane in mente più di quelli che non la possiedono.
- Quando scorriamo la lista dei preferiti nel browser il sito è riconoscibile grazie alla favicon.
- La favicon è la tua identità sul Web, è come un biglietto da visita o la fotografia della carta d’identità.
- Per le tecniche SEO (Search Engine Optimization) è un requisito importante.
Come si aggiunge ad un sito realizzato con WordPress?
Dobbiamo innanzitutto crearla.
La favicon deve essere di una grandezza ben precisa in pixel, ovvero 16×16 e va salvata come file .png, dopo deve essere convertita in formato .ico.
Come si converte un’immagine da .png a .ico?
Possiamo utilizzare i consueti strumenti di editing come Photoshop o l’ottimo e gratuito GIMP per salvare l’immagine png in ico oppure ricorrere ai tantissimi servizi online che lo faranno per noi, tra questi vi segnalo:
Ce ne sono tantissimi, cercate “favicon generator” con Google e avrete una lista interminabile di servizi che realizzeranno la favicon per voi.
Bene, abbiamo la nostra favicon pronta da inserire nel sito WordPress, prima di utilizzarla dobbiamo rinominare l’icona appena generata in “favicon.ico”, non possiamo dargli un nome a caso, questa è la prassi.
Come inserire la favicon nel sito realizzato con WordPress
Per prima cosa andiamo nella cartella principale del tema e carichiamo la nostra favicon.
Apriamo il file header.php del tema utilizzato, posizioniamoci prima della chiusura del tag </head> e inseriamo questa riga di codice , in questo modo:
La riga da inserire prima del tag
Basta questa riga, il gioco è fatto, caricate nuovamente il file header.php modificato e la favicon sarà adesso sulla barra degli indirizzi accanto all’URL del vostro sito!
La “favicon” accanto al titolo della pagina.
Importante: la favicon va caricata nella root del vostro sito (al livello iniziale, non dentro una cartella specifica), altrimenti non funzionerà .
Se doveste incontrare difficoltà o aveste il piacere di condividere la vostra favicon, scrivete pure nei commenti , le condivideremo insieme 🙂
ciao Eugenio e complimenti per le tue guide sempre chiare, esaustive e risolutive!!!
Nello specifico ti volevo chiedere una cosa in merito alla favicon, io ho aggiunto la stringa così come da te indicato, tuttavia la favicon non appare.
Lo adduco al fatto che probabilmente la favicon non è caricata dove dovrebbe, io l’ho caricata tramite Media—>libreria media.
Mi potresti dare un suggerimento?
Grazie anticipatamente e a presto.
Un saluto
Ciao Gianluca, grazie per i complimenti, sei troppo buono 🙂
La favicon va inserita nella root del sito, non dentro una cartella specifica come dici di aver fatto (quindi non nella cartella media).
Deve trovarsi, in pratica, allo stesso “livello” del file wp-config.php.
Come ho scritto nel post …”Importante: la favicon va caricata nella root del vostro sito (al livello iniziale, non dentro una cartella specifica), altrimenti non funzionerà .”
Spero di essere stato utile, se non riuscissi, fammelo sapere.
Ciao e grazie.
Innanzitutto grazie per la replica 🙂
ti eri spiegato benissimo, il fatto è che, a parte su media, non so come caricare la favicon nella root, tieni presente che utilizzo SOLO il pannello admin di wordpress (nessun ftp o altro).
p.s.
il tema è twenty twelve
p.p.s.
Grazie ancora per la tua disponibilità e buon week-end !!!
Ciao
Gianluca
Esiste un metodo alternativo:
lascia la tua favicon nella libreria media
copia il percorso della favicon, che sarà qualcosa di simile a “http://www.miosito.com/wp-content/uploads/2013/06/favicon.png”
apri il file functions.php con l’editor, posizionati in fondo e aggiungi queste righe:
function my_favicon() { ?>sostituisci "http://www.miosito.com/wp-content/uploads/2013/06/favicon.png" con quello che hai copiato dalla libreria media
ricarica la pagina del browser e dovresti vedere la tua favicon
Se non dovessi vederla pulisci la cache del browser.
Fammi sapere 😉
Oh yeahh !!!
Sei un grande !!!
Ti seguirò sempre con grande attenzione e divulgherò la tua professionalità con grande piacere !!!
Un caro saluto e a presto 🙂
Gianluca
Sono molto contento che sia riuscito ad inserire la favicon.
E’ sempre molto piacevole leggere questo tipo di commenti.
Grazie, Gianluca, alla prossima 🙂
aiuto non riesco piu ad accedere al sito, ho fatto quello che hai detto ma mi da sempre questo errore:
Parse error: syntax error, unexpected ‘}’ in /membri/ipaandapk/sito/wp-content/themes/pixelpress/functions/admin-functions.php on line 3193
ti prego aiutami
Ciao Luca, mi dispiace che ti sia capitato questo inconveniente.
Prova a riscrivere la parte di codice da inserire in functions.php che c’è nell’articolo, copiando e incollando può saltare qualche tag o parentesi.
In questo caso, leggendo l’errore, potrebbe essere una “}” in più.
Fammi sapere 😉
Grazie Eugenio!! Stavo impazzendo. Per una neofita come me i tuoi suggerimenti sono stati una manna. In pochi click la favicon è apparsa.
Grazie a te, Virginia.
Sono questi i commenti che ti danno la spinta per fare sempre meglio e bene.
Grazie 🙂
Ciao Eugenio,
ho seguito alla lettera il procedimento, ma niente da fare!
Addirittura, come puoi vedere dal sito, l’icona è quella do Joomla, e il sito è fatto in WordPress!!!
Hai qualche consiglio da darmi?
Ciao Massimo, prova ad inserire la favicon a livello iniziale e non all’interno della cartella del tema, in questo modo:
http://www.massimoamato.com/favicon.icoCiao Eugenio,
innanzitutto grazie per la tua pazienza e disponibilità!
Ho seguito le istruzioni, anche quelle che hai dato a gianluca, ma niente, non appare!
Non ho capito bene il concetto di non inserire il favicon in una cartella, ho provato a fare http://www.miosito.com/favicon.ico, ma naturalmente esce tutto bianco e non mi fa fare nulla…
Un altro aiutino? 🙂
grazie
Ciao Valentina, se la memoria non mi inganna, il tema che usi ha la possibilità di caricare la “favicon” direttamente dal pannello delle impostazioni presente nella bacheca di WordPress.
Quindi: Theme options -> Branding e dovresti trovare un box che ti da l’opzione della favicon.
Fammi sapere 😉
Ciao Eugenio,
ho messo il codice in function.php e non funziona più niente! Mi sono sbagliata e ho messo favicon.ico invece che favicon.png
Non carica più il sito e appare una pagina bianca! Se entro in ftpe prendo il file basta che cancello le righe che avevo aggiunto?
Grazie mille
Ciao Laura, mi piacerebbe vedere il sito, se mi dessi l’indirizzo potrei capire meglio.
Comunque, la “pagina bianca” in WordPress è un evento che può succedere per tanti motivi. Mi viene in mente una cosa: sei, per caso, su Aruba? Te lo chiedo perchè, spesso, con Aruba c’è bisogno di ripristinare i permessi dal pannello di controllo.
Fammi sapere se il tuo sito è ospitato su Aruba e dammi l’indirizzo, così risolviamo 😉
Ciao a tutti e grazie per i suggerimenti !
Ho un piccolo problema con la visualizzazione della Favicon, se apro IE la vedo in tutte le pagine, se apro chrome la vedo in alcune pagine e altre no. Dove ho sbagliato? premetto che ho caricato la Favicon nella root del sito e ho seguito i suggerimenti per modificare il file header.
Grazie in anticipo
Ciao Mirella, la favicon è una brutta bestia ma spesso le soluzioni più semplici sono quelle giuste: hai provato a pulire la cache dei browsers ?
Fammi sapere come è andata 😉
Ciao , si pulita e ripulita e ripulita ma si vede solo nella Home con Chrome.
Non sarà di suo gradimento la mia Favicon 🙂
Ciao Eugenio,
con Aruba sitebuilder come faccio a mettere la favicon. Ciao Paolo
Ciao Paolo, non ho esperienza con Sitebuilder, ho dato un’occhiata alla demo presente sul sito di Aruba e non credo ci sia questa possibilità.
Oltre questa opzione dovresti avere quella di connetterti via FTP per poter visualizzare i files e, di conseguenza, risolvere il problema favicon.
Di sicuro Aruba ti avrà inviato una mail con le credenziali di accesso (indirizzo host, password, etc.).
Spero sia così e, se non lo fosse, non esitare a contattarli per ottenerle.
A presto 🙂
Ciao,
il tuo articolo è uno dei più chiari trovati in rete, ti scrivo perchè ho bisogno di una mano per l’inserimento del Favicon sul mio blog (www.doitjuicy.com). Sto usando il tema Amadeus di Themeisle.
Allora…sono davvero all’inizio , non capisco nulla di html e come vedi dal blog c’è solo un logo e un’idea di menu.
Ti dico cosa ho fatto così forse riesci a capire cosa ho sbagliato.
1) ho creato un loghetto con photoshop e poi con il sito “prodraw” ho caricato l’immagine e creato il favicon.
2) su wordpress ho caricato il favicon nella libreria
3) sono andata all’editor ed in header.php ho inserito la stringa che suggerivi tu e che ho trovato anche nel sito http://www.prodraw.net/favicon/generator.php.
4) il favicon però non compare nella barra indirizzi.
5) ho letto quindi tra i commenti il suggerimento che hai dato a Gianluca il 1.6.2013 e ho copiato in functions.php il link della mia immagine.
6) ma niente, continuo a non vedere il favicon.
Potresti dirmi se c’è un modo per risolvere secondo te?
Ti ringrazio in anticipo, buon lavoro
Giusy
Ciao, scusa se ti rispondo in ritardo, comunque ho visto che la favicon adesso funziona, a volte bisogna attendere un po’ per visualizzarla.
A presto 😉
Ciao, sto creando il sito con wordpress su altervista. Solo che non so proprio come posso fare per creare l’icona. Addirittura devo sostituire il titolo del sito web con l’icona perché l’etichetta del prodotto e l’icona coincidono, come potrei fare? Si tratta di un sito di prodotto aziendale. Grazie
Ciao Simone, non so se ho capito bene la situazione, comunque se devi creare una favicon puoi farlo con diversi tool, alcuni anche free e online (ad esempio Favicon Generator oppure Favicomatic).
Il problema dell’etichetta del prodotto uguale all’icona non mi è chiaro, dove sta il problema?
Fammi sapere 😉