Le guide ultime des favicons

Qu’est-ce qu’une favicon ?

En conception de sites Web, les favicons sont généralement des logos réduits d’une entreprise ou d’une organisation utilisés pour renforcer l’image de marque. Les favicons apparaissent dans le coin d’un onglet de site Web et incluent généralement le logo du site que vous visitez. Les favicons sont de petite taille et ont des exigences spécifiques, c’est pourquoi il est essentiel de savoir comment en créer une pour les sites que vous possédez ou gérez.

Où les favicons sont-elles utilisées ?

Les favicons peuvent être trouvées dans de nombreux navigateurs Web. Elles peuvent être placées à droite ou à gauche des onglets du navigateur, des résultats de l’historique, des applications de la barre d’outils et des barres de recherche. L’emplacement des favicons dépend généralement du navigateur que vous utilisez. Par exemple, les favicons dans Google Chrome apparaîtront sur le côté gauche de l’onglet, dans votre barre de favoris, dans l’historique du navigateur et dans la barre de recherche au fur et à mesure que vous effectuez une saisie.

Les favicons sont-elles importantes ?

Oui, les favicons sont extrêmement importantes, même si elles sont petites. Une favicon est souvent l’un des premiers logos qu’un visiteur verra lorsqu’il accède à un site Web, notamment lorsque le site est encore en cours de chargement. Si votre favicon est colorée ou utilise une image unique pour véhiculer un message, vos visiteurs seront beaucoup plus susceptibles de se souvenir de votre site Web et de la marque qu’il représente. Sans favicon, votre site Web pourrait être facilement oublié.

Parmi les avantages les plus notables de l’utilisation des favicons, citons :

Identité de marque

Définir et établir l’identité de votre marque est essentiel, surtout si vous entrez sur un marché très concurrentiel ou saturé. Avoir une identité de marque dès le départ avec une favicon soignée peut aider votre site Web à se démarquer des pages similaires dans le même secteur d’activité. Si la notoriété de votre marque est un impératif pour votre entreprise, ne manquez pas l’occasion de mettre en place une favicon personnalisée.

Identification des signets

Si un utilisateur ajoute votre site Web à ses favoris, quelles sont les chances qu’il le retrouve facilement sans favicon ? L’utilisation d’une favicon peut rendre votre site Web plus identifiable pour ceux qui souhaitent le revisiter à l’avenir.

Amélioration de l’expérience utilisateur

Aujourd’hui, créer un site Web et une présence en ligne réussis nécessite plus que la simple fourniture de contenu et/ou de produits de qualité. Offrir à vos visiteurs une expérience utilisateur optimale peut également être très bénéfique lorsqu’il s’agit de bâtir et de développer une nouvelle marque en ligne. Une favicon donne une impression de professionnalisme à la plupart des gens et peut contribuer à renforcer la crédibilité et la réputation de votre marque auprès des nouveaux visiteurs.

Référencement (SEO)

Dans certains cas, une favicon bien conçue peut contribuer à booster le SEO d’un site Web. Si votre favicon attire l’attention et est visuellement agréable, elle peut recevoir plus de clics et plus de considération que les autres liens ou sites Web concurrents. Bien qu’il ne soit pas toujours certain que vous améliorerez le référencement de votre site Web avec une favicon bien conçue, cela reste possible avec un engagement suffisant de la part des visiteurs.

Réputation et crédibilité

Faire une bonne impression est important, surtout lorsque vous présentez votre entreprise ou votre marque à des clients potentiels pour la première fois. L’utilisation d’une favicon est un moyen de transmettre un message de professionnalisme et d’authenticité, ce qui peut contribuer à établir un rapport positif entre vous et vos visiteurs. L’utilisation de logos, de combinaisons de couleurs et de favicons professionnels peut également véhiculer un sentiment d’authenticité et de crédibilité, ce qui vous permettra de renforcer votre réputation.

Mise en forme des favicons

Un guide consacré aux favicons peut vous aider à mettre en forme votre icône tout en vous renseignant sur les types de fichiers image appropriés pour ce type de visuel. Alors que les utilisateurs devaient autrefois utiliser exclusivement des fichiers Windows ICO pour charger une favicon, plusieurs navigateurs permettent aujourd’hui de recourir à des fichiers image classiques, notamment PNG, SVG et GIF.

