No. SVG è un formato di origine accettato, ma il pacchetto contiene file raster PNG e un ICO. Non crea favicon vettoriali o animate.
Generatore di favicon
Trasforma un'immagine in uno ZIP con un ICO in più dimensioni, cinque icone PNG e un manifest web. Usa l'esempio di installazione qui sotto per collegare i file al tuo sito.
Potrebbero servirti anche:Generatore di icone per app·Da PNG a ICO·Ridimensiona immagini·Comprimi immagini
File nel pacchetto favicon
Il file da scaricare è favicon-package.zip e contiene sette file. Il codice HTML è mostrato in questo articolo come esempio di installazione e non è incluso nello ZIP.
| File | Dimensioni o contenuto | Funzione |
|---|---|---|
| favicon.ico | 16×16, 32×32 e 48×48 in un unico file | Un'icona per siti web in più dimensioni. |
| favicon-16x16.png | 16×16 | Icona piccola per il browser. |
| favicon-32x32.png | 32×32 | Icona più grande per il browser. |
| apple-touch-icon.png | 180×180 | Icona da usare come riferimento per la schermata Home di Apple. |
| android-chrome-192x192.png | 192×192 | Icona a cui fa riferimento il manifest web. |
| android-chrome-512x512.png | 512×512 | Icona più grande a cui fa riferimento il manifest web. |
| manifest.json | Nome del sito, colori e riferimenti a due icone | Un manifest iniziale da rivedere per il tuo sito. |
Formati in ingresso: PNG, JPG/JPEG, WebP, GIF o SVG. I risultati sono immagini statiche ICO e PNG; caricare un SVG non genera una favicon SVG.
Genera e installa i file della favicon
1
Scegli un'immagine di origine riconoscibile
Carica un'immagine semplice. Un'immagine quadrata di almeno 512×512 pixel è utile per il PNG più grande; usare un'immagine più grande non rende più chiaro un design poco leggibile.
2
Genera e scarica lo ZIP
Seleziona Genera pacchetto favicon e scarica lo ZIP completato. Estrailo prima di aggiungere i file al sito.
3
Rivedi il manifest e pubblica i file
Modifica il nome del sito e i colori predefiniti in manifest.json secondo necessità. Rendi i file disponibili tramite URL pubblici sul sito e aggiorna i percorsi se usi una sottocartella.
4
Aggiungi i riferimenti HTML e verifica
Usa l'esempio qui sotto nella sezione head della pagina. Verifica che gli URL delle icone e del manifest si carichino, poi controlla l'icona nel browser.
Aggiungi le icone al tuo sito
Questo esempio presuppone che i file siano disponibili nella directory principale del sito. Aggiungi questi riferimenti alla sezione head della pagina e adatta i percorsi alla tua configurazione.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">Controlla questi aspetti prima di pubblicare i file:
| Verifica | Cosa fare |
|---|---|
| Percorsi pubblici dei file | La barra iniziale indica la directory principale del sito. Se usi una sottocartella, aggiorna sia i valori href nell'HTML sia i valori src delle icone in manifest.json. |
| Valori predefiniti del manifest | I campi name e short_name generati hanno il valore My Website; theme_color e background_color sono impostati su #ffffff. Rivedili dopo il download. Questi valori non cambiano i colori delle immagini delle icone. |
| Configurazione esistente del sito | Controlla se il tema o il framework dichiarano altre icone. Evita di lasciare riferimenti a una vecchia favicon insieme alla nuova configurazione. |
Un manifest con icone non costituisce un'app web completa installabile o utilizzabile offline. Questo generatore non fornisce un service worker e non garantisce l'installazione su ogni dispositivo.
Rendi l'icona leggibile anche in piccolo
🔎
Controlla il risultato a 16×16
Le scritte piccole e i contorni sottili possono scomparire. Preferisci un simbolo semplice, un contrasto netto e spazio sufficiente intorno al soggetto.
↔
Controlla forma e margini
Le immagini non quadrate vengono adattate a un'area quadrata con margini trasparenti. Le immagini piccole possono essere ingrandite. Usa un'immagine quadrata già preparata se ti serve un'inquadratura precisa.
Scegli il pacchetto adatto al tuo lavoro
Questa pagina crea file favicon per siti web a partire da un'immagine esistente; non è uno strumento per disegnare loghi.
Ti serve solo un file ICO?
Usa Da PNG a ICO per convertire un PNG in ICO senza il pacchetto per siti web.
Stai sviluppando un'app mobile nativa?
Usa il Generatore di icone per app per le risorse grafiche native iOS/Android. Questi file hanno una funzione diversa dalle favicon per siti web.
Le immagini vengono caricate sul server per l'elaborazione. Scarica lo ZIP quando è pronto; i file temporanei vengono gestiti secondo il processo di pulizia del servizio.
Domande sulla configurazione delle favicon
Verifica prima gli URL dei file pubblicati e le dichiarazioni delle icone nella pagina. I browser possono conservare le favicon nella cache; dopo aver verificato che il sito punti ai nuovi file, prova con una nuova sessione del browser.
Il modulo attuale permette solo di selezionare un'immagine. Modifica i campi name, short_name, theme_color e background_color nel manifest scaricato in base al tuo sito e mantieni coerente l'eventuale valore theme-color nell'HTML.
No. Fornisce i file delle icone e un manifest iniziale. L'installazione e il funzionamento offline richiedono ulteriori configurazioni del sito; il pacchetto non aggiunge queste funzionalità automaticamente.