Comment générer et installer des favicons pour son site web
Publié le :
Les favicons sont des images représentant le logo de votre site ; elles permettent aux navigateurs (Firefox, Edge, Chrome…) d'afficher cette image dans les onglets de navigation, dans la liste des favoris ou comme raccourci d'un document enregistré en favori sur votre smartphone, tablette ou PC.
Générateur en ligne de favicon
Favicons.fr
Ce site est un générateur en ligne qui vous fourni une douzaine d'icônes multi-résolution et vos images pour les icônes de favoris. Il suffit de télécharger son image source optimisée et le pack d'icône est générer avec avec le fichier xml browserconfig.xml pour Windows.
Voir comment générer facilement vos icônes sur favicons.fr.
Realfavicongenerator
Voici un site anglophone très pratique qui vous génère le stricte minimum en matière de favicon. Vous fournissez une image png carrée (optimisée) de 512 pixels de côté.
Le générateur produit les icones, le webmanifest et le code des balises html à insérer dans votre entête (head).
Une fois que vous avez installé les codes et les images, vous avez un outils pour vérifier que tout fonctionne bien.
Voir le site : realfavicongenerator.
Installation de vos favicons sur votre site
Toutes images se mettent à la racine du site. Il en va de même pour les fichiers browserconfig.xml et le webmanifest (votre-site.webmanifest).
Sur la page d'accueil, dans le head, vous installez le code des balises meta et link. Voici un exemple assez minimaliste et pourtant efficace et suffisant ci-dessous.
<link rel="shortcut icon" type="image/x-icon" href="https://www.votre-site.fr/favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="https://www.votre-site.fr/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://www.votre-site.fr/apple-touch-icon.png">
<link rel="mask-icon" href="https://www.votre-site.fr/safari-pinned-tab.svg" color="#5bbad5">
<link rel="manifest" href="https://www.votre-site.fr/votre-site.webmanifest">
<meta name="msapplication-TileColor" content="#ffc40d">
Sur les autres pages il suffit d'installer juste la balise link du webmanifest et celle du favicon pour le navigateur Safari. En effet, il semblerait que ces navigateurs partent du principe qu'il peut y avoir une icône dédiée à chaque page du site.
<link rel="mask-icon" href="https://www.votre-site.fr/safari-pinned-tab.svg" color="#5bbad5">
<link rel="manifest" href="https://www.votre-site.fr/votre-site.webmanifest">