Les types de fichiers suivants sont les plus couramment utilisés pour les favicons aujourd’hui :

Windows ICO

Les fichiers Windows ICO (Windows Icon) sont les types de fichiers les plus courants pour enregistrer les favicons. Si vous recherchez des favicons gratuits plutôt que de concevoir ou de développer les vôtres, vous trouverez des bibliothèques de fichiers Windows ICO. Il existe également des convertisseurs en ligne qui vous permettent d’importer un fichier image classique et de le transformer au format Windows ICO standard pour une utilisation comme favicon. Le type de fichier Windows ICO est utile pour une icône de 32 pixels.

PNG

Les fichiers PNG sont des types de fichiers image extrêmement populaires qui peuvent également être utilisés comme favicons sans nécessiter de mise en forme ou de programmation supplémentaires. Un fichier PNG est fortement recommandé pour ceux qui recherchent des résultats de haute qualité en utilisant des visuels et des images classiques. Si vous souhaitez créer un logo transparent mais que vous ne voulez pas utiliser un fichier Windows ICO, le format PNG est souvent la meilleure solution.

SVG

Les images au format SVG sont des fichiers performants qui peuvent également être utilisés pour créer et afficher des favicons. Bien que les fichiers SVG ne se chargent pas aussi rapidement que les JPG et GIF classiques, ils sont plus universellement compatibles avec un large éventail de navigateurs Web, de Microsoft Edge et Mozilla Firefox à Opera.

GIF

Il est possible d’utiliser un fichier GIF lorsque vous créez une nouvelle favicon pour votre site Web. Si vous envisagez d’utiliser un GIF transparent ou animé pour votre favicon, vous pourrez peut-être le faire, en fonction de la manière dont vous choisissez d’importer et d’afficher le fichier.

APNG

Un autre format pouvant être utilisé pour créer une favicon est l’APNG. Ces fichiers sont similaires aux images PNG, mais ils permettent divers mouvements et animations, comme un GIF. Les fichiers APNG sont également compatibles avec des navigateurs tels qu’Opera et Mozilla Firefox.

JPG

Vous avez probablement entendu parler des fichiers JPG, même si vous êtes novice en matière de conception et de développement Web. Le format JPG est l’un des plus courants pour enregistrer tous types de photos et de visuels aujourd’hui. Cependant, les JPG sont rarement utilisés pour créer des favicons, car ils perdent souvent leur qualité lorsqu’ils sont modifiés et redimensionnés. La modification répétée d’un JPG ne produit pas toujours le résultat professionnel que vous pourriez imaginer pour votre logo ou favicon.

Directives sur la taille des favicons

Avant d’importer une favicon que vous avez conçue ou d’essayer d’utiliser une image classique pour votre favicon, il est important de connaître le meilleur format pour le dimensionnement et l’enregistrement des favicons. Les favicons sont généralement des versions plus petites ou plus condensées de logos. Et par petit, nous entendons vraiment petit. Alors qu’un logo classique peut avoir une taille allant de 50 à plus de 300 voire 500 pixels, la taille d’une favicon commence à 16x16 pixels.

Voici les règles les plus couramment utilisées pour le dimensionnement des favicons.

