Volete aggiungere una favicon al vostro blog WordPress?
Una favicon o icona del sito è una piccola immagine che appare nella scheda del browser web accanto al titolo del sito. Anche se può sembrare un elemento banale, una favicon ben progettata può aiutare il vostro blog a distinguersi in uno spazio online affollato.
In questo articolo vi mostreremo come aggiungere una favicon al vostro blog WordPress. In questo modo, potrete dare un’impressione memorabile ai vostri visitatori.
Perché dovreste aggiungere una Favicon al vostro blog WordPress?
È essenziale aggiungere una favicon al vostro blog WordPress perché aiuta gli utenti a identificare rapidamente il vostro sito web e a rafforzare l’identità del vostro marchio. Da questa piccola icona, i visitatori del sito possono facilmente riconoscere il vostro blog.
Ecco come appare una favicon in un browser web:
Un altro scopo di una favicon di WordPress è quello di migliorare l’esperienza dell’utente. Quando sono aperte più schede, gli utenti possono guardare le favicon per sapere in quale sito web si trovano e passare a quello desiderato.
Se gli utenti aggiungono un’icona di collegamento o un segnalibro al vostro blog sui loro dispositivi mobili, la favicon apparirà come icona dell’app sulla loro schermata iniziale. In questo modo sarà facile per loro accedere al vostro sito web con un semplice tocco.
Le favicon possono anche contribuire all’ottimizzazione dei motori di ricerca (SEO) di WordPress. Se prestate attenzione alle pagine nei risultati di ricerca, di solito presentano la favicon del sito prima del meta titolo della pagina. Questo può far apparire il vostro sito web come legittimo e affidabile.
Come creare una favicon per il vostro blog WordPress
Per prima cosa, impariamo a creare una buona favicon per il vostro blog.
La dimensione ideale della favicon di WordPress è un’immagine quadrata di massimo 512 pixel sia in larghezza che in altezza. Il formato dell’immagine favicon può essere ICO, JPEG, PNG o GIF.
Anche SVG è un formato comune per le favicon, ma non è accettato da WordPress per impostazione predefinita. Tuttavia, è possibile configurare WordPress per consentire l’aggiunta di file SVG.
Se gestite un blog aziendale, potete utilizzare il logo del vostro marchio come icona favicon. Se non ne avete ancora uno, date un’occhiata alla nostra guida per principianti su come creare un logo per il vostro sito web.
Se avete un logo già pronto ma volete rendere lo sfondo trasparente, potete usare Photoshop o uno strumento di modifica delle immagini gratuito con rimozione automatica dello sfondo. Assicuratevi che il formato del file sia PNG per mantenere la trasparenza della favicon.
Un’altra opzione che potete utilizzare è un generatore di favicon gratuito come Favicon.io. Questo strumento consente di personalizzare una favicon da zero e di scaricare i file in formato PNG e ICO.
Detto questo, vediamo come aggiungere facilmente una favicon al vostro blog WordPress. Verranno illustrati 4 metodi e potete cliccare sui link sottostanti per passare al metodo che desiderate utilizzare:
Metodo 1: Aggiungere una favicon utilizzando il Customizer di WordPress
Questo è il metodo più semplice per cambiare una favicon in WordPress. Tutto ciò che dovete fare è caricare l’immagine della favicon nel Customizer di WordPress e il resto sarà fatto da voi.
Il primo passo è accedere al Customizer di WordPress. Se si utilizza un tema classico, si può navigare in Aspetto ” Personalizzazione per farlo.
Se state utilizzando un tema a blocchi e non riuscite a trovare il Customizer, consultate la nostra guida su come risolvere la mancanza del Theme Customizer nell’amministrazione di WordPress.
Successivamente, fare clic sulla scheda “Identità del sito” nella barra laterale sinistra.
Qui sono disponibili le opzioni per personalizzare il logo del sito, il titolo del sito, la tagline e l’icona del sito.
Se si desidera aggiungere la favicon di un sito, è necessario scorrere fino alla sezione “Icona del sito” e fare clic su “Seleziona icona del sito”.
A questo punto apparirà la libreria multimediale di WordPress. È possibile selezionare un’immagine esistente o caricare una nuova favicon personalizzata dal proprio computer.
In questo esempio, utilizzeremo il logo di WPBeginner come icona del sito WordPress.
Dopo aver scelto un’immagine, fare clic sul pulsante “Seleziona” nell’angolo inferiore destro della finestra.
Se la favicon è più grande delle dimensioni consigliate, WordPress vi permetterà di ritagliarla. Se invece corrisponde esattamente alle dimensioni consigliate, potete lasciarla così com’è.
Una volta che l’immagine appare corretta, fare clic su “Ritaglia immagine”.
Dopodiché, verrete riportati al Customizer di WordPress. A questo punto, tutto ciò che dovete fare è fare clic sul pulsante “Pubblica” nella barra laterale sinistra per terminare la configurazione della favicon.
Ecco fatto! Ora che avete caricato la vostra favicon, potete visitare il vostro sito WordPress per vedere se l’immagine è già attiva.
Metodo 2: Aggiungere una favicon utilizzando l’editor completo del sito di WordPress
Se utilizzate un tema a blocchi e volete aggiungere il logo del vostro marchio sia come parte dell’intestazione del sito che come icona del sito, questo metodo fa al caso vostro.
A tal fine, è necessario andare su Aspetto ” Editor dal pannello di amministrazione di WordPress.
In questa pagina si trovano diversi menu per personalizzare il sito web, tra cui Navigazione e Stili.
Per questa esercitazione, è necessario fare clic su “Modelli” per accedere al modello di blocco dell’intestazione del sito web.
Scorrendo verso il basso, si vedranno diverse parti del modello: Intestazione, Piè di pagina e Generale.
Basta fare clic sul modello “Intestazione” per aggiungere la favicon.
Successivamente, accanto al testo dell’intestazione, apparirà un pulsante a forma di matita.
Fare clic su di esso per modificare il modello e inserire la favicon di WordPress.
Ora siete all’interno dell’esperienza di modifica completa di WordPress.
A questo punto, fare clic sul pulsante Aggiungi blocco ‘+’ e cercare il blocco Logo del sito. Qui si aggiungerà l’immagine che diventerà la favicon di WordPress.
Trascinare e rilasciare il blocco nella posizione desiderata nell’intestazione. In questo esempio, lo abbiamo posizionato accanto al titolo del sito.
La prossima cosa da fare è cliccare sull’icona di caricamento nel blocco Logo del sito.
Come per il metodo precedente, è possibile scegliere un’immagine esistente o caricarne una nuova dalla libreria multimediale di WordPress.
Dopodiché, è necessario passare alla barra laterale delle impostazioni del blocco sul lato destro della pagina. Attivare l’impostazione “Usa come icona del sito” per aggiungere il logo come favicon.
Infine, è possibile premere il pulsante “Salva” nell’angolo in alto a destra della pagina per pubblicare la favicon.
Verrà visualizzato un avviso che indica che la modifica interesserà l’intero sito web. Assicurarsi che la casella “Icona” sia selezionata e fare nuovamente clic su “Salva”.
Dopo aver eseguito tutti i passaggi, è possibile aprire il sito web per confermare che la modifica è avvenuta con successo.
Metodo 3: Aggiungere una favicon utilizzando un plugin per le favicon di WordPress
Se preferite utilizzare un plugin per le favicon di WordPress, potete seguire questo metodo per utilizzare il plugin gratuito Favicon by RealFaviconGenerator.
Per prima cosa, è necessario installare e attivare il plugin. Per maggiori dettagli, seguite la nostra guida su come installare un plugin di WordPress.
Una volta attivata, andate su Aspetto ” Favicon nella vostra dashboard di WordPress.
Successivamente, fare clic sul pulsante “Seleziona dalla libreria multimediale” per caricare una nuova immagine o utilizzarne una esistente.
Si noti che è necessario utilizzare un’immagine quadrata. Il plugin raccomanda che le dimensioni dell’icona del sito siano di almeno 260 pixel sia in larghezza che in altezza, ma non inferiori a 70 pixel.
Una volta scelta l’immagine, è sufficiente premere il pulsante “Genera favicon”.
Successivamente, il plugin vi condurrà al sito web RealFaviconGenerator per modificare la favicon.
È possibile personalizzare varie impostazioni, come il colore dello sfondo e l’aspetto delle pagine dei risultati di ricerca di Google (SERP), iOS, Android, macOS Safari, Chrome e Windows Metro.
Nella sezione “Opzioni del generatore di favicon”, è possibile selezionare la casella se il sito web utilizzava già una favicon. In caso affermativo, è sufficiente inserire un numero nel secondo campo per indicare la versione della favicon in uso.
In questo modo, gli utenti che hanno già visitato il vostro sito vedranno la nuova favicon invece di quella vecchia.
Una volta che tutto sembra a posto, non resta che fare clic sul pulsante “Genera le tue favicon e il codice HTML” per aggiungere la favicon al vostro sito WordPress.
Ora la favicon dovrebbe essere attiva. Assicuratevi di mantenere attivo il plugin WordPress favicon, in modo che la favicon sia sempre abilitata.
Metodo 4: Aggiungere manualmente una favicon al vostro blog WordPress
Infine, potete aggiungere una favicon di WordPress al vostro blog modificando manualmente i file di codice del vostro tema.
Questo è utile se il Theme Customizer non ha la sezione “Identità del sito” o se si utilizza un tema a blocchi e si desidera un’immagine favicon diversa dal logo del sito.
Il modo più semplice e sicuro per modificare i file di codice del tema è il plugin WPCode.
WPCode è il miglior plugin per gli snippet di codice per i principianti. Con oltre 100 snippet già pronti e una gestione sicura degli errori, consente di inserire in modo sicuro codice personalizzato senza interrompere il sito web.
Inoltre, il bello di WPCode è che se si aggiorna il tema, non si perdono le modifiche al codice, compresa la favicon.
Per questa guida è possibile utilizzare la versione gratuita di WPCode. Tuttavia, con l’abbonamento Pro, si ha accesso a funzioni come la logica condizionale intelligente e le integrazioni di terze parti per gestire il codice in modo più efficiente.
Per iniziare, è necessario installare e attivare WPCode. Per maggiori informazioni, potete consultare la nostra guida passo-passo su come installare un plugin di WordPress.
La cosa successiva da fare è preparare i file favicon. A tale scopo, potete utilizzare un generatore di favicon gratuito come Favicon.io.
Sul sito web, è possibile fare clic su “Immagine” per convertire un file immagine in un file zip e in un codice HTML. In alternativa, è possibile utilizzare l’opzione Emoji o Testo per creare una favicon utilizzando le emoji e i font disponibili.
Nella pagina successiva, è possibile caricare l’immagine. Quindi, fare clic su “Download” per salvare il file zip della favicon, che contiene i file favicon.png e favicon.ico.
Assicuratevi di tenere aperta questa pagina web durante le fasi successive.
Ora è necessario caricare il file zip della favicon nella directory principale del sito. A tale scopo, potete utilizzare il file manager del vostro hosting WordPress.
In alternativa, potete farlo tramite un client FTP come FileZilla. Per maggiori dettagli, consultate la nostra guida per principianti su come usare FTP per caricare file su WordPress.
Una volta aperti i file del sito web tramite il file manager o l’FTP, navigare nella directory principale.
La directory principale di WordPress è solitamente una cartella denominata “public” o “public_html” e contiene cartelle essenziali di WordPress come wp-content e wp-admin.
A questo punto, è possibile estrarre e caricare tutti i contenuti dei file favicon scaricati in precedenza nella directory principale.
Se si utilizza File Manager, è possibile fare clic sul pulsante “Carica” vicino alla parte superiore.
Apparirà quindi una nuova scheda che chiederà di caricare i file.
In questa pagina è possibile fare clic sul pulsante “Seleziona file” e scegliere tutti i file favicon.
A questo punto, è sufficiente attendere che i file vengano caricati con successo.
Una volta fatto, si può tornare alla scheda Gestione file. Dovreste ora vedere tutti i vostri file favicon nella directory principale, come nella schermata qui sotto:
Ora torniamo al pannello di amministrazione di WordPress.
Nella barra laterale sinistra, spostarsi su Code Snippets ” Header & Footer.
Dopodiché, tornate alla scheda Favicon.io di prima.
Quindi, è necessario copiare il codice HTML da lì. Il codice dovrebbe contenere 4 tag rel di collegamento .
Successivamente, è necessario tornare a WordPress e incollare il codice nella sezione “Header” della pagina WPCode. Questo aggiungerà il codice al file header.php del vostro sito web.
Nel codice, inserire l’URL completo del sito web tra virgolette accanto a tutti gli attributi href, come nell’esempio seguente. Ricordarsi di aggiungere http:// o https:// se il sito utilizza un certificato SSL.
Infine, fare clic sul pulsante “Salva modifiche” nell’angolo in alto a destra.
E questo è quanto! Non dimenticate di visitare il vostro sito web per verificare se la modifica della favicon ha avuto successo.
Perché la mia favicon di WordPress non viene visualizzata?
Un motivo per cui la favicon di WordPress potrebbe non essere visualizzata è dovuto alla cache del browser. Ciò significa che il browser sta ancora visualizzando la vecchia versione del sito.
Per risolvere questo problema, è necessario cancellare la cache. Se avete bisogno di aiuto, potete seguire la nostra guida su come cancellare la cache del browser.
È anche possibile che si utilizzi un servizio CDN che memorizza ancora la vecchia versione del sito. In questo caso, è necessario eliminare la cache del CDN per aggiornare i contenuti del sito.
Potete aprire il vostro sito web in modalità Incognito o in una finestra di navigazione privata per verificare se l’icona del vostro sito WordPress è stata caricata.
Se l’installazione della favicon non è andata a buon fine, si può provare a ricaricare l’immagine con un nome di file diverso per risolvere il problema.
Anche la funzione icona del vostro sito WordPress potrebbe non funzionare a causa di un errore di contenuto misto. Per risolvere questo problema, consultate la nostra guida su come risolvere gli errori di contenuto misto di WordPress.
In alcuni casi, potreste anche scoprire che il vostro sito web visualizza la favicon del vostro provider di hosting anziché la vostra. In questo caso, contattare il team di assistenza può aiutare a risolvere il problema.
Vi consigliamo di scegliere un servizio di hosting WordPress affidabile e con un’eccellente assistenza clienti per risolvere efficacemente problemi come questo. Potete consultare il nostro elenco dei migliori provider di hosting WordPress per trovare l’opzione migliore per il vostro sito web.
Infine, potreste voler verificare se il vostro tema WordPress ha uno strumento specifico per caricare una favicon. Questo può spiegare perché i metodi di cui sopra non funzionano.
Speriamo che questo articolo vi abbia aiutato ad aggiungere una favicon al vostro sito WordPress. Potreste anche voler consultare la nostra guida sui migliori creatori di loghi gratuiti che vi aiuteranno ad avere un aspetto da professionisti o la nostra selezione di esperti dei plugin WordPress indispensabili per far crescere il vostro sito web.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Hajjalah
This article was so helpful for me because I was wondering why other websites logos are present in search results while mine wasn’t there. When I used “Method 1: Adding a Favicon Using the WordPress Customizer” Google was the only engine showing up, I also used “Method 3: Adding a Favicon Using a WordPress Favicon Plugin” and then Yandex search started showing up but, Bing search results failed to show my Favicon. I don’t know why?
WPBeginner Support
If you did a search recently after changing your Favicon, the most likely reason would be that the search engine had yet to recrawl your site.
Admin
mohadese esmaeeli
In my opinion, having a favicon can attract the audience’s attention and add a stylish and aesthetic touch to the website in the browser. Perhaps it can capture the viewer’s gaze and be a distinctive feature.
mohadese esmaeeli
Hello. The favicon section of my website is not working. Even when I provide the url in the theme settings, it doesn’t show. I also tried from the site ID part, but it gives an error of not processing the image. Can you please guide me on this?
WPBeginner Support
If you are using the built-in option for your theme then we would first recommend reaching out to your theme’s support as they may have a specific requirement for the favicon image using their tool.
Admin
Jiří Vaněk
The last time I uploaded a favicon to a website, I struggled for a really long time with the icon not showing up on the website. I cleared the browser cache and wordpress itself and it didn’t help. She didn’t show up on her own until a few hours later. If someone is having trouble with it, the cache can be in many places. CDN, on the network element at home, on the server. So sometimes it’s good to just wait a while and not stress right away. Otherwise, the Favicon is a small thing, but it is a great way to customize your own page.
WPBeginner Support
Having a favicon can help with your SEO as well as to help users remember your site but it is not required and the first favicon you set can be changed to a different one later on.
Admin
Peter Iriogbe
Now I see why site owners stick to using Favicon which looks the same as their site logo.
Peter Iriogbe
Is it a must to upload a favicon or does it influence ranking on search?
Jiří Vaněk
Favicon is not necessary and does not affect SEO and search in any way. It is the personalization of the page. A favicon is great in two ways. If someone adds your page to their favorites, they will immediately recognize it by the favicon and do not have to search for a long time. The second great thing is when you have multiple pages open in your browser. You can also recognize the given page immediately by the favicon. So I definitely recommend having it, even if it doesn’t really affect SEO and search itself.
mohadese esmaeeli
Exactly, I agree. I’ve experienced the same issue. Often, when searching, I open various websites, and after an hour, I realize I have many tabs open in the Chrome browser, right in front of my eyes! However, having a favicon helps me quickly locate my desired site among the numerous tabs.
Javi
second alternative worked, thanks
WPBeginner Support
Glad to hear it worked
Admin
Meer Hamza
Is it manadatory to upload favicon at wordpress website in ICO file format.
WPBeginner Support
No, it does not need to be an ico format.
Admin
Meer Hamza
1-Is it ok to just upload site Icon from theme>customize>site Icon. Will it show as favicon?
2-I upload site Icon on wordpress website. Is it necessary to show Favicon at URL website.com/favicon
WPBeginner Support
1. Yes it is fine to upload it from there
2. It is not necessary but it can be helpful for finding the favicon later.
Admin
Alex Perry
Thanks, after 2 hours of searching I finally found it. How to change the site icon…
WPBeginner Support
Glad our guide allowed you to add it instead of needing to search further
Admin
Ben
I think this needs an update. I tried this and there’s no “Site Identity” tab under Appearance > Customize
WPBeginner Support
Your specific theme may have a custom editor or if you are using the block editor you could add the site logo block, set an image, and in the block’s settings have that set as the site’s favicon.
Admin
FAIZ
what a great guide, really it’s very helpful
WPBeginner Support
Happy to hear our guide was helpful
Admin
Max Anderson
What does the WPBeginner favicon represent?
WPBeginner Support
Our blob is a simple design of a face smiling using an exclamation point and parenthesis
Admin
AL
Hi, what to do when Favicon is not showing on chromium-based browser and shows up in Firefox.
WPBeginner Support
You would normally want to clear your site’s cache as well as try setting the favicon again for a common reason.
Admin
John
I’m new to this so would appreciate some guidance with favicon. The website I’m trying to look after needs the favicon changing. Can I load a new image as a favicon that will overwrite the favicon currently on the pages or must i delete the current one then load a new image?
Thanks for any reply
WPBeginner Support
You would want to reach out to the support for your specific theme for if your theme has this option.
Admin
Ray
I was fine on the video until you said “click on site identity”… there is no such tab on my version. The first option is “Global” then Header, Breadcrumb, UberMenu{main], Blog, etc. No “Site Identity”…so obviously without being to get to that screen I’m not going anywhere. Is there another way in?
WPBeginner Support
If your theme has different settings and you are unable to find the favicon in the customization settings, you would want to reach out to the support for your specific theme to see if they have it located in a theme-specific area.
Admin
Krishna
Hii Wpbeginner!
I’m using Astra theme my website Favicon is working every one except Google search results. How can I fixed it?
WPBeginner Support
You would need to wait for Google at the moment.
Admin
Soul sultan
This is the awesome guide about how to add favicon on wodpress blog
WPBeginner Support
Thank you, glad you found our content helpful
Admin
Shomirul Islam Bonny
Thanks! It helped me!
WPBeginner Support
You’re welcome, glad it helped
Admin
Munendra Singh
all helpful post,, thanks
WPBeginner Support
Glad you found our post helpful
Admin
Raj
Great ! I always go through from your tutorials when ever i get stuck in any kind of issue. Thanks for it.
WPBeginner Support
Thanks, glad our articles could help
Admin
John Barson
Can’t Add a Favicon to Your WordPress Website? That was my problem. I did a fair bit of research where I finally found my issue. It was because the PHP GD Library was not enabled. Fortunately, I control my own server. I had upgraded the server PHP to v7.2 but I forgot to enable the PHP GD library. So…if you find when you try to add the site icon in the appearances section of your wordpress admin and the image you upload/select is not being accepted or you can’t use the crop image feature it is most likely because your webserver host has not enabled the GD Library.
WPBeginner Support
Thanks for sharing this information should someone else run into that issue
Admin
Cean Herzfield
Thank you so much! You saved me a lot of frustration because I’m working on Xampp and it was disabled by default. Now wouldn’t it have been nice if they had mentioned it in the article.
Pritam
Favicon of my website was visible before I changed DNS for Cloudflare. Now it is visible in the admin side but not on the website. How to solve this problem. you can check on my website
Michele A
This tutorial was wonderful! Thank you so much for the great work!
Jacques
My Favicon is updating in ADMIN side, but not on user side
Tracy
Were you able to figure out how to fix it?
RAJ
“When I go to the “Site Identity” tab, there is no place to upload a site icon. The only option I have is the “Site Title”. That’s ALL!
I am using WordPress 4.7.3.”
Bekzat Sadykov
I guess, the WP theme you are using doesn’t have favicon implemented. So, if it is not declared in theme functions.php file, it won’t appear in admin/editor side.
You can hardcode it to header.php or use third-part plugins.
jacob
scroll down a little you will see the place to upload your favicon
Eleanor
Hi, I recently updated my website from HTTP to HTTPS and when that happened, the site icon stopped working. Does this mean that somewhere along the line I’ve missed a step? I’ve tried changing the image and reuploading a new one and that hasn’t worked. If someone types in the website URL using http then the old favicon (and not site icon) shows up, but the minute it’s https, then it disappears. The site icon though is visible when I’m logged into the dashboard.
Matt Parker
Eleanor
I’m on HTTPS and I have the same issue, did you find a solution?
Favicon only shows when I’m logged in in admin mode!
Jimmy
When I go to the “Site Identity” tab, there is no place to upload a site icon. The only option I have is the “Site Title”. That’s ALL!
I am using WordPress 4.7.3.
Please help!
Ahmed Akeem
I guess, the WP theme you are using doesn’t have favicon implemented. So, if it is not declared in theme functions.php file, it won’t appear in admin/editor side.
You can hardcode it to header.php or use third-part plugins.
Abubakar Sahabi Rafi
It really helped, more grease to our elbow.
Tim
Can anyone tell me how this new “Site Icon” feature is supposed to work? I get to the point where the file is uploaded and I get a dialog box that offers to crop the image. The problem is 1) my image doesn’t need to be cropped and 2) there’s no “Save” button (or “Done” or anything similar), only a “Crop” button and the upper right corner X to close the dialog. If I click “Crop” I get an error (Error cropping this image, bla bla bla) and if I hit the X it closes. Either way, my image is not saved as a Site Icon (even though it is saved in the media library. After deleting the image, resizing it to exactly 512×512, I upload it again. This time, no crop dialog, just the “Select” image dialog. I click select, the image has a box around it and a check mark and nothing else happens. No Save, etc. When I close the dialog, there’s still “No image selected.” This happens in Chrome AND Firefox. I’m ready to throw WordPress away and hand code everything. I haven’t used WordPress in a couple of years and I’m frustrated with what seems like buggy, poor design and feature bloat.
Brian
code easy to interpret, it worked out. thanks…