{"id":75052,"date":"2025-08-29T12:24:06","date_gmt":"2025-08-29T10:24:06","guid":{"rendered":"https:\/\/supporthost.com\/it\/?p=75052"},"modified":"2026-01-15T17:06:27","modified_gmt":"2026-01-15T16:06:27","slug":"favicon-wordpress","status":"publish","type":"post","link":"https:\/\/supporthost.com\/it\/favicon-wordpress\/","title":{"rendered":"Come creare la favicon e aggiungerla su WordPress"},"content":{"rendered":"\n<p>Non sai come mostrare la favicon sul tuo sito WordPress o hai dubbi sulle <strong>dimensioni <\/strong>e il <strong>formato <\/strong>da usare? <\/p>\n\n\n\n<p>In questa guida vedremo tutto quello che c&#8217;\u00e8 da sapere per <strong>inserire correttamente la favicon <\/strong>sul tuo sito. E, se non hai ancora un&#8217;immagine adatta da usare come favicon, vedremo anche <strong>come crearla<\/strong> a partire dal logo o dall&#8217;immagine che hai scelto.<\/p>\n\n\n\n<p>Iniziamo!<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Indice<\/h2><nav><ul><li><a href=\"#cose-una-favicon\">Cos&#8217;\u00e8 una favicon?<\/a><\/li><li><a href=\"#come-creare-una-favicon-per-un-sito-word-press\">Come creare una favicon per un sito WordPress<\/a><ul><li><a href=\"#favicon-dimensioni-e-formato\">Favicon: dimensioni e formato<\/a><\/li><li><a href=\"#come-si-crea-una-favicon\">Come si crea una favicon?<\/a><ul><li><a href=\"#creare-la-favicon-con-un-programma-di-editing-di-immagini\">Creare la favicon con un programma di editing di immagini<\/a><\/li><li><a href=\"#creare-la-favicon-con-un-generatore-online\">Creare la favicon con un generatore online<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#come-aggiungere-una-favicon-su-word-press\">Come aggiungere una favicon su WordPress<\/a><ul><li><a href=\"#aggiungere-la-favicon-dalle-impostazioni-di-word-press\">Aggiungere la favicon dalle impostazioni di WordPress<\/a><\/li><li><a href=\"#aggiungere-la-favicon-su-word-press-tema-classico\">Aggiungere la favicon su WordPress (tema classico)<\/a><\/li><li><a href=\"#aggiungere-la-favicon-su-word-press-tema-a-blocchi\">Aggiungere la favicon su WordPress (tema a blocchi)<\/a><\/li><li><a href=\"#aggiungere-la-favicon-manualmente\">Aggiungere la favicon manualmente<\/a><ul><li><a href=\"#passo-1-generare-la-favicon-e-caricarla-sul-sito\">Passo 1: generare la favicon e caricarla sul sito<\/a><\/li><li><a href=\"#passo-2-modificare-il-tag-head-del-sito\">Passo 2: modificare il tag head del sito<\/a><\/li><\/ul><\/li><li><a href=\"#usare-un-plugin-per-aggiungere-la-favicon\">Usare un plugin per aggiungere la favicon<\/a><\/li><\/ul><\/li><li><a href=\"#cosa-fare-se-la-favicon-non-si-vede\">Cosa fare se la favicon non si vede<\/a><\/li><li><a href=\"#conclusioni\">Conclusioni<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cose-una-favicon\">Cos&#8217;\u00e8 una favicon?<\/h2>\n\n\n\n<p>Anche se magari non ne conosci il nome, avrai visto centinaia se non migliaia di <strong>favicon <\/strong>finora.<\/p>\n\n\n\n<p>Quando apri una nuova scheda nel browser vedrai <strong>una piccola icona<\/strong> che compare a sinistra del titolo della pagina, quell&#8217;icona si chiama favicon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"571\" height=\"108\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-nelle-schede-browser.png\" alt=\"Favicon Nelle Schede Browser\" class=\"wp-image-75053\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-nelle-schede-browser.png 571w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-nelle-schede-browser-300x57.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-nelle-schede-browser-120x23.png 120w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/figure>\n\n\n\n<p>Lo scopo della favicon \u00e8 rendere il sito riconoscibile anche quando abbiamo pi\u00f9 schede del browser aperte, ma non solo.<\/p>\n\n\n\n<p>Come saprai, puoi aggiungere pagine e siti web ai tuoi <strong>preferiti<\/strong> e, in base anche al browser che stai usando, spesso ti verranno suggeriti i siti che apri pi\u00f9 di frequente. Ti riporto alcuni esempi di Google Chrome come riferimento.<\/p>\n\n\n\n<p>Qui puoi vedere come appare la favicon nelle <strong>scorciatoie<\/strong> suggerite da Chrome:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"790\" height=\"460\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/scorciatoie-google-chrome-favicon.png\" alt=\"Scorciatoie Google Chrome Favicon\" class=\"wp-image-75054\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/scorciatoie-google-chrome-favicon.png 790w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/scorciatoie-google-chrome-favicon-300x175.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/scorciatoie-google-chrome-favicon-768x447.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/scorciatoie-google-chrome-favicon-108x63.png 108w\" sizes=\"auto, (max-width: 790px) 100vw, 790px\" \/><\/figure>\n\n\n\n<p>In questo altro esempio, puoi vedere come appaiono le favicon nella <strong>barra dei preferiti<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"514\" height=\"93\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/esempio-favicon-barra-preferiti-chrome.png\" alt=\"Esempio Favicon Barra Preferiti Chrome\" class=\"wp-image-75055\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/esempio-favicon-barra-preferiti-chrome.png 514w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/esempio-favicon-barra-preferiti-chrome-300x54.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/esempio-favicon-barra-preferiti-chrome-120x22.png 120w\" sizes=\"auto, (max-width: 514px) 100vw, 514px\" \/><\/figure>\n\n\n\n<p>Anche quando facciamo una <strong>ricerca su Google<\/strong>, vediamo accanto al nome del sito la sua favicon:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"891\" height=\"250\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-nella-serp.png\" alt=\"Favicon Nella Serp\" class=\"wp-image-75056\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-nella-serp.png 891w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-nella-serp-300x84.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-nella-serp-768x215.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-nella-serp-120x34.png 120w\" sizes=\"auto, (max-width: 891px) 100vw, 891px\" \/><\/figure>\n\n\n\n<p>In tutte queste circostanze, la favicon \u00e8 sempre protagonista perch\u00e9 ti permette di associare rapidamente l&#8217;icona al sito, senza neanche dover leggere il nome.<\/p>\n\n\n\n<p>Anche se gli esempi che ti ho mostrato qui sopra riguardano la navigazione da desktop, lo stesso si applica quando navighiamo dallo smartphone.<\/p>\n\n\n\n<p><em>A cosa serve quindi la favicon?<\/em> <\/p>\n\n\n\n<p>In parole povere a rendere il sito riconoscibile. Detto questo, vediamo come fare a<strong> crearne una<\/strong> per poi <strong>inserirla <\/strong>sul nostro sito WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-creare-una-favicon-per-un-sito-word-press\">Come creare una favicon per un sito WordPress<\/h2>\n\n\n\n<p>Prima di vedere come fare a creare nella pratica una favicon, facciamo una piccola premessa sulle <strong>dimensioni<\/strong> e sul <strong>formato<\/strong> immagine da utilizzare.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"favicon-dimensioni-e-formato\">Favicon: dimensioni e formato<\/h3>\n\n\n\n<p>Per quanto riguarda i siti WordPress, la dimensione ideale della favicon \u00e8 di <strong>512 x 512 pixel<\/strong>. Si suggerisce la massima risoluzione in base alle <a href=\"https:\/\/web.dev\/articles\/add-manifest?hl=it#splash-screen\" rel=\"noopener\">raccomandazioni per gli sviluppatori<\/a> rilasciate da Google per far s\u00ec che l&#8217;icona si veda correttamente su tutti i dispositivi. <\/p>\n\n\n\n<p>Tieni presente che ogni browser ha dimensioni &#8220;preferite&#8221; diverse per le favicon. Per esempio il minimo per Chrome \u00e8 192&#215;192, mentre Apple raccomanda di usare queste dimensioni:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>120\u00d7120: iPhone<\/li>\n\n\n\n<li>152\u00d7152: iPad<\/li>\n\n\n\n<li>167\u00d7167: iPad Retina<\/li>\n\n\n\n<li>180\u00d7180: iPhone Retina<\/li>\n<\/ul>\n\n\n\n<p>Tutte le favicon sono <strong>quadrate<\/strong>, per questo si utilizza un logo semplice come ad esempio un <strong>pittogramma<\/strong> invece che l&#8217;associazione pittogramma e logotipo (con la parte testuale ed estesa del logo).<\/p>\n\n\n\n<p>Per quanto riguarda il <strong>formato<\/strong>, una favicon da aggiungere su WordPress pu\u00f2 avere nella maggior parte dei casi estensioni <em>ICO<\/em>, <em>PNG <\/em>e <em><a href=\"https:\/\/supporthost.com\/it\/jpeg-vs-jpg\/\">JPEG\/JPG<\/a><\/em>. Tra questi \u00e8 meglio utilizzare il formato ICO o PNG rispetto a quello JPEG che pu\u00f2 avere problemi di compatibilit\u00e0 con alcuni browser, oltre a non essere un formato adatto da utilizzare per loghi e icone.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"come-si-crea-una-favicon\">Come si crea una favicon?<\/h3>\n\n\n\n<p>Ci sono diversi metodi per creare una favicon. Se stai creando la favicon per il tuo sito aziendale o personale ed hai gi\u00e0 un logo, puoi partire da quello.<\/p>\n\n\n\n<p>Vediamo quali programmi puoi utilizzare per <strong>trasformare il tuo logo in un&#8217;icona<\/strong>.<\/p>\n\n\n\n<p>Le opzioni principali sono: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>un programma di modifica delle immagini;<\/li>\n\n\n\n<li>un tool onine.<\/li>\n<\/ul>\n\n\n\n<p class=\"note\">Suggerimento: se ancora non hai un logo, dai un&#8217;occhiata alla lista degli strumenti che puoi usare per <a href=\"https:\/\/supporthost.com\/it\/creare-logo\/\">creare il tuo logo<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"creare-la-favicon-con-un-programma-di-editing-di-immagini\">Creare la favicon con un programma di editing di immagini<\/h4>\n\n\n\n<p>Se sai utilizzare strumenti di editing di immagini e foto come Photoshop e simili, puoi creare la favicon in formato png in maniera abbastanza semplice.<\/p>\n\n\n\n<p>Ti basta aprire il logo e modificarlo cos\u00ec:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>rimuovere l&#8217;eventuale sfondo, in modo che il logo abbia uno <strong>sfondo trasparente<\/strong>;<\/li>\n\n\n\n<li>ritagliare e ridimensionare l&#8217;immagine in modo che abbia un <strong>formato quadrato<\/strong>;<\/li>\n\n\n\n<li>salvare l&#8217;immagine in <strong>PNG <\/strong>(in questo modo si mantiene la trasparenza).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"creare-la-favicon-con-un-generatore-online\">Creare la favicon con un generatore online<\/h4>\n\n\n\n<p>In alternativa al metodo che abbiamo appena visto, puoi anche usare un <strong>generatore online<\/strong> per creare la favicon a partire dal logo.<\/p>\n\n\n\n<p>Ci sono diversi strumenti (controlla la lista sotto), ai fini di questa guida ti mostrer\u00f2 come usare <a href=\"https:\/\/realfavicongenerator.net\/\" rel=\"noopener\">RealFaviconGenerator<\/a>. Si tratta di un generatore online molto facile da usare:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>carichi il logo da usare (deve essere gi\u00e0 ritagliato precedentemente nel caso in cui ci sia pittogramma e logotipo esteso);<\/li>\n\n\n\n<li>personalizzi l&#8217;icona, ad esempio aggiungendo uno sfondo e definendo i bordi;<\/li>\n\n\n\n<li>puoi personalizzare l&#8217;aspetto dell&#8217;icona su iOS, come web app e anche creare una versione diversa del logo per la versione <em>dark<\/em> del tema;<\/li>\n\n\n\n<li>all&#8217;ultimo step devi inserire il percorso dell&#8217;icona sul tuo sito, vale a dire la cartella in cui caricherai le icone.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"526\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/realfavicongenerator-esempio-creazione-favicon-1024x526.png\" alt=\"Realfavicongenerator Esempio Creazione Favicon\" class=\"wp-image-75057\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/realfavicongenerator-esempio-creazione-favicon-1024x526.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/realfavicongenerator-esempio-creazione-favicon-300x154.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/realfavicongenerator-esempio-creazione-favicon-768x395.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/realfavicongenerator-esempio-creazione-favicon-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/realfavicongenerator-esempio-creazione-favicon-1536x789.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/realfavicongenerator-esempio-creazione-favicon.png 1750w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Procedendo cliccando su &#8220;Next&#8221;, ti verranno fornite:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>il pacchetto con le varie icone, create in base alle opzioni che hai scelto.<\/li>\n\n\n\n<li>Il percorso in cui dovrai scompattare il file contenente le icone.<\/li>\n\n\n\n<li>Il codice da inserire nella sezione &#8220;<code>&lt;head&gt;<\/code>&#8221; del tuo sito web.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/creare-favicon-con-realfavicongenerator-1024x486.png\" alt=\"Creare Favicon Con Realfavicongenerator\" class=\"wp-image-75058\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/creare-favicon-con-realfavicongenerator-1024x486.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/creare-favicon-con-realfavicongenerator-300x142.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/creare-favicon-con-realfavicongenerator-768x365.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/creare-favicon-con-realfavicongenerator-120x57.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/creare-favicon-con-realfavicongenerator-1536x729.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/creare-favicon-con-realfavicongenerator.png 1630w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo averlo fatto, potrai anche verificare se l&#8217;icona \u00e8 caricata correttamente inserendo il link del tuo sito nel punto 4 e cliccando su &#8220;Check&#8221;.<\/p>\n\n\n\n<p>Alternative per creare la favicon online: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/favicon.io\/\" rel=\"noopener\">Favicon.io<\/a> &#8211; si usa direttamente online e ti permette di generare la tua favicon partendo da: un file png, un testo o un&#8217;emoji. Il funzionamento \u00e8 simile allo strumento che abbiamo visto prima, carichi l&#8217;immagine (o scegli testo o emoji) e poi generi i file che dovrai posizionare poi nel tuo sito WordPress come vedremo nei paragrafi successivi.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.favicon-generator.org\/\" rel=\"noopener\">Favicon-generator<\/a> &#8211; oltre a permetterti di caricare il tuo file immagine (png, jpg o gif) da convertire in favicon, ti permette anche di scegliere tra una galleria di icone gi\u00e0 pronte.<\/li>\n<\/ul>\n\n\n\n<p class=\"note\">Non preoccuparti se ora i passaggi per caricare la favicon non ti sembrano chiari, nel prossimo paragrafo vedremo come aggiungerla su un sito WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-aggiungere-una-favicon-su-word-press\">Come aggiungere una favicon su WordPress<\/h2>\n\n\n\n<p>Ci sono diversi metodi per inserire la favicon su un sito WordPress.<\/p>\n\n\n\n<p>In base al metodo che vuoi usare e al tipo di tema che hai, la procedura da seguire \u00e8 leggermente diversa.<\/p>\n\n\n\n<p>In casi particolari, puoi scegliere se caricare la favicon manualmente oppure utilizzare un plugin per generarla e inserirla.<\/p>\n\n\n\n<p>Riassumendo hai queste alternative:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>aggiungere la favicon dalle <strong>impostazioni <\/strong>di WordPress (dalla versione 6.5 in poi);<\/li>\n\n\n\n<li>aggiungere la favicon <strong>dall&#8217;editor <\/strong>di WordPress;\n<ul class=\"wp-block-list\">\n<li>metodo per tema classico;<\/li>\n\n\n\n<li>metodo per tema a blocchi;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>usare un plugin<\/strong> per gestire la favicon;<\/li>\n\n\n\n<li>aggiungere la favicon <strong>manualmente <\/strong>(inserendola nel tag head delle pagine).<\/li>\n<\/ul>\n\n\n\n<p>Prima di continuare, se non hai ancora un sito WordPress e stai pensando di crearne uno, puoi attivare una <a href=\"https:\/\/my.supporthost.com\/cart.php\/?a=add&amp;domainoption=subdomain&amp;language=italian&amp;pid=17209&amp;cf_software=WordPress\">versione gratuita del nostro hosting WordPress<\/a> per iniziare a fare tutte le prove che vuoi. Il piano di prova si disattiver\u00e0 dopo 14 giorni e per attivarlo baster\u00e0 inserire i tuoi dati, senza carta di credito o altri metodi di pagamento. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aggiungere-la-favicon-dalle-impostazioni-di-word-press\">Aggiungere la favicon dalle impostazioni di WordPress<\/h3>\n\n\n\n<p>Se stai usando una versione di<strong> WordPress successiva alla 6.5<\/strong>, puoi usare il metodo che ti mostro. Questo \u00e8 il sistema pi\u00f9 rapido e facile per personalizzare la favicon del sito. <\/p>\n\n\n\n<p>Dopo essere entrato nella dashboard, clicca su <em>Impostazioni &gt; Generali<\/em>. Qui vedrai la voce &#8220;<strong>Icona del sito<\/strong>&#8220;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"402\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/impostare-favicon-impostazioni-wordpress-1024x402.png\" alt=\"Impostare Favicon Impostazioni WordPress\" class=\"wp-image-75059\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/impostare-favicon-impostazioni-wordpress-1024x402.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/impostare-favicon-impostazioni-wordpress-300x118.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/impostare-favicon-impostazioni-wordpress-768x301.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/impostare-favicon-impostazioni-wordpress-120x47.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/impostare-favicon-impostazioni-wordpress-1536x602.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/impostare-favicon-impostazioni-wordpress.png 1897w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ti basta cliccare su &#8220;<strong>Scegli l&#8217;icona del sito<\/strong>&#8221; e caricare la favicon oppure sceglierla dalla libreria dei media (se l&#8217;hai gi\u00e0 caricata).<\/p>\n\n\n\n<p>Ecco fatto, la tua favicon \u00e8 ora impostata correttamente.<\/p>\n\n\n\n<p>Se, invece, stai usando una versione di WordPress precedente alle 6.5, puoi <a href=\"https:\/\/supporthost.com\/it\/aggiornare-wordpress\/\" data-type=\"post\" data-id=\"23425\">aggiornare WordPress<\/a> o seguire uno dei metodi seguenti per impostare la favicon. In questo caso il metodo da seguire cambia in base al tema: classico o a blocchi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aggiungere-la-favicon-su-word-press-tema-classico\">Aggiungere la favicon su WordPress (tema classico)<\/h3>\n\n\n\n<p>Se stai usando un <strong>tema classico<\/strong> (non a blocchi), puoi inserire la favicon direttamente dall&#8217;editor.<\/p>\n\n\n\n<p>Dopo aver effettuato il <a href=\"https:\/\/supporthost.com\/it\/login-wordpress\/\" data-type=\"post\" data-id=\"64170\">login su WordPress<\/a>, dal menu clicca su <em>Aspetto &gt; Personalizza<\/em>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"362\" height=\"141\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-aspetto-personalizza.png\" alt=\"Wordpress Aspetto Personalizza\" class=\"wp-image-38776\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-aspetto-personalizza.png 362w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-aspetto-personalizza-300x117.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-aspetto-personalizza-120x47.png 120w\" sizes=\"auto, (max-width: 362px) 100vw, 362px\" \/><\/figure>\n\n\n\n<p>Clicca su &#8220;<em>Denominazione del sito<\/em>&#8221; e vedrai la sezione &#8220;<em>Icona del sito<\/em>&#8220;. Da qui puoi direttamente caricare la tua favicon che, come ti suggerisce WordPress, deve avere una dimensione minima (consigliata) di <strong>512 x 512 pixel<\/strong>.<\/p>\n\n\n\n<p>Prima di caricarla potrai anche modificarla per <strong>ritagliarla <\/strong>in modo che sia della misura corretta.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"472\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/ritagliare-favicon-wordpress-1024x472.png\" alt=\"Ritagliare Favicon WordPress\" class=\"wp-image-75060\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/ritagliare-favicon-wordpress-1024x472.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/ritagliare-favicon-wordpress-300x138.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/ritagliare-favicon-wordpress-768x354.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/ritagliare-favicon-wordpress-120x55.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/ritagliare-favicon-wordpress-1536x708.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/ritagliare-favicon-wordpress.png 1833w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo aver completato la modifica, puoi cliccare sul pulsante &#8220;<strong>Pubblica<\/strong>&#8221; in alto per salvare le modifiche.<\/p>\n\n\n\n<p>Seguendo questo procedimento, <strong>WordPress creer\u00e0 automaticamente le versioni della favicon<\/strong> a dimensione differente per mostrarle in base al browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"90\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-diverse-dimensioni-wordpress-1024x90.png\" alt=\"Favicon Diverse Dimensioni WordPress\" class=\"wp-image-75061\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-diverse-dimensioni-wordpress-1024x90.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-diverse-dimensioni-wordpress-300x26.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-diverse-dimensioni-wordpress-768x67.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-diverse-dimensioni-wordpress-120x11.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-diverse-dimensioni-wordpress.png 1358w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aggiungere-la-favicon-su-word-press-tema-a-blocchi\">Aggiungere la favicon su WordPress (tema a blocchi)<\/h3>\n\n\n\n<p>Se utilizzi un <strong>tema a blocchi<\/strong> come Twenty Twenty-Four, puoi usare il <strong>full site editor <\/strong>per mostrare la favicon sul tuo sito.<\/p>\n\n\n\n<p>Dalla dashboard di WordPress, clicca su <em>Aspetto &gt; Editor<\/em>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"401\" height=\"87\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-aspetto-editor.png\" alt=\"Wordpress Aspetto Editor\" class=\"wp-image-38810\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-aspetto-editor.png 401w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-aspetto-editor-300x65.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-aspetto-editor-120x26.png 120w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/figure>\n\n\n\n<p>Quindi fai click su &#8220;Pattern&#8221; e poi su &#8220;Header&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"431\" height=\"513\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/wordpress-editor-blocchi-pattern-header.png\" alt=\"Wordpress Editor Blocchi Pattern Header\" class=\"wp-image-75062\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/wordpress-editor-blocchi-pattern-header.png 431w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/wordpress-editor-blocchi-pattern-header-252x300.png 252w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/wordpress-editor-blocchi-pattern-header-53x63.png 53w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><\/figure>\n\n\n\n<p>Clicca sull&#8217;header per modificarlo e si aprir\u00e0 l&#8217;<strong>editor a blocchi<\/strong>. Qui \u00e8 sufficiente vedere se \u00e8 gi\u00e0 presente il blocco &#8220;Logo del sito&#8221; o in alternativa aggiungerlo (fai click sulla &#8220;+&#8221; per aprire l&#8217;<em>inserter dei blocchi<\/em> e inserisci il blocco &#8220;Logo del sito&#8221;).<\/p>\n\n\n\n<p>Dalle opzioni del blocco sulla destra potrai quindi cliccare sul pulsante &#8220;<strong>Aggiungi media<\/strong>&#8221; e scegliere dalla libreria o caricare la tua favicon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"384\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/aggiungere-favicon-editor-blocchi-wordpress-1024x384.png\" alt=\"Aggiungere Favicon Editor Blocchi WordPress\" class=\"wp-image-75063\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/aggiungere-favicon-editor-blocchi-wordpress-1024x384.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/aggiungere-favicon-editor-blocchi-wordpress-300x113.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/aggiungere-favicon-editor-blocchi-wordpress-768x288.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/aggiungere-favicon-editor-blocchi-wordpress-120x45.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/aggiungere-favicon-editor-blocchi-wordpress-1536x577.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/aggiungere-favicon-editor-blocchi-wordpress.png 1918w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo aver selezionato l&#8217;immagine, assicurati che nelle opzioni del blocco sia attiva l&#8217;opzione &#8220;<strong>Utilizza come icona del sito<\/strong>&#8220;, in questo modo l&#8217;icona verr\u00e0 usata automaticamente come favicon per tutte le pagine del tuo sito.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"417\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-utilizza-come-icona-del-sito-wordpress-1024x417.png\" alt=\"Favicon Utilizza Come Icona Del Sito WordPress\" class=\"wp-image-75064\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-utilizza-come-icona-del-sito-wordpress-1024x417.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-utilizza-come-icona-del-sito-wordpress-300x122.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-utilizza-come-icona-del-sito-wordpress-768x312.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-utilizza-come-icona-del-sito-wordpress-120x49.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-utilizza-come-icona-del-sito-wordpress-1536x625.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-utilizza-come-icona-del-sito-wordpress.png 1898w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Per finire, clicca sul pulsante &#8220;<strong>Salva<\/strong>&#8221; in alto a destra, in modo da salvare le modifiche.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aggiungere-la-favicon-manualmente\">Aggiungere la favicon manualmente<\/h3>\n\n\n\n<p>Se hai generato l&#8217;immagine con un generatore online, come abbiamo visto prima prendendo come esempio <em>RealFaviconGenerator<\/em>, puoi anche inserire in maniera abbastanza semplice la favicon <strong>in modo manuale<\/strong>.<\/p>\n\n\n\n<p>Questo significa che invece di utilizzare l&#8217;editor di personalizzazione o l&#8217;editor a blocchi, per impostare la favicon, faremo <strong>una modifica manuale all&#8217;header <\/strong>del sito WordPress.<\/p>\n\n\n\n<p class=\"note\">Nota: puoi fare esattamente la stessa cosa anche senza aver usato il generatore, ti baster\u00e0 specificare il percorso e il nome dei file delle favicon.<\/p>\n\n\n\n<p>Vediamo come fare passo passo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"passo-1-generare-la-favicon-e-caricarla-sul-sito\">Passo 1: generare la favicon e caricarla sul sito<\/h4>\n\n\n\n<p>Per prima cosa genera le diverse versioni della favicon ad esempio usando il generatore, come spiegato nella prima parte dell&#8217;articolo.<\/p>\n\n\n\n<p>Dopodich\u00e9 dovrai <strong>caricare questi file<\/strong> nella root o in una cartella specifica (ad esempio &#8220;favicon&#8221;) del sito.<\/p>\n\n\n\n<p>In questo esempio qui sotto sto <strong>estraendo il file zip generato con RealFaviconGenerator<\/strong>. Dopo averlo fatto, si pu\u00f2 eliminare il file zip e lasciare solo i file estratti.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"771\" height=\"423\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/estrarre-favicon-da-zip-file-manager.png\" alt=\"Estrarre Favicon Da Zip File Manager\" class=\"wp-image-75065\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/estrarre-favicon-da-zip-file-manager.png 771w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/estrarre-favicon-da-zip-file-manager-300x165.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/estrarre-favicon-da-zip-file-manager-768x421.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/estrarre-favicon-da-zip-file-manager-115x63.png 115w\" sizes=\"auto, (max-width: 771px) 100vw, 771px\" \/><\/figure>\n\n\n\n<p>Per <strong>accedere ai file del sito <\/strong>puoi usare il <a href=\"https:\/\/supporthost.com\/it\/tutorial\/file-manager\/\" data-type=\"tutorial\" data-id=\"17616\">file manager di cPanel<\/a> o collegarti via FTP con un client come <a href=\"https:\/\/supporthost.com\/it\/filezilla\/\" data-type=\"post\" data-id=\"18692\">FileZilla<\/a>. Se non hai mai caricato file sul tuo sito in questo modo, ti basta seguire le guide appena citate per imparare come fare.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"passo-2-modificare-il-tag-head-del-sito\">Passo 2: modificare il tag head del sito<\/h4>\n\n\n\n<p>A questo punto dobbiamo far s\u00ec che WordPress &#8220;sappia&#8221; dove trovare le favicon appena caricate. Per farlo dobbiamo <strong>inserire il codice HTML<\/strong> che vedi poco pi\u00f9 sotto, nel tag <code>&lt;head&gt;<\/code> del nostro sito.<\/p>\n\n\n\n<p>Codice HTML da personalizzare e inserire:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon\/favicon-96x96.png\" sizes=\"96x96\" \/&gt;\n&lt;link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/favicon\/favicon.svg\" \/&gt;\n&lt;link rel=\"shortcut icon\" href=\"\/favicon\/favicon.ico\" \/&gt;\n&lt;link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\/favicon\/apple-touch-icon.png\" \/&gt;\n&lt;link rel=\"manifest\" href=\"\/favicon\/site.webmanifest\" \/&gt;<\/code><\/pre>\n\n\n\n<p>Ci sono diversi modi per inserire il codice HTML nel tag head:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>modificare il file <strong>header.php <\/strong>del tema (usando un tema child);<\/li>\n\n\n\n<li>aggiungere il codice con un plugin come Code Snippets o simili;<\/li>\n\n\n\n<li>creare una funzione custom sfruttando l&#8217;<a href=\"https:\/\/supporthost.com\/it\/hook-wordpress\/\" data-type=\"post\" data-id=\"84714\">hook di WordPress<\/a> <code>wp_head<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Per quanto riguarda il primo metodo, invece di modificare direttamente il file header.php del tema, dovresti <a href=\"https:\/\/supporthost.com\/it\/tema-child\/\" data-type=\"post\" data-id=\"23609\">creare un tema child<\/a>. In questo modo quando aggiornerai il tema, non perderai le modifiche.<\/p>\n\n\n\n<p>In alternativa puoi inserire il codice usando un plugin come <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" rel=\"noopener\">Code Snippets<\/a> in modo da non dover modificare i file del tema.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"417\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-1024x417.png\" alt=\"Code Snippets\" class=\"wp-image-71282\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-1024x417.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-300x122.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-768x313.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-120x49.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-1536x625.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-2048x834.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Per usare Code Snippets segui questi passi:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Aggiungi un nuovo snippet;<\/li>\n\n\n\n<li>clicca su &#8220;contenuto html&#8221;;<\/li>\n\n\n\n<li>incolla il codice:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon\/favicon-96x96.png\" sizes=\"96x96\" \/&gt;\n&lt;link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/favicon\/favicon.svg\" \/&gt;\n&lt;link rel=\"shortcut icon\" href=\"\/favicon\/favicon.ico\" \/&gt;\n&lt;link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\/favicon\/apple-touch-icon.png\" \/&gt;\n&lt;link rel=\"manifest\" href=\"\/favicon\/site.webmanifest\" \/&gt;<\/code><\/pre>\n\n\n\n<p class=\"note\">Attenzione: in questo caso i file sono inseriti nella cartella &#8220;favicon&#8221;, se li carichi direttamente nella root del sito, devi rimuovere &#8220;favicon&#8221; dal percorso. <\/p>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>seleziona &#8220;Visualizza nella sezione head del sito&#8221;;<\/li>\n\n\n\n<li>clicca su &#8220;Salva le modifiche&#8221; per salvare lo snippet.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"408\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/code-snippet-favicon-wordpress-1024x408.png\" alt=\"Code Snippet Favicon WordPress\" class=\"wp-image-75071\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/code-snippet-favicon-wordpress-1024x408.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/code-snippet-favicon-wordpress-300x120.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/code-snippet-favicon-wordpress-768x306.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/code-snippet-favicon-wordpress-120x48.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/code-snippet-favicon-wordpress-1536x613.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/code-snippet-favicon-wordpress.png 1672w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"note\">Nota: il codice HTML di questo esempio \u00e8 stato generato con il generatore online, ma puoi personalizzarlo in base al <strong>nome con cui hai salvato le favicon<\/strong> e al <strong>percorso <\/strong>in cui le hai caricate.<\/p>\n\n\n\n<p>Puoi usare questo stesso sistema anche per aggiungere la favicon manualmente a un sito non WordPress. <\/p>\n\n\n\n<p>Nel caso dei siti non WordPress, ti baster\u00e0 inserire nel tag l&#8217;attributo o gli <a href=\"https:\/\/supporthost.com\/it\/attributo-rel\/\" data-type=\"post\" data-id=\"32555\">attributi rel<\/a> delle favicon, ecco un esempio semplice con una sola favicon:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n\n&lt;link rel=\"icon\" type=\"image\/png\" href=\"https:\/\/domain.com\/favicon\/favicon-96x96.png\" \/&gt;\n\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"usare-un-plugin-per-aggiungere-la-favicon\">Usare un plugin per aggiungere la favicon<\/h3>\n\n\n\n<p>Ho lasciato questo metodo per ultimo perch\u00e9 impostare la favicon \u00e8 davvero <strong>molto semplice<\/strong> e non richiede utilizzare un plugin aggiuntivo. Ad ogni modo per chi volesse comunque utilizzare un plugin, esiste anche questa possibilit\u00e0. Ricordati, per\u00f2, che se usi un plugin per impostare la favicon, <strong>sarai vincolato a tenerlo attivo<\/strong> o la favicon non verr\u00e0 pi\u00f9 mostrata.<\/p>\n\n\n\n<p>Ai fini di questa guida, ti mostrer\u00f2 come usare uno dei plugin creati per impostare la favicon: &#8220;<a href=\"https:\/\/wordpress.org\/plugins\/favicon-by-realfavicongenerator\/\" rel=\"noopener\">Favicon by RealFaviconGenerator<\/a>&#8220;. (Si tratta di un plugin associato al generatore di favicon che abbiamo visto nelle sezioni precedenti).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"845\" height=\"320\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/plugin-favicon-realfavicongenerator.png\" alt=\"Plugin Favicon Realfavicongenerator\" class=\"wp-image-75066\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/plugin-favicon-realfavicongenerator.png 845w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/plugin-favicon-realfavicongenerator-300x114.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/plugin-favicon-realfavicongenerator-768x291.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/plugin-favicon-realfavicongenerator-120x45.png 120w\" sizes=\"auto, (max-width: 845px) 100vw, 845px\" \/><\/figure>\n\n\n\n<p>Con questo plugin la procedura \u00e8 simile a creare la favicon con il tool online RealFaviconGenerator. In questo caso per\u00f2, <strong>non dovremo inserire manualmente il codice HTML<\/strong>, visto che il plugin far\u00e0 tutto per noi.<\/p>\n\n\n\n<p>L&#8217;uso del plugin \u00e8 molto intuitivo. Basta installarlo, attivarlo e poi cliccare su <em>Aspetto &gt; Favicon<\/em>. Qui potremo selezionare l&#8217;immagine dalla libreria e generare la favicon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/usare-plugin-favicon-realfavicongenerator-1024x473.png\" alt=\"Usare Plugin Favicon Realfavicongenerator\" class=\"wp-image-75067\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/usare-plugin-favicon-realfavicongenerator-1024x473.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/usare-plugin-favicon-realfavicongenerator-300x139.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/usare-plugin-favicon-realfavicongenerator-768x355.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/usare-plugin-favicon-realfavicongenerator-120x55.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/usare-plugin-favicon-realfavicongenerator.png 1444w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Verremo rimandati al sito <em>RealFaviconGenerator <\/em>dove potremo <strong>personalizzare la favicon <\/strong>esattamente come abbiamo visto nella sezione dedicata alla creazione.<\/p>\n\n\n\n<p>Dopo aver completato la personalizzazione, ci baster\u00e0 cliccare su &#8220;<em>Generate and install favicon<\/em>&#8221; per completare la procedura.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"564\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/inserire-favicon-con-plugin-realfavicongenerator-1024x564.png\" alt=\"Inserire Favicon Con Plugin Realfavicongenerator\" class=\"wp-image-75068\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/inserire-favicon-con-plugin-realfavicongenerator-1024x564.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/inserire-favicon-con-plugin-realfavicongenerator-300x165.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/inserire-favicon-con-plugin-realfavicongenerator-768x423.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/inserire-favicon-con-plugin-realfavicongenerator-114x63.png 114w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/inserire-favicon-con-plugin-realfavicongenerator-1536x845.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/inserire-favicon-con-plugin-realfavicongenerator.png 1650w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Verremo quindi riportati alla dashboard del sito e avremo la conferma che la favicon <strong>\u00e8 stata impostata correttamente<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"698\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-inserita-con-plugin-realfavicongenerator-1024x698.png\" alt=\"Favicon Inserita Con Plugin Realfavicongenerator\" class=\"wp-image-75069\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-inserita-con-plugin-realfavicongenerator-1024x698.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-inserita-con-plugin-realfavicongenerator-300x205.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-inserita-con-plugin-realfavicongenerator-768x524.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-inserita-con-plugin-realfavicongenerator-92x63.png 92w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/favicon-inserita-con-plugin-realfavicongenerator.png 1065w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"note\">Ricordati che se utilizzi questo metodo, non dovrai <strong>eliminare <\/strong>n\u00e9 <strong>disattivare <\/strong>il plugin o la favicon verr\u00e0 disattivata e dovrai reinserirla con un altro sistema.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cosa-fare-se-la-favicon-non-si-vede\">Cosa fare se la favicon non si vede<\/h2>\n\n\n\n<p>Seguendo i passaggi di questa guida, dovresti essere riuscito o riuscita ad aggiungere la favicon sul tuo sito WordPress.<\/p>\n\n\n\n<p>Se la favicon viene mostrata <strong>tagliata <\/strong>o troppo piccola, assicurati di aver usato le dimensioni corrette. Se hai creato la favicon manualmente, assicurati che sia corretto il formato (quadrato) e le dimensioni come abbiamo visto nella <a href=\"https:\/\/supporthost.com\/it\/favicon-wordpress\/#favicon-dimensioni-e-formato\">sezione dedicata<\/a>.<\/p>\n\n\n\n<p>In alcuni casi, inoltre, durante la procedura \u00e8 possibile che la <strong>favicon non si aggiorni correttamente<\/strong>.<\/p>\n\n\n\n<p>La prima cosa da fare \u00e8 escludere che non sia un <strong>problema di cache<\/strong>. Per farlo prova a ricaricare la pagina ignorando la cache usando <em>Ctrl + Shift + r<\/em> (per Chrome), oppure visita la pagina da navigazione in incognito.<\/p>\n\n\n\n<p>Se usi un sistema di cache come <strong>Cloudflare<\/strong>, puoi <strong>svuotare la cache<\/strong> e provare a visitare di nuovo il sito.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/svuotare-cache-cloudflare-1024x389.png\" alt=\"Svuotare Cache Cloudflare\" class=\"wp-image-75070\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/svuotare-cache-cloudflare-1024x389.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/svuotare-cache-cloudflare-300x114.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/svuotare-cache-cloudflare-768x292.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/svuotare-cache-cloudflare-120x46.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/svuotare-cache-cloudflare.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Altrimenti, se dopo questi controlli, continui a non vedere la favicon correttamente, devi provare a<strong> ripetere la procedura<\/strong> usando un&#8217;immagine per la favicon che abbia un nome diverso da quello che hai usato prima.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>Aggiungere la favicon a un sito WordPress \u00e8 davvero semplice. In base alla versione di WordPress e al tema che stai usando, ci sono <strong>diversi metodi <\/strong>per inserirla. Noi ti suggeriamo di inserire la favicon con uno dei metodi facilitati o manuali che abbiamo visto, perch\u00e9 non \u00e8 necessario usare un plugin, ma se proprio non riesci, abbiamo anche visto un plugin che pu\u00f2 esserti utile e semplificarti la vita.<\/p>\n\n\n\n<p>Prima di cominciare, per\u00f2, devi avere delle icone adeguate da utilizzare come favicon, per questo nella prima parte del tutorial abbiamo visto diversi suggerimenti che ti consentono di <strong>trasformare il tuo logo o l&#8217;immagine che hai scelto in una favicon<\/strong>.<\/p>\n\n\n\n<p>Adesso che sai come aggiungere la favicon, \u00e8 arrivato il momento di condividere la tua esperienza con noi: come \u00e8 andata? Quale di questi metodi hai seguito?<\/p>\n\n\n\n<p><em>Ultimo aggiornamento con aggiunta di sistemi alternativi per creare le favicon il 29 agosto 2025.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Non sai come mostrare la favicon sul tuo sito WordPress o hai dubbi sulle dimensioni e il formato da usare? In questa guida vedremo tutto quello che c&#8217;\u00e8 da sapere per inserire correttamente la favicon sul tuo sito. E, se non hai ancora un&#8217;immagine adatta da usare come favicon, vedremo anche come crearla a partire [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":75077,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-75052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/75052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=75052"}],"version-history":[{"count":9,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/75052\/revisions"}],"predecessor-version":[{"id":136543,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/75052\/revisions\/136543"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/75077"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=75052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=75052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=75052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}