• 16x16 pixels : lorsque vous développez une favicon, gardez à l’esprit que 16x16 pixels est la taille la plus couramment utilisée. Bien que 16x16 pixels représente une taille de fichier extrêmement petite, elle est parfaite pour afficher des logos et des favicons sur l’ensemble du Web dans les barres de recherche, les onglets et l’historique des navigateurs.
• 32x32 pixels : les favicons de 32x32 pixels sont parfaites pour ceux qui souhaitent promouvoir leur site Web ou leur contenu dans la barre des tâches. De plus, cette taille se chargera mieux pour ceux qui utilisent macOS et Safari, car elle est standard pour la section « Lire plus tard » du navigateur.
• 72x72 pixels : alors que les favicons classiques de 16x16 pixels étaient autrefois considérés comme universels, l’avènement de diverses technologies et de nouveaux appareils a permis d’offrir encore plus d’options de taille. Si vous ciblez les utilisateurs mobiles ou ceux qui consultent le Web sur iPad, il est indispensable de disposer d’une favicon de 72x72 pixels.
• 96x96 pixels : pour ceux qui souhaitent séduire les utilisateurs de Google TV, il est fortement recommandé d’utiliser une favicon de 96x96 pixels pour éviter l’étirement et la perte de qualité lors du chargement avec une résolution plus grande.
• 114x114 pixels : une favicon de 114x114 pixels est optimale pour les utilisateurs de la dernière version de l’iPhone, car les icônes des applications sont plus grandes et l’écran Retina est deux fois plus grand. Pour éviter que votre favicon n’apparaisse floue et de mauvaise qualité, utilisez la taille appropriée sur les canaux que vous souhaitez cibler.
• 128 x 128 pixels : si vous avez l’intention de promouvoir votre site Web ou votre présence en ligne via le Google Chrome Web Store, vous pouvez le faire avec une favicon de 128 x 128 pixels.
• 195x195 pixels : bien que rare, cette taille peut convenir à ceux qui utilisent le navigateur Opera ou les paramètres Speed Dial d’Opera pour enregistrer leurs sites Web préférés ou favoris.

Comprendre les différentes tailles de favicon les plus couramment utilisées aujourd’hui peut vous aider à déterminer quelle dimension vous convient le mieux. Lorsque vous connaissez les attentes en matière de format pour votre favicon sur les différents navigateurs Web, boutiques d’applications et appareils, vous pouvez minimiser le risque de présenter votre entreprise ou votre marque de manière peu élégante.

Pourquoi la taille de ma favicon est-elle importante ?

La création de favicons de différentes tailles permet d’éviter la perte de qualité ou de résolution lors du chargement de l’icône pour les utilisateurs, qu’ils naviguent sur votre site Web ou qu’ils tentent d’accéder à votre application depuis le Chrome Web Store officiel. Si votre favicon est trop petite ou de taille incorrecte, vous risquez de :

• Attirer une attention négative sur votre marque . Faire une mauvaise première impression peut dissuader les utilisateurs de donner une chance à votre site Web ou à votre marque, surtout si une entreprise concurrente a meilleure allure avec des visuels et des favicons conçus par des professionnels.
• Éloigner les clients potentiels . Si votre favicon semble dépassée, floue ou pixelisée, les utilisateurs risquent de ne pas vous considérer comme un professionnel ou de ne pas vous prendre au sérieux, ce qui peut entraîner une perte de trafic Web, de ventes et, en fin de compte, de chiffre d’affaires.

Comment créer une favicon

Créer une favicon est facile, surtout avec les technologies actuelles. Pour y parvenir, vous devez disposer d’un accès à Internet et d’un logiciel de conception graphique capable de redimensionner votre icône à la taille appropriée.

Pour commencer, veuillez suivre les directives de création de favicon ci-dessous :

1. Réfléchissez à l’image que vous souhaitez utiliser pour votre favicon. Allez-vous utiliser le logo standard de votre marque ou créer une version spéciale de celui-ci ?
2. Demandez-vous où votre favicon sera affichée. Par exemple, si votre boutique e-commerce n’a pas d’application, vous n’avez pas à vous soucier du dimensionnement de votre favicon pour les applications mobiles sur téléphones ou tablettes.
3. Choisissez le type de fichier que vous souhaitez utiliser pour votre favicon. Les formats les plus courants pour les favicons aujourd’hui incluent les fichiers Windows ICO, SVG, PNG et GIF. Il se peut que vous deviez vérifier auprès de votre hébergeur s’il existe des restrictions concernant le choix de vos types de fichiers préférés.
4. Trouvez le script de chargement de favicon de votre hébergeur pour importer l’image que vous souhaitez convertir et utiliser sur votre site Web. Vous pouvez également utiliser une application tierce pour importer et générer un fichier favicon qui peut être enregistré et téléchargé sur votre serveur Web.
5. Importez votre favicon à l’aide de la méthode appropriée en fonction de l’hébergeur de votre site Web ou de votre application et de vos préférences en matière de favicon.

