Guida alle misureGeneratore di favicon

Dimensioni della favicon: quali file servono, e a quanti px

Perché così tanti file per una favicon?

La favicon è la piccola icona del tuo sito: nella scheda del browser, nei preferiti, nei risultati di ricerca e nella schermata Home del telefono. È il volto del sito; senza, qualcosa sembra incompiuto.

Il punto è che ognuno di questi posti richiede una dimensione e un formato diversi. Perciò la favicon non è un file, ma un piccolo set di file.

Il set che ti serve

favicon.ico — 16, 32 e 48px racchiusi in un solo file. Usato da barra degli indirizzi, schede e preferiti; lo standard più antico e ancora indispensabile
PNG a 16px e 32px — le versioni nitide che i browser moderni usano nelle schede
apple-touch-icon a 180px — usata quando il sito viene aggiunto alla schermata Home di iPhone o iPad
PNG a 192px e 512px — per la schermata Home di Android e l'installazione PWA, registrati in site.webmanifest

Trascina un logo e ottieni favicon.ico, icona Apple touch e icone PWA in un unico ZIP, più l'HTML per il tuo sito. Tutto avviene nel browser.

Genera il set completo di favicon

Senza installazioni e senza registrazione · tutto funziona nel browser e i file non arrivano al server

Come preparare l'immagine di partenza

La strada giusta è partire da un'immagine quadrata grande (almeno 512px) e ridurla. Ingrandire un'immagine piccola la rende solo sfocata.

Deve restare riconoscibile a 16px, quindi più è semplice meglio è. Un simbolo batte un logo pieno di testo; un piccolo margine sui bordi evita l'effetto compresso, e uno sfondo trasparente sta bene sia col tema chiaro sia con quello scuro.

Come inserirle nell'HTML

Carica i file nella cartella principale del sito e dichiarali con tag link nell'head: rel="icon" per ICO e PNG, rel="apple-touch-icon" per l'icona da 180px e rel="manifest" per site.webmanifest.

In mancanza di tag, la maggior parte dei browser trova comunque una favicon.ico messa nella radice del sito. Ma perché i PNG per dimensione e le icone della schermata Home funzionino a dovere, aggiungi i tag.

Non montare il set a mano

Ridimensionare un'immagine alla volta e impacchettare l'ICO a mano è noioso. Trascina una sola immagine nel generatore di favicon di Image Converter NOW: produce favicon.ico, tutti i PNG, site.webmanifest e i tag HTML pronti da incollare, in un unico ZIP.

Tutto avviene nel browser: il tuo logo non viene mai caricato su un server.