10
Oct

Favicon avec IE et Firefox

   Posted by: Grumelo   in web

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.png

favicon.ico

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

Icônes de pages web, la favicon.ico

Comment ça marche: favicon

Un favicon pour votre site

Evaluation: Pas terribleAssez bienBienSuper!Excellent! (2 votes)
Loading...

Tags: , , , ,

This entry was posted on Friday, October 10th, 2008 at 12:31 and is filed under web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 comments so far

Grumelo
 1 

Il est pas mal ce post, non ? 😀

October 10th, 2008 at 17:55
 2 

Sur mon site de photo, je n’utilise que la solution .ico qui fonctionne sous IE et Firefox. Quel est l’impact ?

October 14th, 2008 at 15:18
 3 

Je suppose que tu parles d’Object Photo. L’icône sous Firefox aurait pu être de meilleure facture. Pour des icônes simple ce n’est pas un problème. La solution que je décris permet d’optenir le meilleur pour chaque browser. je vais ajouter un message qui rappel que la solution pour IE fonctionne aussi pour Firefox.

October 14th, 2008 at 15:31
ParaBug
 4 

Excellent article, l’ordre des deux tags est respecté, etc… avec la touche personnelle intransigeante, marque de fabrique, hé hé.
Utilisateurs du penguin, GIMP et png2ico permettent de générer le .png et .ico

October 20th, 2008 at 15:11
 5 

Je ne comprend pas ton dernier conseil concernant la mise des fichiers sur la racine: Si on ne les met pas sur la racine: on génère des logs alors pourquoi ne pas la mettre ici?

Avec 1500 pages vues par jours, ma base de donnée se remplie à vue d’oeil de logs inutile, depuis que j’ai mis mes favicon, plus de problème.

February 23rd, 2010 at 10:39
 6 

Mon message n’est pas clair en effet je l’ai modifié. Ce que je voulais dire c’est qu’il ne suffit pas de simplement placé un fichier à la racine, il faut aussi mettre le bon tag dans le header.

February 23rd, 2010 at 12:44
Gromelu
 7 

Bonjour, j’ai beau vider mon cache, supprimer mon ancien favicon de tous mes fichiers, quand je veux en mettre un nouveau, firefox (tout comme chrome, etc.) ne le prennent pas en compteet affichent l’ancien ?

Ps: très bon post,essaye juste si possible de mettre ton site en français :p

May 15th, 2017 at 18:05

Leave a reply

Name (*)
Mail (will not be published) (*)
URI
Comment