Personnaliser l’icône des favoris

Apparue avec la version 5 d’Internet Explorer, le favicon est la contraction de « favori » et « icon ». Cette image de taille réduite se retrouve dans la barre d’adresse du navigateur. Elle apparait sur chaque onglet ouvert et s’intègre agréablement aux favoris (marque-pages). Dans une longue liste de liens enregistrés, le favicon se distingue des autres et rend la recherche plus aisée. Cette icône est facile à mettre en place sur son site web: créer l’image dans un format standard, ajouter une ligne de code pour faire la liaison et le tour est joué.

Dessiner son icône

Commencez par dessiner l’image qui correspond le mieux à votre site: logo, mascotte, initiales du nom… Ensuite, il faut réduire la taille à 16 pixels de côté. Le résultat est souvent décevant. Pour cette raison, il vaut mieux travailler au pixel près en taille réelle. Icon Workshop est spécialisé dans ce genre de manipulation. Il existe aussi des applications en ligne comme Favicon Generator pour les plus talentueux.

De nombreux designers mettent leurs créations à disposition du public moyennant quelques euros ou gratuitement. Icon Finder est un moteur spécialisé dans icônes. Un très bon moyen pour trouver l’image adaptée à votre projet. Après une recherche, vous définissez la taille, le format et vous téléchargez le tout. Et pour ceux qui ne trouvent vraiment pas, j’ai regroupé une petite collection (zip 16,3 Mo).

Quelques règles à respecter

La taille de l’image doit être de 16×16 pixels ou 32×32 pixels. Dans ce dernier cas, la taille sera réduite de moitié automatiquement par le navigateur. Le nombre de couleurs ne doit pas dépasser 16 couleurs.

Pour ce qui concerne le format du fichier, le gif et le png sont acceptés par les navigateurs respectueux des standards du web. Comme Internet Explorer a toujours voulu se distinguer, il n’autorise que le format .ico Ce format n’est autre qu’une image bitmap (.bmp) générée par Windows. Il suffit alors de renommer l’extension (favicon.bmp par favicon.ico) pour être reconnu. Cette manipulation ne fonctionne pas pour les autres extensions.

Capture favicon sur KeylinePetit conseil en passant, prudence avec les icônes animées. Certaines sont discrètes et ne posent pas de problème, d’autres sont désagréables et irritantes, comme sur le site de Keyline. N’essayez pas de vous faire remarquer à tout prix.

Créer la liaison

Vous avez maintenant votre icône de 16 pixels. Il va falloir faire la liaison entre la page HTML et le fichier image. Deux possibilités: soit vous ne jurez que par Internet Explorer, soit vous préférez une méthode plus propre et universelle.

Internet Explorer — La méthode la plus simple c’est d’ajouter l’image dans le dossier racine du serveur. L’image doit impérativement porter le nom de favicon.ico sinon ça ne marche pas. L’autre méthode consiste à insérer une ligne de code dans balise <head>. Dans ce cas, il faudra le faire pour toutes les pages.

{code type=html}

Titre

{/code}

Mozilla et consort — Le code à insérer est pratiquement identique mais à l’avantage d’être conforme aux normes. Malheureusement, Internet Explorer ne comprend que ce qu’il veut bien et n’en tiendra pas compte. Remarquez le type informe le navigateur du type de document (une image) et son format (pgn). Une icône au format gif porte l’indication type="image/gif" et type="image/x-icon" pour un fichier .ico. N’oubliez pas d’envoyer votre image sur le serveur et au bon endroit.

{code type=html}

Titre

{/code}

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s