Favicon

Prenez un instant pour regarder les onglets ouverts dans votre navigateur, vous en avez minimalement un (ce site), mais probablement aussi quelques autres. Remarquez les petits logos dans ceux-ci vous permettant d'identifier rapidement quels sites sont ouverts dans votre navigateur.

Ces icônes sont utilisées à plusieurs sauces afin d’aider à identifier rapidement certains sites dans différents contextes. Par exemple, plusieurs navigateurs proposent une page d’accueil présentant nos sites préférés ou régulièrement visités avec leur icône bien visible.

Les appareils mobiles les utilisent lorsqu'un site est ajouté à l’écran d’accueil.

Les favoris (bookmarks) d’un navigateur les affichent afin d’aider à trouver rapidement le site recherché.

À l’origine le nom "favicon" provient de la contraction des mots "Favourite" et "Icon" puisqu’ils étaient initialement utilisés uniquement pour les favoris. Création

Taille

À la base, les favicons avaient une dimension de 16x16px. Avec l’évolution de leur usage et des appareils, plusieurs formats sont maintenant nécessaires afin d’afficher correctement sur tous les types d'appareils. Il est donc préférable de concevoir un favicon le plus grand possible et de créer des versions de tailles inférieures à partir de celui-ci.

Format

Historiquement les favicons étaient des fichiers .ico puisque ce format était utilisé par Windows afin d’afficher toutes les icônes de son système d’exploitation. Avec le temps, il est maintenant possible d’utiliser tous les formats d’image, sans restrictions. Incluant même le format SVG!

Générateurs

Puisque les tailles optimales de favicon tendent à changer avec l’évolution des appareils, il est préférable d’utiliser un outil de générateur de favicons afin de s’assurer de produire toutes les résolutions de favicons courantes.

Par exemple:

Affichage

Afin de lier un favicon à une page web, il faut ajouter un extrait de code dans sa balise <head> indiquant où se trouve le fichier favicon à utiliser.

Par exemple:

<link rel="shortcut icon" href="http://example.com/favicon.ico" /> Ce code ne permet d’afficher qu’une version du favicon. Pour obtenir toutes les variantes, il est suggéré d’utiliser un générateur de favicons. favicon favicon
EXERCICE Favicon - Mega Man Pour cet exercice, vous devrez créer un fichier HTML affichant dans l’onglet de votre navigateur un favicon de Mega Man.