Composez une icône de site à partir de deux lettres

Petites marques et créateurs de sites peuvent préparer une icône nette avant un lancement sans devoir ouvrir un logiciel graphique.

Composez une icône de site à partir de deux lettres. Le résultat peut servir tout de suite et votre saisie demeure sur cet appareil.

Mode d’emploi

Saisissez une ou deux lettres qui représenteront votre site dans l'icône.
Choisissez une couleur de fond, puis indiquez éventuellement une couleur pour le texte.
Lancez la génération pour obtenir une icône au format SVG.
Copiez ou téléchargez le SVG et placez-le dans les fichiers de votre site.

Exemple

Un cas simple consiste à utiliser les initiales d'une marque avec une couleur de fond vive et un texte clair. Après génération, ouvrez le SVG pour vérifier que les lettres sont centrées et que le rendu reste lisible dans un petit onglet de navigateur.

Entrée

YT
#0b57b7
#ffffff

Résultat

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="12" fill="#0b57b7"/><text x="32" y="32" fill="#ffffff" font-family="system-ui,-apple-system,Segoe UI,sans-serif" font-size="30" font-weight="700" text-anchor="middle" dominant-baseline="central">YT</text></svg>

--- a poser dans le <head>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Contraste 6.9:1 entre #ffffff et #0b57b7.
Un SVG suffit a tous les navigateurs actuels. Le PNG de 180 px reste utile pour l ecran d accueil iOS, qui ne lit pas le SVG.

Limites et formats

L'outil ne remplace pas un logiciel de création graphique pour des logos complexes.
Il se limite à une ou deux lettres et à des couleurs simples, sans formes ni dégradés avancés.
Le favicon SVG peut ne pas être pris en charge par tous les navigateurs ou contextes d'affichage.
Testez le rendu à petite taille avant de le publier sur un site en production.

Où le traitement a lieu

La composition de l'icône se fait dans votre navigateur. Les lettres et couleurs que vous saisissez ne sont envoyées à aucun service extérieur. Vous pouvez donc préparer un favicon sans transmettre vos choix graphiques.

Questions fréquentes

Puis-je utiliser plus de deux lettres ?

L'outil est prévu pour une ou deux lettres afin de garder une icône lisible. Si vous saisissez davantage de caractères, le rendu peut devenir trop chargé. Pour un logo plus détaillé, utilisez un éditeur graphique adapté.

Le fichier SVG est-il directement utilisable ?

Oui, le résultat est un SVG que vous pouvez copier ou télécharger. Ajoutez-le à votre projet et référencez-le dans le code de votre site. Vérifiez ensuite l'affichage dans un navigateur et dans un onglet réduit.

Puis-je choisir une couleur précise ?

Vous pouvez indiquer une couleur de fond et, si besoin, une couleur de texte. Utilisez une valeur hexadécimale reconnue. Après génération, contrôlez le contraste pour que les lettres restent visibles sur le fond.