Come creare una favicon e aggiungerla al tuo sito

Scegli il percorso adatto: in WordPress puoi caricare un’immagine quadrata tramite l’impostazione dell’icona del sito; altri editor hanno di solito un campo per l’icona del sito. Se modifichi l’HTML, crea i file delle icone e segui le istruzioni HTML. Puoi saltare ZIP e manifest se l’editor crea le icone.

Cos'è una favicon e dove compare?

La favicon è la piccola icona che identifica il sito nelle schede del browser e nei segnalibri. Una versione più grande può rappresentarlo sulla schermata Home del telefono. Lo stesso disegno può quindi servire in diverse dimensioni.

Immagina un lettore con dodici schede aperte. Il nome completo dell'attività potrebbe non essere più visibile, ma un simbolo distintivo aiuta ancora a riconoscere la scheda. L'obiettivo è essere riconoscibili in pochissimo spazio.

La favicon è diversa dal logo nell'intestazione del sito e dall'immagine mostrata quando condividi un link. Cambiarne una non aggiorna automaticamente le altre. Un logo largo può funzionare nella pagina ma diventare illeggibile in un quadratino.

Scegli prima il metodo di installazione. Prepari così solo i file necessari, senza considerare obbligatorio tutto il pacchetto.

Se il tuo strumento ha un'impostazione dedicata all'icona del sito, parti da lì. Le istruzioni HTML servono quando puoi modificare la sezione head condivisa dalle pagine. Incollare i tag in un blocco di contenuto visibile non equivale a installarli.

Scegli un disegno leggibile a 16 pixel

Usa la parte più riconoscibile del marchio. Un'iniziale netta, un simbolo semplice o la sagoma di una mascotte funzionano spesso meglio del nome completo con slogan. Elimina i dettagli che si capiscono solo in grande.

Immagina il logo di un forno con una pagnotta, spighe e il nome «Forno del Borgo». La favicon potrebbe conservare la sagoma del pane e un taglio distintivo. Tutte le spighe e il nome completo diventerebbero tanti piccoli segni.

Controlla l'anteprima alla dimensione reale. Un disegno di 512 pixel mostrato in grande non rivela se una fessura resta visibile a 16 pixel. Guarda senza ingrandire e verifica se riconosci la forma in un secondo o due.

• Mantieni un'idea principale. Evita più oggetti che competono nello stesso quadrato.
• Usa bordi chiari. Contorni sottili e piccoli vuoti possono sparire riducendo l'immagine.
• Cura il contrasto. Un simbolo chiaro su fondo trasparente può confondersi con un'interfaccia chiara.
• Limita il testo. Una lettera marcata può funzionare; il nome intero di solito no.
• Controlla la sagoma. Se il simbolo diventa irriconoscibile senza i dettagli, semplificalo.

Puoi usare un disegno diverso per le dimensioni piccole. Non deve essere una copia in miniatura del logo completo. Se occorre rifinire la forma a 16 pixel, crea una versione dedicata. Il generatore ridimensiona l'immagine, ma non decide quali dettagli del marchio eliminare.

Prepara l'immagine originale senza perdere dettagli

Esporta preferibilmente dal progetto originale. Un PNG quadrato di almeno 512 × 512 pixel è un buon punto di partenza perché l'icona più grande generata misura 512 pixel. Non significa che la scheda del browser mostri un'immagine di quelle dimensioni.

Se hai un logo vettoriale, esporta un PNG quadrato dal programma di grafica. Pixilo accetta JPG, PNG e WebP, non SVG. Conserva il file vettoriale per modifiche future.

Ingrandire un'icona sfocata da 32 a 512 pixel non ricrea i dettagli. Usa un originale migliore oppure ridisegna un simbolo più semplice. Il generatore avvisa quando uno dei lati è inferiore a 512 pixel perché i file più grandi richiedono un ingrandimento.

