Comment créer et utiliser un favicon (favicon.ico)

Favicon est un mot-valise né de la contraction de « favorites » (signets) et « icon » (icône). Le mot est dérivé de la liste des signets de Microsoft Internet Explorer, aussi connue sous le nom de « Favorites list ».

Lorsque vous ajoutez un site dans les signets d’Internet Explorer (version 5 et celles plus récentes), ce dernier effectue une vérification au serveur afin de confirmer l’existence d’un fichier favicon.ico. S’il existe, le favicon.ico s’affichera juste à côté du signet texte.

Selon le navigateur utilisé, le favicon peut s’afficher à plusieurs endroits et non seulement dans la liste des signets. Par exemple, il peut apparaître dans la barre d’adresse ou dans le titre de l’onglet.

Veuillez suivre ces instructions détaillées pour la création et l’installation d’un favicon sur votre site HostPapa :

Qu’est-ce qu’une favicon
Favicon est un mot-valise signifiant « icône de favori ». Le mot est dérivé de la liste des signets de Microsoft Internet Explorer, aussi connue sous le nom de « Favorites list ». Lorsque vous ajoutez un site dans la liste des signets d’Internet Explorer (versions 5 et plus récentes), ce dernier effectue une vérification au serveur afin de confirmer l’existence d’un fichier favicon.ico. S’il existe, le favicon.ico s’affichera juste à côté du signet texte.

D’autres navigateurs, comme Mozilla, offrent également du soutien pour les favicons. Selon le navigateur utilisé, la favicon peut s’afficher à plusieurs endroits et non seulement dans la liste des signets (en fait, elle pourrait même ne pas apparaître du tout dans la liste des signets). Par exemple, elle peut apparaître dans la barre d’adresse ou dans le titre de l’onglet.

Comment créer une favicon
Pour concevoir un fichier favicon.ico, créez tout simplement un fichier .PNG de 16×16 et convertissez-le en une ressource icône avec png2ico. Si vous le désirez, vous pouvez ajouter plusieurs images à la même ressource icône afin d’obtenir différentes résolutions. La plupart des navigateurs n’utilisent qu’une image 16×16, mais dans différents contextes (comme par exemple, lorsque vous déplacez une URL de la barre d’adresse à votre bureau), une plus grande icône peut être affichée. Si la ressource icône ne contient qu’une image 16×16, elle sera redimensionnée à la grandeur appropriée, il n’est donc pas techniquement nécessaire d’ajouter différentes résolutions. Toutefois, ceci pourrait augmenter la qualité de l’icône affichée.

Lorsque vous créez des images à inclure dans votre favicon.ico, n’oubliez pas que l’icône pourrait être affichée sur différentes couleurs d’arrière-plan; vous devriez donc utiliser la transparence plutôt qu’un arrière-plan uni, pour ainsi éviter que votre icône n’apparaisse dans une boîte. Notez que les ressources icônes ne supportent que la transparence binaire, c’est-à-dire qu’un pixel peut être visible ou invisible, mais non pas 30 % translucide.

Installation de votre favicon
Pour ajouter votre nouveau fichier favicon.ico à une page web, placez-le sur le serveur dans le même répertoire que la page web pour laquelle il est destiné (par exemple : www.exemple.com/foo/favicon.ico pour www.exemple.com/foo/index.html). C’est le premier endroit où un navigateur effectuera ses recherches. S’il n’y trouve pas une icône, il vérifiera le répertoire de premier niveau du serveur (www.exemple.com/favicon.ico pour le serveur www.exemple.com); donc, en le plaçant là, vous obtiendrez une favicon par défaut pour toutes les pages de votre domaine. Selon le navigateur et la configuration, le favicon.ico n’est pas toujours rendu, même s’il est situé dans l’un de ces endroits, à moins que la page web ne déclare explicitement sa présence. Pour déclarer la présence d’une icône sur votre page web, ajoutez les lignes suivantes dans la section <head> de votre page :

<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

Ce billet est également disponible en : Anglais Espagnol

Articles connexes