juin

4

Personnaliser l'icône des favoris

Catégorie: Webmastering | Commentaires fermés | 508 lectures

Favicon 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 pixel par pixel en taille réelle. Icon Workshop est spécialisé dans ce genre de manipulations. Il existe aussi des applications en ligne comme Favicon Generator.

Tout le monde n'est pas graphiste dans l'âme. De nombreux designers mettent leurs créations à disposition du public moyennant quelques euros ou gratuitement. Icon Finder est un moteur spécialisé dans la recherche d'icônes. 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 16x16 pixels ou 32x32 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 franchement désagréables, 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.

1
2
3
4
5
6
7

<head>
<title>Titre</title>
<link rel="shortcut icon" href="http://www.site.com/favicon.ico">
</head>

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.

1
2
3
4
5
6
7

<head>
<title>Titre</title>
<link rel="icon" type="image/png" href="http://www.site.com/image.png">
</head>


Commentaires

Les commentaires sont fermés pour cette note.