Comment générer un favicon SVG et son code HTML

À quoi sert le générateur de favicon ?

Un favicon aide à identifier un site dans un onglet ou une liste de favoris. Cet outil génère à la fois le balisage HTML correspondant et le balisage SVG du favicon. Vous pouvez partir d’un emoji, choisir les couleurs du SVG et, si nécessaire, fournir une URL d’icône à insérer dans le balisage HTML.

Générer le favicon pas à pas

1. Ouvrez le générateur et repérez les champs consacrés à l’emoji, à la couleur d’arrière-plan, à la couleur du texte et à l’URL facultative de l’icône.

2. Saisissez l’emoji à afficher dans le SVG. Si vous laissez ce champ avec sa valeur par défaut, le SVG utilise un emoji représentant une clé à molette.

3. Indiquez les couleurs souhaitées pour l’arrière-plan et le texte du SVG. En l’absence de personnalisation, les valeurs utilisées sont #2563eb pour l’arrière-plan et #ffffff pour le texte.

4. Si vous disposez déjà d’une URL d’icône, ajoutez-la dans le champ prévu à cet effet. Lorsque cette valeur n’est pas vide, elle est insérée dans deux éléments de lien d’icône du HTML généré. L’URL est échappée dans ce balisage ; l’outil ne la transforme pas en fichier image.

5. Lancez la génération, puis récupérez les éléments produits : le balisage HTML du favicon et le balisage SVG. Le HTML comprend également un lien de favicon utilisant une URI de données SVG.

6. Le champ du titre du site peut conserver sa valeur par défaut ou être renseigné, mais cette saisie n’est pas utilisée dans le balisage généré. Vérifiez donc surtout l’emoji, les couleurs et, le cas échéant, l’URL d’icône avant d’intégrer le résultat à votre site.

Lire et vérifier le résultat

Le résultat attendu contient deux types de contenu : du balisage HTML pour déclarer le favicon et un SVG représentant l’icône. Si une URL non vide a été fournie, vérifiez qu’elle apparaît dans les deux éléments de lien d’icône prévus. Le SVG doit reprendre l’emoji et les couleurs demandés, ou les valeurs par défaut lorsque ces champs n’ont pas été personnalisés.

Le champ du titre n’est pas un moyen de modifier le texte visible dans le favicon ni le HTML produit, puisqu’il n’est pas utilisé dans le résultat. Enfin, la présence d’un code SVG et d’une URI de données SVG ne signifie pas que l’outil a contrôlé la validité de l’emoji, des couleurs ou de l’URL : ces valeurs doivent être vérifiées selon votre besoin avant leur intégration.

Exemple pratique

Vous préparez une petite page personnelle et souhaitez obtenir une icône SVG sombre à partir d’un emoji étoile.

Saisissez l’emoji étoile, choisissez un arrière-plan #111827 et un texte #f9fafb, laissez l’URL d’icône vide, puis lancez la génération.

Le résultat contient un bloc de balisage HTML avec les liens de favicon et un bloc de balisage SVG reprenant l’emoji et les couleurs saisis.

Limites

• L’outil insère l’URL non vide dans le balisage HTML, mais ne valide pas l’URL, l’emoji ou la syntaxe des couleurs selon les faits disponibles.

Erreurs fréquentes

• Si le titre du site apparaît dans le champ mais pas dans le résultat, ce n’est pas un dysfonctionnement : ce champ n’est pas utilisé. Pour modifier l’icône, changez plutôt l’emoji ou les couleurs, puis relancez la génération.

Questions fréquentes

Une URL d’icône peut-elle être ajoutée au HTML généré ?

Oui, lorsque l’URL fournie n’est pas vide, elle est insérée dans deux éléments de lien d’icône du HTML généré. L’outil ne télécharge pas cette URL et ne la convertit pas en image.

Quelles valeurs sont utilisées si je ne personnalise pas le favicon ?

Le SVG utilise par défaut un emoji représentant une clé à molette, un arrière-plan #2563eb et un texte #ffffff. Vous pouvez remplacer ces valeurs dans les champs correspondants.

Le titre du site modifie-t-il le favicon ?

Non. Le champ du titre du site est accepté, mais sa valeur n’est pas utilisée dans le balisage généré. Le contenu du SVG dépend de l’emoji et des couleurs fournis.