Ce que fait l’outil
Le générateur de favicon crée des icônes PNG, favicon.ico, site.webmanifest et un extrait HTML pour lier les fichiers. Vous pouvez choisir l’arrière-plan, la marge intérieure et le mode de recadrage.
Comment l’utiliser
- Importez un logo carré ou presque carré.
- Définissez l’arrière-plan, la marge intérieure, le mode de recadrage et le nom de l’application.
- Téléchargez le ZIP et placez les fichiers à la racine de votre site.
Ce que contient le paquet favicon
Le ZIP contient favicon.ico pour les navigateurs classiques, des icônes PNG en 16, 32, 48, 180, 192 et 512 pixels, un fichier site.webmanifest et un extrait HTML pour relier les fichiers. L’ensemble couvre onglets, favoris, icône iOS et icônes Android/PWA.
favicon.ico est construit à partir de plusieurs tailles PNG afin que les anciens et nouveaux navigateurs choisissent la bonne version. Le PNG 180x180 sert d’apple-touch-icon, tandis que 192 et 512 pixels sont référencés dans le manifest pour les icônes installables.
Préparer le logo source
Un logo carré ou presque carré avec assez d’espace autour du signe fonctionne le mieux. Si la marque est large ou haute, utilisez le fond et le padding pour éviter qu’elle touche les bords des petites icônes.
Un fond transparent convient aux signes simples, mais certaines plateformes peuvent le rendre différemment. Pour un rendu stable, choisissez une couleur de fond et vérifiez les aperçus 192, 48 et 32 pixels avant le téléchargement.
Installer les fichiers sur un site
Dans la plupart des projets, les fichiers du ZIP sont placés à la racine du site près de /favicon.ico, et l’extrait HTML va dans le head du modèle. Avec un framework, placez les fichiers dans le dossier public copié sans changement de nom.
Après remplacement du favicon, les navigateurs et moteurs de recherche peuvent encore afficher l’ancienne icône depuis le cache. Testez en navigation privée, videz le cache et laissez le temps au nouveau crawl si l’icône était déjà publiée.