Le favicon et le App Icon

Le favicon est cette petite icône que l'on retrouve à gauche de la barre d'URL du navigateur ou de l'onglet de la page Web. L'App Icon, quant à lui, est l'icône que l'on retrouve sur un appareil mobile lorsqu'on crée un raccourci vers un site Web.

Dans cet article, je vous explique comment créer le favicon à partir d'une image ou à partir de zéro puis comment l'intégrer à votre site Web. Je vous explique également comment créer et intégrer un App Icon.

▼Publicité

Voici comment le favicon apparaîtra dans un navigateur :

Exemple de favicon

Exemple de favicon

Et voici un App Icon :

App Icon

Caractéristiques du favicon

Certains navigateurs sont assez flexibles sur les caractéristiques techniques du favicon. D'autres, comme Internet Explorer, sont très pointilleux. C'est pourquoi, pour créer un favicon, il faut respecter scrupuleusement les consignes suivantes :

  • Le favicon est une image en 256 couleurs dont la taille est de 16x16 ou 32x32 pixels.
  • Le fichier de l'image est idéalement de type .ico. Ceci était une exigence sous Internet Explorer. Les autres navigateurs acceptent généralement d'autres types, par exemple .png. L'utilisation d'un fichier de type .ico est cependant préférable puisque ceci assure que le favicon sera reconnu sur l'ensemble des navigateurs. Notez qu'un fichier .ico est en fait un fichier .bmp renommé… mais si vous utilisez cette technique, il se peut que IE ne fasse pas apparaître votre favicon. Il est plus prudent d’utiliser un site ou un logiciel de conversion.
  • Le fichier du favicon est généralement placé à la racine du site Web (ex : au même endroit que index.php).

Sites Web pour générer un favicon

Voici quelques sites de conversion en ligne :

Ces sites vous permettent de créer un icône en ligne à partir de zéro :

Attention : tout comme les autres images utilisées sur votre site Web, le favicon doit être libre de droits ou vous devez être le détenteur de ces droits.

Balise HTML pour ajouter le favicon

Une fois le favicon généré, il faut ajouter une balise HTML dans la page Web pour en informer le navigateur.

Dans la section <head> de votre site Web, ajoutez la ligne suivante. Ceci suppose que votre fichier porte le nom favicon.ico et qu'il est placé à la racine de votre site Web :

HTML 5

<link rel="icon" href="favicon.ico" />

Il est également possible de spécifier l'URL complet du site Web :

HTML 5

<link rel="icon" href="http://monsiteweb.com/favicon.ico" />

Icône utilisée sur mobile (App Icon)

Sur un appareil mobile, il est possible de créer un raccourci vers un site Web. Ce raccourci apparaîtra dans la liste des applications installées.

Il est intéressant de configurer l'icône qui sera utilisée lorsque notre site Web sera mis en raccourci. Il est possible d'utiliser la même image que pour le favicon. Cependant, elle devra mesurer 152x152 pixels.

La plupart des outils de conversion cités plus haut permettent de générer l'icône pour appareil mobile.

Vous pouvez nommer cette image comme bon vous semble mais il est d'usage de l'appeler apple-touch-icon.png. En effet, certains systèmes pourraient la reconnaître automatiquement simplement par son nom.

Pour vous assurer que votre image soit reconnue sur tous les systèmes qui supportent cette fonctionnalité, ajoutez la balise suivante :

HTML 5

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>

Dans les faits, il est possible de créer une série d'icônes de différentes tailles différents afin d'assurer un excellent rendu sur toutes les tailles d'appareils. Consultez la documentation officielle d'Apple à ce sujet.

Cache du navigateur

Les navigateurs mettent en cache certains fichiers afin d'accélérer le chargement des pages Web. Ceci peut vous causer des soucis pendant le développement du site, notamment lorsque vous modifiez un fichier .css, un fichier .js ou le favicon.

Le rafraîchissement d'un favicon mis en cache peut se faire de différentes façons :

  • Appuyez sur F5 pour forcer le rechargement de tous les fichiers dont l'horodotage a changé.

    ou

  • Appuyez sur Ctrl+F5 pour forcer le rechargement de tous les fichiers, peu importe qu'ils aient été modifiés ou non.

    ou

  • Dans l'URL d'un site local, changez 127.0.0.1 pour localhost.
    Ex : changez « http://127.0.0.1/monsite » pour « http://localhost/monsite ».

    ou

  • Refermez la page Web, videz l’historique du navigateur puis ouvrez à nouveau la page Web.

    ou

  • Allez directement à l'adresse du favicon (ex : http://127.0.0.1/monsite/favicon.ico) puis réaffichez la page Web.

Valider le favicon et l'App Icon

Une fois le favicon et l'App Icon en place, il est possible, bien sûr, de vérifier leur bon fonctionnement simplement en ouvrant le site dans différents navigateurs et en créant un raccourci sur différents appareils mobiles.

Cette vérification peut être complétée par l'utilisation d'un validateur de favicon, comme celui qu'on retrouve ici : http://realfavicongenerator.net/favicon_checker

Ce validateur vous montrera l'apparence du favicon et de l'App Icon dans différents contextes comme iOS Safari, Adroid Chrome, Windows 8 et 10 ou encore MacOS Safari. De plus, il effecturera des vérifications techniques, comme le chemin pour atteindre le favicon ou encore la taille de l'image en pixels.

Pour plus d’informations

« Icônes de pages Web, la favicon.ico ». XHTML.net. http://www.xhtml.net/xhtmlcss/favicon

« Create a favicon for your site in 8 steps ». Creative Bloq. http://www.creativebloq.com/illustrator/create-perfect-favicon-12112760

«&nbspQuick Tip: Add Favicons Quickly and Easily to Your HTML ». SitePoint. https://www.sitepoint.com/quick-tip-add-favicons-quickly-and-easily-to-your-html

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories