Generatore di favicon
Risposta breve
Crea favicon.ico, icone Apple touch e per web app, oltre ai tag HTML, da una sola immagine.
iOS mostra le parti trasparenti dell'icona Apple touch come nere, quindi queste due icone ricevono uno sfondo pieno. Le altre icone mantengono la trasparenza.
Cosa fa
Crea un set di favicon da una sola immagine: favicon.ico con icone da 16, 32 e 48 px, un'icona Apple touch da 180 px, icone da 192 e 512 px per il manifest della web app, un'icona maskable da 512 px, e i tag HTML da aggiungere alle tue pagine. Un SVG caricato viene incluso anche come icon.svg.
Perché è importante
I browser mostrano la favicon nelle schede e nei preferiti, i telefoni usano l'icona touch nella schermata home, e Google Search può mostrare la favicon accanto alle tue pagine nei risultati. Google la mostra solo quando l'icona è quadrata, di almeno 8×8 px (è consigliato oltre 48×48 px) ed è possibile eseguirne la scansione insieme alla home page.
Come funziona
-
Scegli un'immagine quadrata, idealmente un SVG o un PNG di almeno 512×512 px
-
Scegli un colore di sfondo per l'icona Apple touch e per l'icona maskable
-
Il tuo browser disegna ogni dimensione e le raggruppa in favicon.ico
-
Scarica i file, copia i tag HTML e testa il risultato con il controllo favicon
Esempio di input e output
immagine: logo.svg sfondo: #ffffff
favicon.ico 16, 32, 48 px apple-touch-icon.png 180 px icon-192.png 192 px icon-512.png 512 px icon-512-maskable.png 512 px icon.svg SVG originale manifest.webmanifest icone manifest <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest">
Chi lo usa
-
Titolare di piccola impresa
Trasforma un logo in tutti i file di icone di cui un nuovo sito web ha bisogno.
-
Sviluppatore web
Genera il set di icone e le icone del manifest per una progressive web app.
-
Designer
Vedi come appare un logo a 16 px prima di consegnarlo.
Domande frequenti
Di quali file ho bisogno?
La maggior parte dei siti usa favicon.ico, un'icona Apple touch e icone da 192 e 512 px per il manifest della web app. Un'icona SVG è opzionale; i browser che la supportano possono usarla a qualsiasi dimensione.
Perché il file ICO contiene immagini PNG?
Il formato ICO può contenere immagini PNG, e ogni browser attuale le legge. Il file contiene le versioni da 16, 32 e 48 px così ogni browser può scegliere la dimensione di cui ha bisogno.
Cos'è un'icona maskable?
Un'icona con spazio extra intorno al logo, così Android può ritagliarla in un cerchio o un'altra forma. Lo strumento mantiene l'intera immagine dentro la zona di sicurezza, così nulla viene tagliato.
Perché l'icona Apple touch e l'icona maskable ricevono un colore di sfondo?
iOS mostra le parti trasparenti dell'icona touch come nere, e un'icona maskable deve riempire l'intera forma, quindi entrambe ricevono il colore che scegli. Le altre icone mantengono la trasparenza.
La mia immagine viene caricata?
No. Le icone vengono disegnate nel tuo browser, e l'immagine non lascia mai il tuo dispositivo.