Generatore HTML di favicon
Genera i tag <head> di cui un sito ha bisogno per la sua favicon, l'icona tattile e i colori del tema.
Generatore HTML di favicon
Un favicon è più di un file: una scheda del browser ha bisogno di un .ico, la schermata iniziale di un telefono ha bisogno di una apple-touch-icon 180x180, la scheda fissa di Safari ha bisogno di una maschera SVG a colore unico, e un prompt di installazione PWA legge le icone elencate nel manifesto. Questo strumento genera i tag <link> e <meta> esatti per tutti loro da un percorso base e una serie di dimensioni di icone, consentendoti di copiare un intero blocco in <head> invece di assemblarlo da cinque specifiche diverse.
Imposta il percorso base a dove vivranno i tuoi file di icone — la radice o una sottocartella come /icons/ — e ogni href viene costruito su di esso. Attiva o disattiva ICO, PNG e SVG indipendentemente: PNG aggiunge anche l'apple-touch-icon alla dimensione fissa 180x180 che Apple si aspetta, e SVG aggiunge una mask-icon il cui colore proviene dal tuo colore del tema chiaro (o scuro, se è l'unico impostato). Ogni colore del tema chiaro e scuro diventa un tag <meta name="theme-color"> separato con una query prefers-color-scheme, in modo che il chrome del browser corrisponda alla pagina in entrambi i modi.
Il campo dimensioni accetta un elenco separato da virgole o righe —"16x16, 32x32, 192x192"— e un numero semplice come "48" è una scorciatoia per un'icona quadrata; le voci non riconosciute vengono scartate piuttosto che rifiutate. Attiva la lista di controllo dei file e l'output termina con un commento che elenca ogni percorso referenziato, nell'ordine, che è l'elenco da caricare effettivamente.