Ce cours est visible gratuitement en ligne.

J'ai tout compris !
Un favicon pour votre site

Un favicon pour votre site

Mis à jour le mardi 29 octobre 2013
Image utilisateur

Vous n'avez jamais remarqué la petite icône "

" qui s'affiche à côté de l'adresse lorsque vous êtes sur le site du Zér0 ?

Cette petite image apparaitra si vous utilisez Internet Explorer 6 ou mieux, Firefox ou les dernières versions d'Opera. Ici, je vais vous apprendre à créer cette icône et à l'afficher à côté de l'adresse de votre site. Et vous allez voir, c'est simple comme tout. ;)

Créer le favicon

Rien de bien compliqué dans cette partie, je vous rassure tout de suite. :D Si vous suivez bien mes conseils, vous ne pouvez pas vous tromper ! Avant de commencer, sachez que cette petite icône s'appelle un favicon, comme icône favori. Eh oui, ça ne s'invente pas : c'est spécialement utilisé pour les favoris !

Tout d'abord, ouvrez un éditeur d'images, quel qu'il soit. Puisqu'on part de zéro, je vais utiliser Paint qui est livré directement avec Windows, et vu que presque tout le monde le possède, je suis sûr de n'oublier presque personne. ^^ Sachez toutefois qu'il est beaucoup plus simple de faire un favicon avec des logiciels plus élaborés, comme Photoshop, ou Paint Shop Pro.

Donc, ouvrez Paint. Une image blanche s'affiche. Réduisez-la pour obtenir une image de 16 pixels sur 16. Pour cela, il vous suffit d'aller dans le menu Image puis Attributs..., et complétez les champs Largeur et Hauteur en indiquant comme valeur 16.

Vous voilà donc avec votre superbe image blanche de 16 pixels par ! :p Rassurez-vous, on ne va pas la laisser comme ça. C'est même vous qui allez la réaliser. Laissez libre cours à votre imagination, et créez une icône pour votre site. Si vous n'avez pas d'imagination, vous pouvez toujours mettre les initiales du nom de votre site.

Voilà ce que j'ai réalisé :

Image utilisateur

Bon d'accord, ce n'est pas le Pérou, mais c'est un début !
Avec un peu de pratique, vous verrez que ce n'est pas difficile de réaliser un joli favicon.

Une fois votre superbe favicon réalisé, il va falloir l'enregistrer, sinon on aurait fait tout cela pour rien ! Allez donc dans Fichier et Enregistrer sous... pour enregistrer votre oeuvre. Nommez-la favicon.ico, tout en veillant à changer le type de l'image en Bitmap 16 couleurs. Paint fera automatiquement la conversion en .ico.

Voilà, votre favicon est entièrement créé ! Rendez-vous dans la prochaine sous-partie pour savoir ce que l'on va en faire !

Utiliser le favicon

Maintenant que vous avez créé votre icône, il va falloir en faire quelque chose, non ? Eh bien vous allez voir que ce n'est vraiment pas compliqué, mais alors vraiment pas ! :p

Il existe plusieurs solutions pour insérer un favicon dans votre site. La plus simple consiste juste à exporter le fichier favicon.ico à la racine de votre site. Et normalement, magie :magicien: , votre favicon s'affiche dans tout votre site ! Le problème de cette méthode, c'est qu'il n'est pas possible de faire un favicon différent pour toutes les pages. Il existe donc une autre méthode.

Une balise à insérer

Voilà, tout est dans le titre : il vous faudra insérer une balise META, c'est-à-dire entre les balises <head></head>, un certain code pour que le favicon s'affiche. Mais la mauvaise nouvelle, c'est qu'Internet Explorer (encore lui :colere2: ) ne respecte pas les standards du web, et qu'il vous faudra faire deux lignes différentes, pour les deux navigateurs.

Pour les navigateurs qui respectent les standards

Il y a un code tout simple à rentrer :

<link rel="icon" type="image/png" href="favicon.png" />

Voilà, maintenant je vais vous expliquer un peu tout ça :

  • rel="icon" signifie que l'image en question est une icône ;

  • type="image/png" définit l'objet comme une image au format png ;

  • href="favicon.png" est simplement l'adresse de l'image.

Citation : Vous

Mais tu nous avais dit que le seul format pour les favicons, c'était le .ico !

Hé oui, je vous ai caché que les navigateurs récents pouvaient afficher des images autres que des .ico pour le favicon ! Vous pouvez donc utiliser quatre types d'images :

  • le .gif ;

  • le .jpg ;

  • le .png

  • le .ico, mais il faudra entrer le code "image/x-icon".

Voilà à peu près tout pour ce qui est du favicon pour les navigateurs standardisés. ^^

Et Internet Explorer ?

Comme je l'ai dit plus haut, Internet Explorer ne respecte pas les standards du web. Il vous faudra donc entrer un code différent si vous voulez que votre favicon s'affiche sous Internet Explorer.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

Notez qu'Internet Explorer ne supporte que le .ico.

Comment faire un site compatible pour les deux ?

Heureusement, il y a une solution : ce tuto, qui vous permet d'optimiser votre site pour tous les navigateurs. Voici donc le code à insérer pour que votre site soit compatible :

<link rel="icon" type="image/png" href="favicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->

Et voilà, vous avez inséré le favicon dans votre site !

Annexes

Vous avez donc inséré votre favicon, mais vous êtes intrigués par cette troisième et dernière partie. Je vous rassure tout de suite, rien de bien compliqué dans cette partie. Je vais juste vous fournir de petits liens, qui vous aideront à faire des favicons, et d'autres choses même !

Je suis fainéant

La légende est on ne peut plus vraie : les webmasters sont de grosses feignasses :-° ... Et faire un favicon point par point vous énerve. Et c'est ainsi que certaines personnes ont créé les générateurs de favicons ! Tout de suite, le lien : Cliquez ici !

Euh... est-ce que j'ai réussi à insérer le favicon ?

Vous voulez être sûrs que tout fonctionne bien ? Foncez sur le validateur de favicon.

Paint, je trouve ça nul, il n'y a pas autre chose ?

Si, il y a d'autres éditeurs d'icônes, comme IconEdit32, que vous pouvez télécharger ici.
Certains Zér0s m'ont aussi conseillé IcoFX (en anglais).

C'est bon, vous avez fini !

Voilà, vous savez maintenant créer cette petite icône et l'ajouter sur votre site. Ce n'est pas grand-chose, mais c'est très utile et très utilisé pour les bookmarks (les liens rapides). Il n'est désormais pas obligatoire de mettre une description sur vos liens, seule l'image suffit. ;)

  • Thématiques du cours : Web

déroulement d'un cours

  • 1

    Dès aujourd'hui, vous avez accès au contenu pédagogique et aux exercices du cours.

  • 2

    Vous progressez dans le cours semaine par semaine. Une partie du cours correspond à une semaine de travail de votre part.

  • !

    Les exercices doivent être réalisés en une semaine. La date limite vous sera annoncée au démarrage de chaque nouvelle partie. Les exercices sont indispensables pour obtenir votre certification.

  • 3

    À l'issue du cours, vous recevrez vos résultats par e-mail. Votre certificat de réussite vous sera également transmis si vous êtes membre Premium et que vous avez au moins 70% de bonnes réponses.

L'auteur

Découvrez aussi ce cours en...

Exemple de certificat de réussite
Exemple de certificat de réussite