> ## Content Index > Fetch the complete content index at: https://www.tool-cloud.com/blog/it/llms.txt > Use this file to discover other available public pages before exploring further. # Come creare un favicon da un logo (tutte le dimensioni spiegate) - URL: https://www.tool-cloud.com/blog/it/come-creare-un-favicon-da-un-logo-tutte-le-dimensioni-spiegate/ - Published: 2026-10-04T23:09:46.000Z - Updated: 2026-10-04T23:25:05.000Z - Description: Trasforma il tuo logo in un favicon nitido. Scopri quali dimensioni contano ancora, come preparare un logo PNG, JPG o SVG e dove inserire esattamente ogni file nel tuo HTML. - Author: Tool Cloud Team - Tags: Guide, Immagini, Formati di file Per creare un favicon da un logo, inizia con un logo quadrato (SVG, o un PNG a 512x512 o superiore). Esporta un favicon.ico, idealmente con versioni da 16, 32 e 48px al suo interno, poi aggiungi un'icona Apple da 180x180 e PNG da 192/512 per il manifest, e collegali nel tuo HTML. Sono cinque file (ICO, SVG, icona Apple e due PNG del manifest), non una dozzina. Ecco come realizzare ciascuno di essi e dove inserirli. ## La risposta breve: i file favicon di cui hai bisogno L'insieme minimale moderno è composto da un ICO, un SVG, un'icona Apple touch e due PNG del manifest. File PNG separati da 16/32/48 e immagini delle piastrelle Microsoft sono [inutili](https://seotest.app/blog/how-to-make-a-favicon-png-ico-svg-apple-touch) quando disponi di un ICO multi-dimensione. | File | Dimensione | Scopo | Utilizzato da | | -------------------- | ---------------------- | --------------------------------------- | -------------------------------------------------------------- | | favicon.ico | 16, 32, 48 raggruppati | Favicon classico, fallback della radice | Schede del browser, lettori di feed, bot di anteprima dei link | | favicon.svg | Scalabile | Icona nitida a qualsiasi dimensione | Browser desktop moderni | | apple-touch-icon.png | 180x180 | Icona per schermata home | iPhone e iPad | | icon-192.png | 192x192 | Icona di avvio | Android Chrome, manifest PWA | | icon-512.png | 512x512 | Icona di installazione e splash | Android Chrome, manifest PWA | ![Un emblema blu lucido a forma di quadrato arrotondato con un inserto a forma di stella si trova sopra un ventaglio di forme di schede di file piatte e arrotondate in…](https://www.tool-cloud.com/blog/it/content/images/2026/10/how-to-create-a-favicon-from-a-logo-img-1.webp) Un unico logo master, ridimensionato in un set essenziale di file favicon. Molti generatori ti consegnano uno ZIP con una dozzina di file, la maggior parte dei quali nessun browser richiede. Un master da 512x512 è più che sufficiente, quindi non dovrai mai andare oltre. ## Dimensioni dei favicon spiegate: a cosa serve ciascuna ### favicon.ico (16, 32, 48) ICO è un contenitore che contiene diverse bitmap in un unico file. Il bundle di qualità standard è 16, 32 e 48px; aggiungi 256 solo se ti interessano le icone grandi di Windows. Vale ancora la pena averlo. I crawler, i lettori di feed e i bot di anteprima dei link recuperano comunemente /favicon.ico dalla radice del sito per impostazione predefinita. Chromium si comporta in modo diverso: in un test di richieste pubblicato, ha recuperato /favicon.ico solo quando la pagina non dichiarava alcuna icona. Con un SVG dichiarato, ha richiesto solo l'SVG e ha preferito l'ICO rispetto ai collegamenti PNG standalone. **Salta il PNG standalone 32x32.** Alcune guide lo elencano, ma quel test ha mostrato che rimaneva inutilizzato quando era presente un ICO. Il test copriva solo Chromium, quindi il comportamento di Firefox e Safari non è stato testato. ### favicon.svg I favicon SVG funzionano in Chrome 80+, Firefox 41+ e Edge. Il supporto di Safari è più recente e discontinuo, e i favicon SVG non funzionano in Safari su iOS. Tratta SVG come un supplemento, mai come sostituto dell'ICO. ### apple-touch-icon (180x180) 180x180 è la dimensione Retina per iPhone (60pt a 3x). Un unico file da 180px è sufficiente: iOS lo scala per altri dispositivi, incluso iPad. ### Icone del manifest (192 e 512) Android Chrome e le app web installate leggono le icone dal manifest dell'app web. Il file da 192px è l'icona di avvio e il file da 512px è l'icona di installazione/splash. ### Cosa richiede Google Search Google legge l'icona dalla tua homepage. Funziona qualsiasi formato di favicon valido, incluso ICO, PNG e SVG. Deve essere quadrata e di almeno 8x8px. Google consiglia dimensioni superiori a 48x48, in multipli di 48, e ottieni un'icona per hostname. Se l'icona non è adatta, Google inserisce un globo generico. ## Prepara il tuo logo prima di esportarlo ### Quadrato, grande e trasparente La fonte migliore è un SVG. Altrimenti usa un PNG quadrato da 512x512 o superiore. Riduci solo la scala: passare da 1024px a 16px mantiene i dettagli dei bordi, passare da 32px a 16px no, e ingrandire crea solo sfocatura. Se il tuo logo non è quadrato, prima ritaglialo o aggiungi del padding con gli strumenti di ritaglio e ridimensionamento immagini di Tool Cloud. Mantieni il PNG trasparente e in sRGB. Non appiattirlo o aggiungere uno sfondo "solo per sicurezza". Un favicon può essere un JPG? Sì, ma PNG o SVG è più pulito. Il JPG non ha trasparenza, quindi una conversione da JPG a ICO ti dà un quadrato pieno, e gli artefatti di compressione compaiono a dimensioni minuscole. ### Semplifica per 16 pixel Un logo completo con una tagline diventa illeggibile in una scheda del browser. Ecco cosa funziona: - Un segno audace con forte contrasto - Due o tre colori piatti - Al massimo uno o due caratteri in grassetto, senza wordmark Testa alla dimensione effettiva. Se non riesci a riconoscerlo in mezzo secondo, semplifica ulteriormente. ### Suggerimento: usa due immagini per il miglior ICO Per la massima qualità, usa opere grafiche semplificate per le dimensioni 16 e 32 e opere grafiche più dettagliate per 48 e 256\. Crea due ICO, poi usa quello semplificato come favicon.ico e quello dettagliato per i collegamenti di Windows. È opzionale, e un singolo logo ben semplificato va bene per la maggior parte dei siti. ## Converti il tuo logo in ICO e nel resto del pacchetto ### Opzione 1: genera un pacchetto favicon Apri [il Generatore di Favicon di Tool Cloud](https://www.tool-cloud.com/it/image/generate%5Ffavicon/), carica il tuo logo quadrato e scarica lo ZIP delle dimensioni standard dei favicon. Usa i file che corrispondono alla tabella sopra e crea eventuali file mancanti (come l'SVG o i PNG da 192/512) separatamente. Ignora eventuali file a cui il tuo HTML non farà riferimento. ### Opzione 2: converti un logo in un singolo ICO Se vuoi solo favicon.ico, usa il [Convertitore da Immagine a ICO](https://www.tool-cloud.com/it/image/convert%5Fto%5Fico/). Carica il tuo logo e converti, poi rinomina il risultato in `favicon.ico`. Controlla quali dimensioni contiene l'ICO; se manca una versione da 16 o 32px, usa invece il generatore sopra. ### Creazione dei PNG da 180, 192 e 512 Ridimensiona il tuo master quadrato a 180x180, 192x192 e 512x512 e chiamali `apple-touch-icon.png`, `icon-192.png` e `icon-512.png`. Per l'icona Apple, usa uno sfondo opaco con il logo centrato e con padding. iOS non rispetta la trasparenza e arrotonda gli angoli da solo, quindi non arrotondarli preventivamente. Fornisci sempre il tuo sfondo solido piuttosto che affidarti a ciò che iOS riempie. ## Dove inserire ogni file nel tuo HTML ### Lo snippet HTML Carica tutti i file nella radice del tuo sito, poi aggiungi questo allo ``. Gli attributi `sizes` seguono [una spiegazione su come Chrome sceglie le icone](https://dev.to/vannsl/the-surprisingly-weird-world-of-favicons-and-how-to-survive-it-5a2l): ```html ``` Alcune note: - Usa `rel="icon"`. `rel="shortcut icon"` è legacy; "shortcut" non è registrato ed è ridondante. - I browser scelgono in base al tipo, non alla posizione, quindi l'ordine non è critico. L'attributo `type="image/svg+xml"` permette ai browser che non supportano SVG di saltarlo e usare il file ICO. - Assegna all'ICO una dimensione concreta e allo SVG `sizes="any"`. Inserire `any` nell'ICO può far sì che Chrome lo preferisca rispetto allo SVG. ### Il manifest dell'app web ```json { "name": "Your Site", "short_name": "Site", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ] } ``` I criteri di installazione di Chrome richiedono sia le icone da 192px che quelle da 512px. Evita `"purpose": "any maskable"` su un singolo file. Per un'icona maskable, crea un file separato con la grafica inserita nella zona sicura centrale (circa 409x409 del canvas da 512). ## Aggiungi un favicon in WordPress, Squarespace, Shopify e Wix Le piattaforme rinominano i menu, quindi controlla cosa dice la tua dashboard. - **WordPress:** Aspetto, Personalizza, Identità del sito, Icona del sito. Carica un PNG 512x512. - **Squarespace:** Design, Icona del browser. Va bene un PNG quadrato da 300x300 (è accettato anche il formato ICO). - **Shopify:** Impostazioni tema, Favicon. Carica un PNG quadrato 512x512. - **Wix:** Impostazioni, Impostazioni sito, Favicon (potrebbe essere necessario un piano premium). ## Perché il tuo favicon appare sfocato o non si aggiorna ### Icone sfocate o a quadrato pieno La sfocatura deriva solitamente dall'upscaling di una raster piccola o da un logo troppo dettagliato a 16px. Risolvila usando uno SVG più un file ICO da 32px o superiore, e non fare mai upscaling di un'immagine 16x16\. Un quadrato solido dietro il tuo logo significa che la fonte non aveva trasparenza, spesso un JPG. ### Vecchio favicon ancora visibile I browser memorizzano nella cache i favicon per giorni o settimane. Prova queste soluzioni in ordine: 1. Esegui un hard refresh della pagina. 2. Apri /favicon.ico direttamente e fai refresh lì. 3. Aggiungi una query string, ad esempio `/favicon.ico?v=2`. 4. Controlla in una finestra di navigazione in incognito. 5. Conferma che il file restituisca HTTP 200 e svuota la cache del tuo CDN. Le icone della home screen iOS sono memorizzate nella cache per ogni collegamento, quindi i collegamenti esistenti non cambieranno e gli utenti dovranno aggiungere nuovamente il sito. Per un rebranding, usa un nuovo nome di file. ### Google Search non lo mostra Gli aggiornamenti richiedono giorni o settimane, e cambiare l'URL dell'icona può ritardarli. Assicurati che la tua home page faccia riferimento all'icona con `rel="icon"` e che rispetti le regole di dimensione sopra indicate. Non esiste un limite KB documentato; le regole di Google riguardano le dimensioni. ## In pratica Parti da un master quadrato da 512px o più e semplificalo per la dimensione della scheda. Carica i file, poi incolla lo snippet HTML e il manifest nel tuo sito, e verifica che il link del manifest sia presente. Infine, guarda il risultato a 16px: se il segno non è chiaro, semplificalo ancora. ## Domande frequenti ### Ho ancora bisogno di un favicon.ico nel 2026? Sì. I browser, i lettori di feed e i bot di anteprima dei link richiedono /favicon.ico dalla radice del sito indipendentemente dai tuoi tag HTML, quindi è una piccola assicurazione. Inserisci 16, 32 e 48px in un unico file. ### Un favicon può essere un JPG? Tecnicamente sì, ma PNG o SVG offrono un risultato molto più pulito. Il JPG non ha trasparenza e presenta artefatti di compressione, e le foto contengono troppi dettagli per 16x16 pixel. ### Qual è la dimensione giusta per un favicon su Google Search? Google richiede un'immagine quadrata di almeno 8x8px e consiglia dimensioni superiori a 48x48px. SVG non è supportato lì, quindi mantieni un ICO o un PNG dichiarato con rel=icon sulla tua homepage. ### Ho bisogno di file PNG separati da 16x16, 32x32 e 48x48? In genere no. Un ICO multi-dimensione copre quelle dimensioni, e un test sulle richieste Chromium ha trovato inutilizzati i PNG standalone quando era presente un ICO. Firefox e Safari non sono stati testati. ### Perché il mio nuovo favicon non viene visualizzato? I browser memorizzano i favicon nella cache in modo aggressivo per giorni o settimane. Prova un aggiornamento forzato, apri /favicon.ico direttamente, aggiungi una query string ?v=2 o controlla in una finestra di navigazione in incognito.