Sistema la composizione prima di pensare al peso del file. Un logo rettangolare può entrare nel quadrato senza deformarsi, ma lasciare molto spazio vuoto. Il ritaglio centrale riempie il quadrato eliminando parti dell'immagine. Nessuna delle due soluzioni rende automaticamente adatto un logo testuale largo.

Se il soggetto è decentrato, scegli prima il ritaglio con lo strumento di ritaglio. Il generatore di favicon ritaglia al centro e non consente di spostare l'area verso un simbolo vicino al bordo.

PNG è adatto a trasparenze e bordi grafici nitidi. Con JPG controlla le anteprime piccole per individuare sfocature o puntini. Cambiare formato non recupera dettagli già persi. La guida JPG e PNG spiega le differenze.

Dimensioni e formati: quali file servono?

Non serve caricare un'icona distinta per ogni dispositivo. Segui i requisiti del sito. Un sito HTML può usare poche icone collegate; un sistema di gestione dei contenuti può creare le proprie versioni da una sola immagine.

ICO può contenere più immagini. Pixilo crea un vero ICO con versioni da 16, 32 e 48 pixel. Rinominare un PNG in .ico non crea questa struttura. PNG contiene una sola immagine ed è facile da controllare separatamente.

L'icona Apple da 180 pixel ha una funzione diversa dalla favicon del browser. Apple descrive il collegamento apple-touch-icon per la schermata Home nella documentazione sulle applicazioni web. Una minuscola favicon non è un buon originale per questa versione.

Lo ZIP contiene nove file. I PNG da 32 e 48 pixel sono alternative per campi o configurazioni che richiedono quelle dimensioni. Non devi collegarli tutti insieme a ICO e PNG da 96 pixel. Le istruzioni sono per te, non un file da offrire ai visitatori.

Scegli con attenzione trasparenza e margini

Le icone trasparenti possono apparire pulite, ma lo sfondo dipende dall'interfaccia. Prova un simbolo scuro su fondo scuro e uno chiaro su fondo chiaro. Se diventa poco leggibile, usa un contorno contrastante o uno sfondo uniforme.

In Pixilo la trasparenza riguarda ICO e PNG da 32, 48 e 96 pixel. L'icona Apple e quelle da 192 e 512 pixel usano sempre il colore di sfondo scelto. Quel colore influisce quindi sulle icone grandi anche quando quelle del browser sono trasparenti.

La trasparenza non elimina uno sfondo già presente. I pixel bianchi intorno al logo restano bianchi. Per ottenere spazio trasparente, parti da un'immagine che abbia davvero uno sfondo trasparente.

La percentuale di margine si applica a ogni lato. Il 10% lascia al disegno l'80% della larghezza, il 20% ne lascia il 60%. A 16 pixel, il secondo valore offre solo circa 10 pixel al simbolo. Un po' di spazio aiuta, troppo lo rende difficile da vedere.

Controlla anche i margini già presenti nell'originale. Se il logo occupa solo metà del PNG, lo spazio vuoto resta anche impostando il margine aggiuntivo a zero. Ritaglia prima quello inutile senza eliminare lo spazio voluto.

Parti dal margine predefinito e confronta un valore più piccolo e uno più grande. Valuta prima l'anteprima a 16 pixel. La percentuale riguarda l'intera immagine, non solo la sagoma colorata.

Come aggiungere una favicon in WordPress

Usa la funzione integrata Icona del sito. La documentazione WordPress consiglia un PNG quadrato di almeno 512 × 512 pixel. Da WordPress 6.5 apri Impostazioni → Generali, scegli l'icona e salva. Nelle versioni precedenti può trovarsi in Aspetto → Personalizza → Denominazione del sito.

Con un tema a blocchi compatibile, l'icona può essere disponibile anche in Aspetto → Editor → Identity. Le etichette dipendono dalla lingua dell'interfaccia. Consulta la documentazione di Identity nell'editor del sito se corrisponde alla tua schermata.

