Comment créer un favicon à partir de n'importe quelle image (gratuit, dans votre navigateur)

Cette petite image à côté du titre d’une page dans l’onglet de votre navigateur porte un nom : le favicon. Il apparaît aussi dans les favoris, dans l’historique et sur l’écran d’accueil lorsque quelqu’un enregistre votre site. Un site sans favicon paraît inachevé, marqué par une icône générique de document vierge au lieu de votre propre marque. La bonne nouvelle, c’est qu’en créer un prend une minute, et que vous pouvez le faire entièrement dans votre navigateur. Ce guide explique ce qu’est un favicon, ce qui en fait un bon et comment transformer n’importe quelle image en un favicon adéquat avec le Générateur de Favicon gratuit.

Ce qu’est réellement un favicon

Un favicon est la petite icône qu’un navigateur affiche pour représenter votre site. Vous le voyez dans l’onglet, dans la barre des favoris, dans l’historique de recherche et dans la liste des raccourcis enregistrés sur un téléphone. C’est l’un des plus petits éléments d’un site web, et pourtant il rend un vrai service : il aide les gens à repérer votre onglet parmi une rangée de vingt et rend un favori reconnaissable instantanément.

Techniquement, un favicon n’est qu’une petite image carrée que le navigateur charge en même temps que la page. Les tailles sont minuscules, souvent 16 sur 16 ou 32 sur 32 pixels pour l’onglet, avec des versions plus grandes pour les favoris et les raccourcis de l’écran d’accueil. Comme il est affiché si petit, les règles pour le concevoir diffèrent de celles d’un logo complet.

Ce qui fait un bon favicon

La plus grosse erreur consiste à utiliser un logo détaillé qui rend superbement sur une carte de visite et se transforme en tache à 16 pixels. Un favicon doit se lire d’un coup d’œil, à une taille plus petite qu’un ongle. Gardez ces principes à l’esprit :

• Restez simple. Une forme, une lettre ou un symbole marquant. Les lignes fines et le petit texte disparaissent à la taille d’un favicon.
• Rendez-le reconnaissable. Il doit faire le lien avec votre marque, souvent une seule initiale ou l’élément central de votre logo.
• Partez d’un carré. Les favicons sont carrés, donc une image source carrée évite les recadrages et étirements maladroits.
• Utilisez un contraste fort. Il doit ressortir aussi bien sur les thèmes clairs que sombres du navigateur.

Si votre marque est un logotype textuel, extrayez uniquement la première lettre ou la partie icône. Essayer de faire tenir un nom entier dans 16 pixels ne fonctionne jamais.

Préparez d’abord votre image source

Un favicon net commence par une source nette. Si votre image est rectangulaire ou que le sujet est décalé sur un côté, recadrez-la d’abord en un carré serré avec le Recadreur d’Images pour que la partie importante soit centrée. Si le fichier est énorme, un passage rapide par le Redimensionneur d’Images le ramène à une taille raisonnable avant la conversion. Et si votre image est dans un format que le générateur n’accepte pas, le Convertisseur de Format d’Image la transformera en un PNG standard en quelques secondes.

Consacrer un instant à la source en vaut la peine. Une image centrée, carrée et très contrastée devient un favicon net, tandis qu’une image déséquilibrée ou floue reste déséquilibrée et floue, quoi que vous fassiez ensuite.

Comment créer le favicon

Une fois que votre source a la bonne allure, le Générateur de Favicon fait le reste. Il fonctionne entièrement dans votre navigateur, de sorte que l’image que vous choisissez ne quitte jamais votre appareil et n’est jamais envoyée à un serveur.

1. Ouvrez l’outil et sélectionnez l’image carrée que vous avez préparée.
2. Laissez-le générer le favicon à partir de votre image.
3. Téléchargez le résultat et ajoutez-le à votre site.

Voilà tout le travail. Il n’y a aucun compte à créer et aucun filigrane sur le résultat.

Le placer sur votre site

Après le téléchargement, placez le fichier du favicon dans le dossier racine ou de ressources de votre site et faites-y référence dans l’en-tête de la page. La plupart des créateurs de sites et des frameworks ont un emplacement dédié au favicon, il vous suffira donc peut-être de déposer le fichier et d’y diriger un réglage. Une fois en ligne, un rechargement forcé affiche la nouvelle icône dans votre onglet. Les navigateurs mettent les favicons en cache de manière agressive, donc si vous ne voyez pas le changement tout de suite, videz le cache ou ouvrez la page dans une fenêtre privée.

La version courte

Un favicon est la petite icône carrée qui représente votre site dans les onglets et les favoris, et chaque site gagne à en avoir un. Concevez pour les très petites tailles : simple, reconnaissable, carré et très contrasté. Nettoyez d’abord votre source avec un recadrage ou un redimensionnement, puis transformez-la en une icône finie avec le Générateur de Favicon gratuit, le tout dans votre navigateur et le tout en privé.