Evaluation: 
(2 votes)
(2 votes) 
Loading...La favicon (shortcut icon, icône de page) est l’icône qui s’affiche dans la barre d’adresse de votre navigateur et dans la liste de vos favoris.
C’est une manière élégante, pro et facile de personnaliser votre site en lui apportant la petite touche supplémentaire qui plaira à vos visiteurs !!
Tout le monde a le même problème: faut que cela fonctionne sous Firefox et Internet Explorer.
De nombreux blogs ou pages vous conseilleront les outils pour créer votre icône (voir Références en bas de page). Personnellement, j’utilise Micro Angelo.
L’objectif de cette Xème page dédiée à favicon est de vous donner la bonne manière d’ajouter la vôtre et quelques conseils pour avoir la meilleure icône.
Ce post n’est pas un tutoriel détaillant toutes les solutions possibles.
Bonne manière: car hélas il y a beaucoup de mauvaises manières d’implémenter une favicon et beaucoup d’erreurs sur les sites qui en parlent.
La meilleure icône: car il y a de très nombreux formats, tailles d’images qui peuvent être utilisées mais toutes ne sont pas optimales.
Pour Firefox
Firefox comme presque tous les autres browsers (sauf IE) respecte les standards.
Le code: <link rel=”icon” type=”image/png” href=”/images/favicon.png” />
Taille de l’icône: 32×32
Format de l’icône: .png
- meilleur gestion de la transparence que les .gif
- bonne compression comme les .jpg
Pour Internet Explorer
IE, on ne le répétera jamais assez, ne respecte pas les normes, les standards et donc il faut gérer son cas à part.
Le code: <link rel=”shortcut icon” type=”image/x-icon” href=”/images/favicon.ico” />
Taille de l’icône: 16×16
Format de l’icône: .ico – 256 couleurs
- IE ne reconnaît que les .ico, utilisez un bon outil pour créer ce type de fichier
- renommer un .bmp en .ico peut générer des problèmes
- malheureusement un taille de 32×32 ça ne marche pas avec IE et plus de 256 couleurs non plus
- Le code qui fonctionne pour IE fonctionne aussi pour Firefox
Il peut arriver que IE ne gère correctement la favicon que si vous avez un lien dans votre bookmark vers votre site.
Pour résoudre certains problèmes d’affichage de la favicon avec IE, il est utile de supprimer son historique.
Pour Firefox et IE
Pour faire fonctionner votre favicon sous Firefox et IE, il faut impérativement écrire les liens suivant dans le bon ordre entre les balises <head> et </head> de votre page:
<link rel=”shortcut icon” type=”image/x-icon” href=”/images/favicon.ico” />
<link rel=”icon” type=”image/png” href=”/images/favicon.png” />
Comme Firefox comprend les deux instructions, il faut terminer par celle qui lui ai dédiée car elle remplacera la référence précédente.
Si vous ne désirez pas créer une icône spécifique à Firefox il vous suffi d’ignorer la seconde ligne de code.
Quelques conseils
Pas d’icône animée, ça n’apporte rien (techniquement c’est faisable).
A la longue c’est fatiguant et ça déconcentre. De façon générale tout ce qui bouge ou clignote sur une page est à éviter.
En recherchant systématiquement favicon.ico (et en ne la trouvant généralement pas), les navigateurs remplissent les logs des serveurs web avec des requêtes inutiles, ce qui complique la tâche des webmestres.
Il est donc important d’en placer un (même vide) à la racine de votre site.
Cependant, placer un fichier favicon.ico à la racine d’un site comme solution de simplicité pour que IE la détecte automatiquement n’est pas une solution non plus.
Cette pratique s’apparente à des attaques de déni de service, ou Denial of Service (DoS).
Il est donc important de placer le bon tag <link> dans le header de votre page même si IE est capable de détecter automatiquement le favicon.ico à la racine de votre site.
On respecte le copyright des icônes.
Il y a des sites dédiés qui vous en proposeront gratuitement: http://www.favicon.fr/
Je ne recommande pas du tout l’utilisation de code conditionnel (ce n’est pas standard) du type:
<!–[if IE]><link rel=”shortcut icon” type=”image/x-icon” href=”images/favicon.ico” /><![endif]–>
Exemple
Voici les images utilisées sur mon site:
favicon.png
favicon.ico
Références
Icones de pages web (la bonne manière)
Favicon – L’icône de votre site dans la barre d’adresse
Favicon visible sur IE et Firefox
7 comments so far