Favicon, Touch-Icons, découvrez leur importance et augmentez votre visibilité
Mis à jour le :
En facilitant la navigation des utilisateurs, la Favicon et les Touch-Icons sont devenus des composants indispensables aux interfaces Web.
Favicon vs Touch-Icons
La Favicon est une icône qui apparaît dans la barre d’adresse, les signets, les onglets d’un navigateur internet. L’icône reprend généralement le logo du site pour apparaître en miniature. En facilitant l’identification du site par l’utilisateur, la Favicon est un élément d’identité visuelle primordial .
Les Touch-Icons caractérisent les icônes qui s’affichent sur les supports mobiles. Initialement conçues pour Apple (les Apple Touch Icons s’affichent sous Safari mobile), elles fonctionnent à présent sous Android.
Intégration d’une Favicon
La Favicon doit être de format carré et d’une taille minimale de 180×180 pixels.
Microsoft recommande pour ses navigateurs les formats suivants : 16×16, 32×32 et 48×48 et Apple un format de 180×180.
Une fois le fichier créé, vous devez le déposer à la racine de votre compte FTP associé à votre domaine. Insérer à présent, la balise ci-dessous entre les balises « head » de votre code HTML (header.php ou index.html).
<link rel="shortcut icon" type="image/x-icon" href="https://domaine.com/favicon.ico">Remplacez « https://domaine.com/favicon.ico » par le chemin de votre fichier.
Intégration des Touch-Icons
Les Touch-Icons sont des déclinaisons de votre Favicon dans différents formats. Une fois la déclinaison créée, vous devez la déposer à la racine de votre compte FTP associé à votre domaine. Insérer à présent, les balises ci-dessous entre les balises « head » de votre code HTML (header.php ou index.html).
<!-- Favicon / Touch-Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="https://domaine.com/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://domaine.com/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://domaine.com/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://domaine.com/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://domaine.com/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://domaine.com/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://domaine.com/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://domaine.com/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://domaine.com/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://domaine.com/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://domaine.com/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://domaine.com/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://domaine.com/favicon-16x16.png">Veillez à bien respecter les différents formats de fichiers et à remplacez « https://domaine.com/ » par le chemin de vos fichiers.
Afin d’afficher les Touch-Icons vous devez créer un fichier « manifest.json » et le déposer à la racine de votre compte FTP associé à votre domaine, voici les données à renseigner :
{
"name": "NOM",
"short_name": "NOM",
"icons": [
{
"src": "https://domaine.com/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://domaine.com/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Veillez à remplacer « NOM » par le nom de votre site, à bien respecter les différents formats de fichiers et remplacez « https://domaine.com/ » par le chemin de vos fichiers.
Une fois ces fichiers crées et déposés à la racine de votre compte FTP associé à votre domaine, vous pouvez insérer les balises ci-dessous à la suite des balises dans le « head » de votre code HTML (header.php ou index.html).
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://domaine.com/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">Pour personnaliser vos Touch-Icons, vous pouvez changer les couleurs des balises « meta ».
Utiliser un générateur pour créer vos Favicon et Touch-Icons
Pour vous simplifier la création et l’intégration de vos Favicon et Touch-Icons, vous pouvez utiliser le générateur realfavicongenerator.net ou son plugin équivalent pour le CMS WordPress Favicon par RealFaviconGenerator.
Ajoutez votre Touch-Icon
Pour intégrer votre icône d’accès rapide à votre site web sur vos supports mobiles, rendez-vous sur la page d’accueil de votre site en ouvrant Safari. Cliquez sur le bouton de partage situé en bas de l’écran, sélectionnez « sur l’écran d’accueil ».