Palms Web

Déployer vos projets Web

palms-web-touch-icon-favicon-decouvrez-leur-importance-et-augmenter-votre-visibilite

Favicon, Touch-Icons, découvrez leur importance et augmentez votre visibilité.

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.

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">

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">

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"
}

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">

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 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”. 

Des articles qui peuvent vous plaire