Generatore di favicon: dal logo ai file giusti
Ogni sito ha bisogno di molte versioni della stessa icona: 16 pixel per la scheda, 180 per Apple, 192 e 512 per Android, e così via. Farle a mano in un editor richiede tempo e si sbaglia facilmente una misura. Il generatore di favicon parte da un'immagine, da un'emoji o da un massimo di tre lettere e produce tutte le misure da una tela di 512×512 pixel. L'anteprima mostra il risultato come scheda del browser, come risultato di Google e sulla schermata Home di un telefono.
L'immagine viene letta con un FileReader e disegnata su una canvas nel tuo browser. Caricare un file o premere un download non invia nessuna richiesta. Lo vedi nel pannello di rete degli strumenti per sviluppatori. I file arrivano come normali download e il codice finisce negli appunti solo se premi Copia codice.
Cinque passaggi con i valori predefiniti
- Scegli la scheda Carica immagine / SVG, Favicon emoji o Testo / monogramma. Trascina un file PNG, SVG, JPG o WebP, oppure scrivi da una a tre lettere.
- Scegli lo sfondo: Trasparente, Tinta unita o Gradiente moderno. Il gradiente ha due colori e un angolo da 0° a 360°.
- Regola il margine interno (0–40%, predefinito 15%) e l'arrotondamento degli angoli (0–50%, predefinito 22%, l'aspetto iOS).
- Scrivi il nome del sito. Nel manifest diventa
name, e i primi 12 caratteri diventanoshort_name. - Premi Scarica pacchetto completo (.ZIP) oppure prendi i singoli file dalle schede sotto la tela.
Che cosa contiene lo ZIP
Dodici immagini: favicon.ico, PNG da 16, 32, 48 e 96 pixel, tre Apple Touch Icon (180, 152, 120), icone Android da 192 e 512, un'icona maskable da 512 e un riquadro Windows da 150 pixel. Poi site.webmanifest, browserconfig.xml e un README.txt. Il pulsante Copia codice restituisce i tag <link> e <meta> per l'head della pagina. Il codice collega il .ico, i PNG da 16 e 32, l'icona Apple da 180, il manifest e la configurazione Windows. I file da 48, 96, 152 e 120 pixel stanno nello ZIP ma senza collegamento.
Font, emoji e altri dettagli che cambiano il risultato
Il file .ico contiene tre livelli PNG da 16, 32 e 48 pixel. Livelli da 64 o 256 non ci sono. Le emoji sono disegnate con il font emoji del tuo sistema operativo, quindi la stessa emoji cambia aspetto su macOS, Windows e Android. I monogrammi usano font di sistema, e Impact o un corsivo possono essere sostituiti da un altro font sul tuo computer.
Arrotondamento e margine valgono per ogni file, anche per l'icona maskable. Per una maskable a pieno campo, imposta l'arrotondamento a 0 e tieni il disegno dentro il cerchio tratteggiato.
Immagini piccole e colore del tema
Un'immagine raster piccola viene ingrandita, quindi parti da 512×512 pixel o più. Se lo sfondo non è a tinta unita, il colore del tema nel manifest è #2563eb.