Créer un jeu complet de favicons pour votre site
Ce que produit cet outil
Un favicon est rarement un fichier unique. Les navigateurs, les téléphones et les applications web installées réclament chacun une résolution différente : un site a donc besoin d'une petite famille d'icônes plutôt que d'une seule image. Cet outil part d'une source unique — une image importée, une ou deux lettres de texte ou un emoji — et la dessine sur un canvas HTML dans toutes les tailles qu'attend un site moderne.
Les icônes finales reviennent sous forme de fichiers PNG, accompagnées d'un site.webmanifest et d'un extrait HTML qui les relie à votre page, sans laisser de doute sur la balise qui pointe vers quel fichier.
Trois points de départ
Vous pouvez importer une image en PNG, JPG, SVG ou WebP et laisser l'outil la réduire à chaque taille d'icône. Pour une marque textuelle, saisissez un ou deux caractères et choisissez une police et une couleur de texte — pratique quand le logo n'est pas encore prêt. La voie de l'emoji permet de piocher dans une sélection ou de coller n'importe quel emoji pris en charge par votre système.
Quelle que soit la source, les mêmes réglages de style s'appliquent : couleur de fond, arrondi des angles via un curseur de border-radius et un interrupteur de fond transparent pour les icônes qui ne doivent pas reposer sur un carré plein.
Un exemple concret
Supposons que vous tapiez la lettre A, choisissiez un fond bleu et augmentiez le border-radius pour adoucir les angles. L'aperçu se met à jour dans toutes les tailles en même temps, et le téléchargement vous remet favicon-16x16.png, favicon-32x32.png et favicon-48x48.png pour les onglets du navigateur et les tuiles Windows, apple-touch-icon.png en 180×180 pour les écrans d'accueil iOS, ainsi que android-chrome-192x192.png et android-chrome-512x512.png pour Android et les installations PWA — le tout dans une seule archive ZIP.
Tailles, formats et balises link
Chaque taille a son rôle : 16×16 et 32×32 s'affichent dans les onglets du navigateur, 48×48 couvre Windows, 180×180 est le touch icon d'Apple, et 192×192 et 512×512 alimentent Android et le manifest de l'application web. L'extrait généré les déclare avec les balises <link rel="icon">, <link rel="apple-touch-icon"> et <link rel="manifest">, plus une balise meta theme-color, prêt à être collé tel quel dans votre <head>.
La sortie est au format PNG et non un ancien fichier .ico multirésolution, et tout navigateur actuel accepte les favicons PNG via ces balises link. Pour que des icônes arrondies se fondent dans la barre d'onglets, activez le fond transparent afin que les angles restent nets au lieu d'afficher un carré coloré.