Bonnes pratiques pour les favicons

Que vous soyez novice en développement Web ou que vous cherchiez simplement à intégrer une favicon professionnelle pour des raisons de réputation, il existe quelques bonnes pratiques à garder à l’esprit lorsque vous travaillez avec ce format de fichier, telles que :

• Veiller à ce qu’elle soit reconnaissable . Lorsque vous concevez votre favicon, assurez-vous qu’elle est reconnaissable, même de loin. Comme votre favicon sera nettement plus petite que la plupart des logos classiques, il est préférable d’utiliser une version condensée et simplifiée de votre logo s’il est à l’origine complexe et coloré.
• Rester simple. Évitez d’utiliser des textes complexes ou des tracés sophistiqués lorsque vous créez une favicon, en particulier si vous avez besoin du plus petit format.
• Prioriser l’image de marque . Lorsque vous créez votre favicon, pensez à la façon dont elle sera vue et interprétée par les personnes qui vous suivent déjà et par les utilisateurs qui visitent votre site Web pour la première fois. Veillez à ce que votre favicon soit conforme aux lignes directrices de votre marque.
• Utiliser un arrière-plan transparent. Il est fortement conseillé d’utiliser un logo transparent pour créer votre fichier favicon, car les couleurs de fond peuvent sembler démodées ou trop distrayantes pour certains. Les favicons transparentes sont également beaucoup plus universelles et peuvent être importées et partagées à peu près partout sans interférer avec les couleurs d’arrière-plan d’un site Web, d’un navigateur ou d’un appareil.

Devriez-vous utiliser une favicon ?

L’utilisation d’une favicon est fortement recommandée, que vous créiez une page Web personnelle, un site pour votre entreprise locale ou encore une présence en ligne pour une marque internationale. Tous les propriétaires de sites Web devraient aujourd’hui utiliser une favicon, car elle peut vous aider dans les domaines suivants :

• Fidélité à la marque . Si l’un de vos objectifs est de fidéliser votre clientèle à votre marque, c’est une excellente idée d’utiliser une favicon. Les favicons contribuent à véhiculer un message d’authenticité, de crédibilité et de professionnalisme dans tous les secteurs et sur tous les marchés. De plus, chaque fois que les visiteurs accèdent à votre site Web, ils voient votre favicon, ce qui peut les aider à se souvenir de votre marque dans la durée.
• Suggestions de recherche . Chaque fois qu’un utilisateur recherche des informations qui font apparaître l’URL de votre site Web dans un navigateur, votre favicon figurera également à côté du titre de votre site Web. Cela peut attirer encore plus de trafic vers le site.
• Résultats de recherche . Si votre site Web apparaît dans les résultats de recherche d’une page après qu’un utilisateur a saisi sa requête, votre favicon se chargera et s’affichera également. Un logo et une favicon visuellement attrayants peuvent inciter les utilisateurs à en apprendre davantage sur votre site Web.
• Historique de navigation . Lorsque vous utilisez une favicon, elle apparaîtra dans l’historique du navigateur de vos utilisateurs, ce qui facilitera grandement la recherche de votre site Web pour ceux qui souhaitent le retrouver. C’est aussi un outil utile pour des objectifs de branding à long terme.

Utiliser des favicons pour créer votre présence en ligne

Les favicons ne sont pas une nouveauté, mais elles sont extrêmement utiles dans tous les secteurs lorsqu’il s’agit d’établir une présence en ligne. Que vous créiez un portfolio personnel, lanciez une startup locale ou cherchiez à attirer des visiteurs du monde entier sur votre site Web, l’utilisation d’une favicon peut grandement contribuer à établir l’identité de votre marque et à faire connaître ce que vous avez à offrir.

Si vous cherchez un moyen simple d’intégrer des favicons à votre site Web, à vos lettres d’information par e-mail et à vos campagnes marketing, optez pour Mailchimp. Notre plateforme offre une solution accessible et tout-en-un pour gérer votre présence en ligne et les favicons que vous utilisez pour représenter vos lettres d’information, vos campagnes marketing et vos sites Web officiels en toute simplicité.