Les favicons remplacent l'icône du globe dans la barre d'adresse.
Crédit d'image : r0mu/iStock/Getty Images
Un favicon est un moyen créatif et pratique d'ajouter une touche visuelle subtile à la présence de votre site Web. Les favicons sont de petites images que les navigateurs Web utilisent sur les onglets de page et les barres d'adresse. Ils affichent un logo ou une image associée au site Web qui sert d'identifiant visuel de la marque à côté du titre ou de l'URL. Les favicons sont des identifiants de site particulièrement utiles dans la navigation par onglets, car l'espace de texte disponible utilisé pour les titres de page diminue presque à mesure que l'utilisateur ouvre plus d'onglets.
Étape 1
Concevez l'icône que vous souhaitez utiliser dans un programme de retouche photo ou graphique. Vous pouvez prendre un logo ou une image existant associé à votre site ou à votre marque et l'ajuster pour qu'il respecte les normes favicon. Les favicons utilisent toujours des dimensions carrées et ont une taille maximale prise en charge de 256 par 256 pixels. Recadrez et redimensionnez l'image pour qu'elle tienne dans un carré de 256 x 256 pixels si vous envisagez d'utiliser un packer d'icônes pour prendre en charge plusieurs tailles. Si vous n'allez faire qu'une seule version, optez pour une taille de 16 x 16 pixels.
Vidéo du jour
Étape 2
Exportez le graphique de l'icône en tant que fichier image PNG à partir du programme de conception graphique. PNG est le format d'image standard du W3C pour les favicons. Certains navigateurs peuvent afficher les fichiers JPG sous forme de favicons, mais la norme n'est pas officiellement prise en charge. De plus, les programmes de compression d'icônes peuvent ne pas fonctionner avec des images dans d'autres formats. Les favicons prennent également en charge les fichiers GIF et ICO.
Étape 3
Emballez votre fichier PNG exporté dans un fichier ICO avec un programme de conversion ICO. Un programme de conversion d'icônes traite un favicon PNG, le formate pour plusieurs tailles de favicon différentes largement prises en charge et les intègre dans un seul fichier. Les fichiers ICO fournissent des favicons de résolution supérieure à 16 x 16 pixels pour les appareils qui les prennent en charge.
Étape 4
Connectez-vous à votre service d'hébergement de site Web et téléchargez le fichier PNG ou ICO sur le serveur multimédia de votre site Web. Copiez l'URL du fichier téléchargé; vous en aurez besoin pour attacher le favicon au site.
Étape 5
Ouvrez votre programme d'édition de site et ajoutez le code suivant, modifié avec l'URL du fichier favicon comme indiqué, à la section de votre site Web.
Pour les fichiers PNG:
Pour les fichiers ICO:
À moins que vous n'utilisiez un site contrôlé par CMS ou que vous incluiez une section basée sur un fichier, vous devrez ajouter le code à chaque page sur laquelle vous souhaitez afficher l'icône. Le favicon apparaît une fois que vous avez enregistré et mis à jour les pages du site.
Pointe
Les programmes de retouche photo comme Photoshop et Corel Draw fonctionnent bien pour la conception et le formatage de l'icône. Alternativement, vous pouvez utiliser des programmes gratuits comme Paint.net et Pixlr.
Avertissement
Certains navigateurs associent automatiquement un fichier image situé dans le répertoire /favicon en tant que favicon; cependant, l'organisation W3C décourage cette pratique car il ne s'agit pas d'une norme universellement prise en charge et est contraire aux principes de l'architecture Web. De plus, de nombreux services d'hébergement Web et systèmes CMS ne permettent pas à l'utilisateur de placer du contenu multimédia en dehors des répertoires de fichiers multimédias, ce qui rend cette pratique impossible.