Per questo uso scegli icon-512.png di Pixilo. Ha uno sfondo uniforme, quindi controlla il colore prima di caricarlo. Puoi anche usare un PNG originale quadrato adatto se vuoi conservarne la trasparenza.

1. Seleziona il PNG nel campo Icona del sito.
2. Salva e apri la homepage pubblica e un'altra pagina.
3. Controlla la scheda. Se un altro componente fornisce ancora un'icona vecchia, segui la sezione di risoluzione dei problemi.

WordPress crea i riferimenti per te. Lo ZIP non è un tema o plugin e i tag HTML non vanno inseriti nel contenuto di un articolo o di una pagina.

Logo del sito e icona del sito sono impostazioni distinte. Cambiare il logo largo nell'intestazione non significa necessariamente aggiornare la piccola icona della scheda. Usa l'impostazione corretta e salvala.

Crea una favicon dal logo con Pixilo

1. Scegli un'immagine. Apri il generatore di favicon e seleziona un JPG, PNG o WebP fino a 25 MB. Il limite è anche di 8000 pixel per lato e 32 milioni di pixel totali.
2. Scegli come adattarla. L'adattamento conserva l'immagine e le proporzioni. Il ritaglio quadrato usa la zona centrale. Verifica che restino tutte le parti importanti.
3. Regola margine e sfondo. Confronta le anteprime del browser alla dimensione reale e quella Apple. Scegli se mantenere trasparenti le icone del browser.
4. Scarica ciò che serve. Usa lo ZIP per il pacchetto completo o scarica il singolo file richiesto dal campo di caricamento.
5. Installa e verifica. Usa le impostazioni del sito o le istruzioni HTML qui sotto. Controlla il sito pubblicato, non solo l'anteprima.

Regola le opzioni e poi scarica. Non serve un pulsante separato per salvare: i download usano le ultime scelte. Un file già salvato sul dispositivo non cambia quando modifichi l'anteprima. Scaricalo nuovamente dopo le modifiche.

Originale e file generati restano sul dispositivo. Nessuna immagine viene caricata sul server di Pixilo. Immagine e impostazioni rimangono nella pagina aperta: scarica il risultato prima di chiuderla o ricaricarla.

Scegliendo un'altra immagine riappare il selettore. Le opzioni restano impostate, quindi ricontrolla adattamento, margine e sfondo per il nuovo disegno.

Esempio: trasformare un logo largo in un'icona utile

Supponiamo che un forno abbia un logo di 1200 × 600 con una pagnotta e un nome lungo. È un esempio di procedura, non un confronto misurato delle immagini dell'articolo.

1. Isola il simbolo. Esporta la pagnotta dal progetto originale come PNG quadrato di 512 × 512. Evita una piccola schermata del logo.
2. Elimina i margini inutili. Conserva tutti i bordi del pane, lasciandogli abbastanza spazio nel quadrato per restare visibile.
3. Confronta le anteprime piccole. Parti dall'adattamento e dal margine predefinito. Se il taglio sul pane sparisce a 16 pixel, semplifica l'originale invece di ingrandire una copia sfocata.
4. Prova lo sfondo. Se il contorno scuro sparisce, usa un fondo uniforme contrastante per le icone del browser. Controlla anche l'anteprima Apple.
5. Scarica in base al sito. Per HTML con icone browser e Apple, usa ICO, PNG da 96 pixel e icona Apple. Per WordPress usa il PNG da 512 pixel.

L'icona deve essere riconoscibile prima dell'installazione. Se funziona solo nell'anteprima grande, torna al disegno. L'estensione corretta non risolve una composizione troppo complessa.

Come aggiungere una favicon a un sito HTML

Estrai lo ZIP e metti le icone nella cartella pubblicata dal sito. Con i percorsi qui sotto, l'ICO deve essere disponibile a un indirizzo come https://example.com/favicon.ico. Conserva i file tra le risorse originali o pubbliche che il processo di compilazione copia nell'output. Se li aggiungi solo alla cartella generata, possono sparire alla compilazione successiva.

