Générez les balises HTML de favicon et Apple touch icon

Il crée une référence de favicon pour chaque ressource fournie et ajoute automatiquement une référence Apple touch icon. Le résultat est déterministe, protège les valeurs d’attribut et peut être inséré directement dans un modèle, un site statique, un gestionnaire de contenu ou la mise en page d’une application.

Préparez un inventaire précis des icônes

Commencez par les fichiers d’icône que votre site publie déjà. Ajoutez une ligne par ressource, avec ses dimensions en pixels au format LARGEURxHAUTEUR et son chemin public ou son URL. Un jeu courant pour navigateur comprend de petits fichiers carrés pour les onglets et les favoris, tandis qu’une image carrée plus grande convient lorsqu’un appareil enregistre le site sur l’écran d’accueil. Vous pouvez indiquer un chemin relatif au site, comme /assets/icons/favicon-32.png, ou une URL absolue servie par un hébergeur de ressources. Chaque taille ne doit apparaître qu’une fois, car deux fichiers concurrents déclarés avec les mêmes dimensions rendent le choix ambigu. Le générateur valide chaque ligne avant de produire le balisage : chemins vides, dimensions incorrectes, tailles en double et valeurs extrêmes non prises en charge deviennent ainsi des erreurs explicites plutôt que des balises défectueuses. Il ne consulte pas le système de fichiers et ne télécharge aucune image ; les dimensions constituent donc votre déclaration. Vérifiez que chaque chemin sera public après le déploiement et que l’image possède réellement la taille indiquée.

Comprenez la sélection et l’ordre des balises

Pour chaque icône fournie, le résultat contient un élément link dont rel vaut icon, avec une valeur sizes normalisée en minuscules et un href échappé. Les balises destinées au navigateur sont classées de la plus petite surface en pixels à la plus grande, selon des critères de départage déterministes. Un même ensemble logique produit donc toujours la même sortie, quel que soit l’ordre des lignes reçues. L’Apple touch icon est choisi séparément. Une ressource carrée de exactement 180x180 est prioritaire, car cette taille est largement utilisée pour les icônes tactiles. À défaut, la plus grande icône carrée est retenue ; s’il n’existe aucune image carrée, la plus grande ressource fournie sert de solution de repli explicite. Le fichier sélectionné reste dans la liste normale des icônes, et un élément link supplémentaire l’identifie avec rel égal à apple-touch-icon. L’échappement protège les esperluettes, guillemets et chevrons présents dans les chemins sans modifier la destination interprétée par HTML. Aucun type MIME n’est déduit de l’extension, ce qui évite une déclaration erronée pour les routes transformées ou sans extension.

Insérez et contrôlez le balisage généré

Copiez la valeur html renvoyée dans le head du modèle commun qui dessert toutes vos pages publiques. Avec un framework, placez-la dans la mise en page racine ou le modèle de métadonnées plutôt que de la répéter dans chaque route. Le tableau tags fournit les mêmes lignes sous forme de chaînes séparées lorsqu’un script de construction requiert des valeurs structurées ; icon_count et apple_touch_size simplifient les contrôles automatisés. Après le déploiement, consultez la source de la page produite et vérifiez que les href se résolvent depuis l’origine publique définitive. Un chemin relatif commençant par une barre part de la racine du domaine ; sans barre, il est résolu par rapport au document courant et peut se comporter différemment dans une route imbriquée. Pour contrôler un remplacement, videz le cache du navigateur ou utilisez une fenêtre privée, car les favicons restent souvent longtemps en cache. Testez aussi l’ajout du site à l’écran d’accueil d’un mobile si ce parcours compte. Cet outil écrit uniquement des références : il ne crée pas d’image, ne modifie pas de manifeste web, ne téléverse pas de ressource et ne vérifie pas le type de contenu servi.