Come generare il codice HTML e SVG di una favicon

A cosa serve il generatore di favicon

Per aggiungere una favicon a una pagina HTML, servono in genere il collegamento all’icona e il relativo markup. Favicon Generator prepara sia il markup HTML sia il markup SVG, così puoi impostare un’icona basata su emoji e scegliere i colori dello sfondo e del testo. L’URL dell’icona è facoltativo: se lo lasci vuoto, il risultato continua a includere il materiale SVG generato.

Il campo del titolo del sito può essere compilato per organizzare il lavoro, ma non viene usato nel markup prodotto. Per questo conviene concentrarsi sull’emoji, sui colori e, quando necessario, sull’URL che vuoi inserire nei collegamenti HTML della favicon.

Come generare il markup della favicon

1. Inserisci, se ti serve, il titolo del sito nel campo dedicato. Consideralo un riferimento descrittivo: non cambia la favicon né il markup generato.

2. Scegli l’emoji da usare come testo dell’SVG. Se non ne inserisci una, viene usata l’emoji della chiave inglese come valore predefinito.

3. Indica il colore dello sfondo e quello del testo. Se lasci vuoti questi campi, vengono applicati rispettivamente #2563eb e #ffffff.

4. Aggiungi un URL per l’icona solo se vuoi che venga inserito nel markup HTML. Quando il campo contiene un valore, il risultato include due elementi di collegamento all’icona con l’URL inserito, opportunamente sottoposto a escape HTML. Il generatore non usa quel campo per scaricare, controllare o trasformare un’immagine.

5. Avvia la generazione e copia il materiale restituito nel punto appropriato del tuo documento HTML. Il risultato comprende il markup dei collegamenti HTML e il markup SVG della favicon; include anche un collegamento a una favicon SVG tramite data URI nel markup HTML.

Prima di pubblicare la pagina, controlla che l’emoji, i colori e l’eventuale URL corrispondano a ciò che vuoi mostrare. Se modifichi un valore, genera nuovamente il risultato per ottenere il markup aggiornato.

Come leggere il risultato

Il risultato è un insieme di materiale per la favicon, non il titolo del sito trasformato in un elemento visivo. La parte SVG usa l’emoji fornita come testo e i colori selezionati; in assenza di valori personalizzati, mantiene i colori predefiniti. Il markup HTML può contenere i collegamenti all’URL dell’icona quando ne hai inserito uno e include anche il collegamento SVG tramite data URI.

Se hai lasciato vuoto l’URL, non aspettarti due collegamenti basati su quell’indirizzo: questa parte viene aggiunta quando il valore non è vuoto. Se hai compilato solo il titolo, il risultato non rifletterà quel testo. Verifica quindi il markup generato in base al tipo di favicon che vuoi usare, senza attribuire al campo del titolo o all’URL funzioni che non svolgono.

Esempio pratico

Vuoi preparare una favicon SVG per un blog senza collegare un URL esterno a un’icona.

Per un blog, inserisci l’emoji a forma di stella, imposta uno sfondo blu e un testo bianco, lascia vuoto l’URL dell’icona e avvia la generazione. Compila pure il titolo del blog, sapendo che non comparirà nel markup.

Il risultato contiene markup HTML per la favicon e markup SVG; include il collegamento SVG tramite data URI e, se l’URL inserito non è vuoto, due collegamenti HTML che usano quell’URL con escape HTML.

Limiti

• Il titolo del sito non modifica il risultato e l’URL opzionale viene inserito nei collegamenti HTML quando è valorizzato; non viene usato per scaricare o convertire un’immagine. L’output descritto è markup HTML e SVG.

Errori comuni

• Aspettarsi la conversione dell’URL in un’immagine: l’URL non viene scaricato né convertito; quando non è vuoto, viene inserito nei collegamenti HTML della favicon. Per ottenere una favicon SVG personalizzata, usa invece l’emoji e i colori disponibili nel generatore.

Domande frequenti

Posso usare un URL per la favicon?

Sì, ma solo come valore inserito nei collegamenti HTML quando il campo non è vuoto: lo strumento non scarica né converte l’immagine indicata.

Il titolo del sito cambia la favicon?

No. Il titolo può essere inserito, ma non viene usato nel markup generato né modifica la favicon.

Quali valori vengono usati se lascio vuoti emoji e colori?

Se non scegli colori personalizzati, lo sfondo usa #2563eb e il testo #ffffff; se non inserisci un’emoji, viene usata una chiave inglese.