Inserisci i primi due tag nel <head> della pagina per le icone del browser. Aggiungi il terzo per la schermata Home Apple. Se le pagine condividono un modello head, usa quello per mantenere gli stessi riferimenti su tutto il sito.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

href indica la posizione del file; sizes ne descrive le dimensioni. Il browser può scegliere in base a formato, dimensioni e altre dichiarazioni: non vince sempre il primo tag. Consulta il riferimento MDN per rel="icon".

Se i file sono nella cartella /icons/, cambia tutti e tre i percorsi in /icons/favicon.ico, /icons/favicon-96x96.png e /icons/apple-touch-icon.png. Il collegamento deve corrispondere alla posizione effettiva.

Un percorso che inizia con / parte dalla radice del dominio. Se il sito si trova in una sottocartella come /portfolio/, usa i percorsi pubblici corretti. Apri ogni indirizzo dopo la pubblicazione per verificarlo.

Prima di aggiungere i tag, cerca dichiarazioni favicon e manifest già presenti nel head condiviso. Sostituisci i riferimenti obsoleti. Lasciare anche la vecchia icona del tema può rendere difficile capire quale venga scelta.

Facoltativo: aggiungere o aggiornare il manifest

Salta questa sezione se ti servono solo icone del browser. Il manifest è separato e non è necessario per mostrare l'icona della scheda.

Un manifest è un file JSON che descrive un'app e le sue icone. Il site.webmanifest di Pixilo contiene solo le voci delle icone. Se hai già un manifest, integra quelle nuove senza sostituire nome, URL iniziale e modalità di visualizzazione. Consulta la guida di web.dev al manifest.

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Per usare il nuovo manifest, aggiungi questo riferimento nel head condiviso. Se il sito ne collega già uno, aggiorna quel file anziché aggiungere un secondo riferimento.

<link rel="manifest" href="/site.webmanifest">

Se pubblichi il manifest in /icons/, il collegamento diventa href="/icons/site.webmanifest". Modifica anche i percorsi JSON in /icons/icon-192.png e /icons/icon-512.png: la barra iniziale punta alla radice del dominio, non alla cartella del manifest.

Le icone generate usano purpose: "any". Non sono icone maskable, che richiedono un disegno capace di restare leggibile quando viene ritagliato in un cerchio o altra forma. Uno sfondo uniforme non basta. Non cambiare questa proprietà senza preparare e verificare il disegno. Consulta il riferimento MDN sullo scopo delle icone.

Il file contiene soltanto icone. Non è una configurazione completa dell'app e non rende il sito installabile da solo.

A cosa serve una favicon nella Ricerca Google

Una favicon riconoscibile può aiutare a identificare il sito nei risultati. Considerala un dettaglio di identità e usabilità, non una scorciatoia per migliorare il posizionamento o garantire più clic.

Le linee guida Google richiedono un'immagine quadrata di almeno 8 × 8 pixel e consigliano più di 48 × 48. Il PNG da 96 pixel del pacchetto è una scelta pratica. Collegalo dalla homepage, mantieni stabile l'URL e consenti a Googlebot di leggere la homepage e a Googlebot-Image di leggere l'icona.

Google usa una favicon per nome host, come example.com. Una sezione su example.com/blog/ non riceve un'icona distinta. Rispettare le regole non garantisce la visualizzazione. Scansione e aggiornamento possono richiedere giorni o settimane. Una richiesta di indicizzazione in Search Console non forza un aggiornamento immediato.

Se l'icona nuova funziona nel browser ma Google mostra quella vecchia, verifica prima file pubblici e tag della homepage. Cambiare continuamente il disegno durante l'attesa rende difficile sapere quale versione sia stata elaborata.

Perché manca la favicon o compare ancora quella vecchia?

