Generatore di favicon
Da una sola immagine ottieni favicon.ico e le icone PNG che servono a un sito, con i tag da incollare.
Trascina un'immagine per iniziare
Funziona nel browser. Nessun caricamento.
Una favicon non è più un file solo. I browser continuano a chiedere `/favicon.ico` che tu lo dichiari o meno, iOS vuole un PNG da 180 pixel per la scorciatoia sulla home, e un web app manifest chiede 192 e 512. Qui vengono scritti tutti a partire da una sola immagine sorgente, così il set è coerente invece di essere messo insieme in tre anni con quello che capitava.
Il file `.ico` contiene le versioni da 16, 32 e 48 pixel in un unico file, che è poi il motivo per cui quel formato esiste: il browser sceglie la misura che gli serve per la scheda, per i preferiti o per il collegamento sul desktop senza un'altra richiesta. Qui viene scritto byte per byte invece che da un servizio, e ogni versione è disegnata dall'originale a piena risoluzione, non ridotta da quella sopra.
Il ritaglio è il quadrato centrale, perché ogni posto in cui appare un'icona è quadrato. Un logo largo perderà le estremità, quindi la cosa giusta da dare in pasto è un simbolo, non un logotipo: a 16 pixel un nome è comunque illeggibile. La trasparenza viene mantenuta a meno che tu non metta un colore dietro, cosa che conviene fare per un logo scuro che altrimenti sparirebbe in un tema scuro del browser.
Passo per passo
- 1Trascina qui un logo o un'immagine più o meno quadrata.
- 2Scegli cosa mettere dietro: trasparente, bianco o nero.
- 3Scarica il set e copia i tre tag link nel tuo head.
Domande
Quali misure servono davvero?
Un favicon.ico con dentro 16, 32 e 48, un apple-touch-icon da 180 pixel per iOS, e i PNG da 192 e 512 per il manifest. È il set che viene scritto qui, e copre i browser e i telefoni attuali.
Dove vanno messi i file?
Nella radice del sito, accanto a index.html, e poi i tre tag link vanno nel head. favicon.ico viene trovato anche senza tag, gli altri vanno dichiarati.
Posso usare una foto?
Puoi, ma a 16 pixel sarà una macchia. Solo un simbolo semplice, con forte contrasto e pochi dettagli, sopravvive alla misura più piccola.
Il mio logo è largo: cosa succede?
Viene ritagliato al quadrato centrale, quindi le estremità si perdono. Prepara una versione quadrata, oppure usa il simbolo del logo invece del blocco completo.