Un favori icon (favicon), qu'est-ce que c'est ? Vous voyez cette icône là-haut lorsque vous visitez une page web ou un site web. Cette petite icône ? Oui, c'est un favicon juste là. Vous les trouverez affichés sur l'onglet en haut d'un navigateur web (par exemple, Google Chrome, Apple Safari), généralement de taille 16x16 pixels, représentant un site web/une page web. Vous trouverez également des favicons sur les écrans d'accueil mobiles, la barre de favoris d'un navigateur et les résultats de recherche.
Alors, bien qu'il soit de taille "mini", il a beaucoup sur les épaules : il peut rendre votre marque instantanément reconnaissable, améliorer l'expérience utilisateur et renforcer l'identité de la marque.
Il joue donc un rôle significatif dans le branding (cohérence, reconnaissance et mémorisation). Dans ce qui suit, nous partagerons le processus de création d'un favori icon à partir de votre logo. Cela semble technique ? Nous vous prouverons que ce n'est pas le cas.
Nous vous apprendrons même comment le faire rapidement - même sans expérience en design - et des façons de l'optimiser et de l'intégrer à votre site web. Commençons.
Comprendre les Favicons
Comme mentionné, c'est une petite image qui représente directement votre site web (votre maison sur le WWW). Comme un raccourci visuel ou un signe, il permet aux utilisateurs de l'identifier rapidement même s'ils ont au moins sept navigateurs ouverts simultanément.
Formats Standard
- .png : Convivial. Sa création ne nécessite pas d'outils de conception graphique spéciaux.
- .ico : Microsoft a développé l'ICO, le format de fichier favicon original. Ce format permet de stocker plusieurs petites images dans le même fichier et est pris en charge par tous les types de navigateurs. (Le plus largement pris en charge par les navigateurs)
- .svg : Léger et hautement évolutif, mais n'a actuellement pas un excellent support des navigateurs. Cependant, il ne sacrifie pas les temps de chargement. (Seuls Opera, Firefox et Chrome le prennent en charge)
Ce sont les plus courants, bien que des formats supplémentaires puissent être disponibles pour des appareils ou navigateurs spécifiques.
Tailles Recommandées (en pixels)
PNG (*Les navigateurs acceptent toute image carrée)
16x16
32x32
ICO
16x16
32x32
48x48
Cependant, notez que certains sites web peuvent nécessiter des résolutions plus élevées (par exemple, 64x64, 128x128 ou 512x512 pour les appareils mobiles et les écrans Retina).
Comment Préparer Votre Logo pour un Favicon
La première chose à faire : tous les logos ne peuvent pas être des favicons. Certains ne conviennent pas à en être un. C'est pourquoi la façon dont vous les concevez est importante.
Avez-vous un logo avec un texte ou des détails complexes ? Nous vous recommandons d'utiliser un élément reconnaissable, comme un monogramme ou un symbole de votre branding, à la place.
Ou votre logo inclut-il du texte ou des détails petits ? Cela peut être illisible lorsqu'il est réduit. Nous vous recommandons vivement d'utiliser des éléments à fort contraste, voire même en gras, pour une visibilité maximale.
Il est également judicieux d'utiliser un arrière-plan transparent car cela permet un mélange harmonieux de votre favicon avec différents thèmes de navigateur, mais un arrière-plan solide et uni est une bonne idée s'il améliore la clarté de l'icône.
Vous voulez que votre favicon ait l'air soigné et facilement identifiable ? Utilisez des bords nets dans une conception équilibrée.
Comment Créer un Favicon à partir d'un Logo
Si vous avez déjà créé un logo avec logogenie.com, il est temps de créer un favicon. Voici des moyens populaires de le faire.
Générateurs de Favicons en Ligne
Utilisez un outil/générateur en ligne comme Favicon.cc, Favicon.io ou RealFaviconGenerator pour rendre le processus pratique et rapide - sans redimensionner et convertir manuellement votre logo en formats de fichier. [Nous avons également préparé un guide sur les bonnes tailles de logo.]
Téléchargez votre logo de marque et convertissez-le en différentes tailles de favicon (et même générez une ou plusieurs résolutions selon ce que vous jugez nécessaire pour assurer la compatibilité de votre favori icon sur les appareils, navigateurs et systèmes d'exploitation).
- Téléchargez votre image de logo.
- Personnalisez les paramètres du générateur de favicon en ligne.
- Téléchargez votre favicon !
(Certains outils proposent également un package contenant les différentes versions de favicons pour un aspect cohérent et un moyen de redimensionner et convertir rapidement de votre côté.)
Outils/Logiciels de Conception Graphique
Vous voulez un favicon personnalisé ? Nous vous recommandons d'utiliser Illustrator, Adobe Photoshop, Canva ou GIMP. Avant de commencer, définissez la taille du canevas (dimensions : 128x128 px ou 64x64px) pour de meilleurs résultats.
Vous devrez peut-être redimensionner et ajuster votre logo d'entreprise (ou créer d'abord un logo d'entreprise) pour garantir la visibilité et la clarté, même à des tailles plus petites. Nous vous recommandons de concevoir une conception nette et propre pour un meilleur redimensionnement.
N'oubliez pas de l'enregistrer au format PNG avant de le convertir en un format de favicon comme ICO pour la compatibilité. [Si vous concevez dans Photoshop, choisissez "Enregistrer pour le Web" pour optimiser la qualité et la taille du fichier de manière appropriée.]
Conversion de l'Image en Format Favicon
Le processus de conception ne se termine pas avec votre fichier JPG/PNG prêt à l'emploi car vous devez le convertir en format ICO pour assurer sa compatibilité avec les navigateurs. Utilisez des outils de conversion comme ICOConvert, ConvertICO et Favicon.io pour cela.
Bien que vous préfériez une taille standard (16x16, etc), nous vous recommandons de générer plusieurs tailles pour garantir que la taille correcte soit facilement disponible pour différents appareils. WordPress et d'autres plateformes permettent également de télécharger directement un fichier PNG.
Cependant, avoir une version ICO peut garantir une compatibilité maximale sur plusieurs plateformes.
Comment Ajouter un Favicon à Votre Site Web
Maintenant, passons à l'étape suivante. Avec votre favicon prêt, procédons à l'étape essentielle suivante : le télécharger sur votre site web.
Allez dans le répertoire racine et téléchargez-le là-bas. Alternativement, vous pouvez placer le fichier favicon directement à /favicon.ico pour vous assurer qu'il sera détecté automatiquement par la plupart des navigateurs.
Utilisez-vous un constructeur de site web sans code comme Dorik, Wix, Shopify ou WordPress ? Si c'est le cas, allez dans les paramètres du thème et téléchargez le favicon là-bas. Si vous ne trouvez pas où le télécharger dans les paramètres, allez dans la section dédiée au téléchargement du favicon.
En attendant, si vous avez un site web personnalisé qui nécessite une intégration manuelle, assurez-vous qu'il est stocké dans un emplacement accessible.
Pour Mettre à Jour le Code HTML
section du code HTML :
- Insérez la balise de lien dans le
- Le favicon est-il stocké dans un sous-dossier ? Remplacez favicon.png par le chemin d'accès réel de votre favicon. Améliorez la compatibilité avec une balise supplémentaire car certains navigateurs web nécessitent un fichier ICO.
Avec des balises méta supplémentaires, vous pouvez identifier ou spécifier des icônes pour les appareils Android, Apple ou Windows, assurant une expérience utilisateur fluide avec plusieurs versions de favicons.
Pour Mettre à Jour le Favicon du CMS ou de WordPress
WordPress
Allez dans Apparence > Personnaliser > Identité du Site.
Téléchargez le favicon.
Shopify
Accédez à Paramètres > Fichiers ou dans l'éditeur de thème.
*D'autres constructeurs de sites web, tels que Squarespace ou Wix, peuvent avoir leurs propres options de téléchargement, que vous pouvez trouver dans les Paramètres. ASTUCE : Vérifiez votre favicon sur différents navigateurs et appareils pour voir s'ils s'affichent correctement
Tests et Dépannage
"Mon favicon n'apparaît pas. Que dois-je faire ?" Effacez le cache de votre navigateur et actualisez la page. Gardez à l'esprit que certains navigateurs peuvent mettre du temps à reconnaître votre nouveau téléchargement de favicon.
De plus, vérifiez si le favicon a été implémenté avec des outils comme le vérificateur de favicon en ligne.
Mais si vous ne parvenez toujours pas à voir le nouveau favori icon téléchargé, vérifiez à nouveau le chemin d'accès au fichier. Vérifiez s'il est correctement lié dans votre code HTML. Enfin, assurez-vous qu'il s'affiche de manière cohérente sur plusieurs navigateurs comme Edge, Firefox, Chrome et Safari.
Meilleures Pratiques pour la Conception de Favicons
Utilisez votre logo ou symbole de marque pour aider les utilisateurs à reconnaître votre site web lorsqu'ils parcourent les écrans d'accueil et les listes de favoris.
Si vous n'avez pas de logomarque qui s'intègre dans le canevas carré, pensez à utiliser sa partie la plus reconnaissable.
Un arrière-plan transparent peut être un meilleur choix qu'un arrière-plan coloré. Certains utilisateurs peuvent trouver ce dernier trop envahissant, semblant souvent dépassé. De plus, une version transparente peut être partagée ou téléchargée virtuellement n'importe où car elle ne contredira pas les couleurs d'arrière-plan d'un appareil, d'un navigateur ou d'un site web.
La simplicité est la clé d'un favicon efficace !
N'utilisez pas de lignes complexes ou de texte complexe, surtout si vous utilisez la plus petite taille. De plus, il doit être reconnaissable, même de loin, donc nous vous recommandons d'utiliser une version simplifiée et condensée de votre logo si vous avez initialement utilisé sa version colorée et complexe.
Considérez le branding
Comment sera-t-il vu ou perçu par les personnes qui visitent votre site web pour la première fois ? Vous devez l'aligner sur les directives actuelles de style de branding pour assurer la cohérence ! Rappelez-vous, il fait partie d'une identité plus importante, alors assurez-vous qu'il semble faire partie de votre marque.
Utilisez tout l'espace
CONSEIL professionnel : Pour maximiser l'espace, remplissez l'arrière-plan de votre favicon avec une couleur avant d'ajouter votre logo/icône au milieu.
Cependant, vous n'avez pas besoin d'un arrière-plan solide pour utiliser tout l'espace car les arrière-plans transparents fonctionnent parfaitement. Dans l'ensemble, peu importe ce que vous mettez dans l'espace, assurez-vous qu'il peut s'étirer jusqu'aux limites de la conception de votre favicon pour améliorer sa clarté.
Utilisez un fichier SVG pour les navigateurs modernes car il offre une excellente évolutivité.
Comme il est basé sur des vecteurs, il peut conserver sa netteté quelle que soit sa taille, ce qui le rend idéal pour la future preuve de votre conception de site web et pour les affichages haute résolution. Il est également léger, améliorant ainsi les performances globales du site et réduisant les temps de chargement.
Pensées Finales
Utilisez un favicon facilement reconnaissable, simple, audacieux et sans détails excessifs - cela peut le rendre moins visible dans les petites tailles. Gardez-le en accord avec votre marque pour renforcer le professionnalisme et l'identité. Assurez-vous de la clarté et de la compatibilité sur toutes les plateformes.
Les étapes que nous avons décrites ci-dessus devraient vous aider à commencer à créer un favicon professionnel pour votre page web ou votre site web avec votre logo. Alors, allez-y, créez un favicon et mettez-le en œuvre pour que votre site web ait l'air soigné et soit reconnaissable par votre public où qu'il le trouve.