Distingui un errore di installazione da una copia vecchia nella cache. Se l'URL dell'icona non funziona, ricaricare la pagina non risolve il problema. Se mostra il file corretto, controlla tag e cache.

Apri l'URL esatto in una nuova scheda. Deve mostrare l'immagine, non la homepage, un accesso o un errore. Per controllare meglio, apri gli strumenti per sviluppatori, seleziona la scheda Rete e ricarica. Uno stato 200 non basta se la risposta contiene HTML anziché un'immagine.

Controlla il head realmente pubblicato sulla homepage e su una pagina interna. La modifica del modello potrebbe non essere arrivata nell'output, oppure un altro componente aggiunge ancora l'icona vecchia. Cerca i nomi e percorsi dei file installati.

Il browser può conservare la favicon separatamente dalla pagina. Chiudi e riapri la scheda, poi prova un profilo nuovo o un altro browser. Un normale aggiornamento non sostituisce sempre l'icona. Queste prove aiutano a individuare la cache locale, ma non garantiscono aggiornamenti simultanei ovunque.

Se usi CDN o service worker, verifica se restituiscono ancora una versione vecchia. Aggiorna la cache interessata tramite il tuo hosting o l'app. Modifica una cosa alla volta, controlla la risposta e continua solo se necessario.

Controlli finali

• Il disegno è riconoscibile a 16 e 32 pixel senza ingrandire.
• Bordi e colori sono chiari su sfondi chiari e scuri.
• I file scaricati rispecchiano adattamento, margini e sfondo definitivi.
• Ogni URL collegato mostra il file pubblico corretto.
• Il head condiviso contiene i riferimenti previsti senza duplicati obsoleti.
• Icona Apple e manifest puntano ai file pubblicati.
• Il manifest esistente conserva tutte le altre impostazioni.
• Homepage e favicon sono accessibili ai crawler per poter comparire in Google.

Conserva originale e pacchetto finale insieme. Annota dove si configura l'icona: modello HTML, impostazione WordPress o strumento del sito. La prossima modifica del marchio sarà più semplice.

Domande frequenti

Qual è la dimensione migliore per una favicon?

Usa un'immagine quadrata nitida e abbastanza grande per i file necessari. Un originale di 512 × 512 copre il file più grande del pacchetto, ma non è richiesto soltanto per una scheda. Consulta la tabella delle dimensioni.

Servono sia ICO sia PNG?

Non sempre. L'esempio HTML Pixilo usa un ICO con più immagini piccole e un PNG più grande. Un CMS può creare le versioni da un solo originale. Segui i requisiti dell'impostazione usata, senza caricare ogni file disponibile.

La favicon può avere uno sfondo trasparente?

Sì, le icone del browser possono mantenere la trasparenza. Verifica che il simbolo resti visibile su sfondi diversi. Le icone per la schermata Home usano il colore scelto e la trasparenza non elimina uno sfondo già presente nell'originale.

Perché il logo è sfocato nella favicon?

L'originale può essere sfocato o troppo ricco di dettagli. Ingrandirlo non risolve il problema. Usa un originale nitido, semplifica i dettagli e guarda le anteprime alla dimensione reale prima di regolare i margini.

Devo caricare lo ZIP direttamente in WordPress?

No. Estrai il pacchetto e usa un PNG quadrato adatto, come icon-512.png, nell'impostazione Icona del sito. Lo ZIP contiene file e istruzioni, non un tema o plugin.

La favicon migliora la SEO?

Aiuta a presentare un'identità coerente e riconoscibile, ma non garantisce posizioni migliori. Per la Ricerca rispetta i requisiti Google e attendi l'elaborazione. L'idoneità non garantisce che l'icona venga mostrata.

Riassumi conChatGPT (si apre in una nuova scheda)Grok (si apre in una nuova scheda)Google (si apre in una nuova scheda)Perplexity (si apre in una nuova scheda)Claude (si apre in una nuova scheda)