La Favicon personnalisée sur un blog Blogger

La favicon est cette petite icône qui s'affiche dans l'onglet du navigateur internet, à côté du titre de votre blog. Elle permet d'identifier visuellement un site en un clin d'œil et contribue à renforcer son image de marque.

Par défaut, les blogs Blogger affichent la favicon officielle de la plateforme : un grand "B" blanc sur fond orange. Cela peut convenir aux blogs standard, mais pour un blog personnalisé, une favicon unique est essentielle pour se démarquer et apporter une touche professionnelle.

En 2011, alors que la navette spatiale Endeavour effectuait l'un de ses derniers vols et que Google+ voyait le jour, Blogger, lui, déployait une petite mise à jour qui allait permettre aux propriétaires de blog de modifier facilement la favicon sans avoir à plonger dans le code XML du template.

Dans cette publication, nous allons explorer tout ce qu’il faut savoir sur la favicon dans Blogger : de sa création à son intégration, en passant par les bonnes pratiques pour un rendu optimal.

Table des matières

• Qu'est-ce qu'une favicon ?
• Une brève histoire de la favicon
• À quoi sert une favicon ?
• Formats et compatibilité des favicons
• Des dimensions de toutes les tailles
• Ajouter une favicon personnalisée à son blog Blogger
• Ajouter une favicon via l'interface de Blogger
• Vérifier la présence du code de la favicon dans le thème
• Ajouter manuellement le code de la favicon dans le fichier XML
• Adresse de la favicon de votre blog Blogger
• Créer une favicon de qualité pour son blog Blogger
• Les critères d’une bonne favicon
• Outils en ligne pour créer une favicon
• Créer une favicon à partir d’une image
• Les bonnes pratiques pour une favicon réussie

Table des matières

Qu'est-ce qu'une favicon ?

La favicon, contraction de favorite icon, est cette petite icône que vous voyez dans l’onglet de votre navigateur web, juste à côté du titre d’une page web. Elle sert à identifier visuellement un site et joue un rôle clé dans l’expérience utilisateur, la navigation fluide et la reconnaissance de marque. Son importance est souvent sous-estimée, mais elle participe directement à l’image professionnelle d’un site web.

Une brève histoire de la favicon

L’histoire de la favicon remonte à 1999, avec Internet Explorer 5. À l’origine, son rôle était simple : afficher une icône à côté des favoris enregistrés. D’où son nom ! Depuis, son utilisation s’est démocratisée et tous les navigateurs web l’ont adoptée, avec des évolutions majeures :

• Années 2000 : la favicon devient un standard web et s’affiche dans les onglets.

• 2010 et après : prise en charge des formats haute résolution et des favicons spécifiques pour mobiles et PWA (Progressive Web Apps).

• Aujourd’hui : les favicons ne sont plus de simples icônes statiques, elles peuvent être dynamiques, animées et même adaptées au mode sombre. Certains sites utilisent des favicons intelligentes, qui changent en fonction du statut du site ou des notifications.

À quoi sert une favicon ?

Si vous pensez que la favicon est juste un petit gadget esthétique, détrompez-vous ! Elle remplit plusieurs fonctions essentielles :

• Identification rapide du site : Quand plusieurs onglets sont ouverts, la favicon permet de repérer immédiatement votre blog ou site web.

• Image de marque : Elle renforce votre identité visuelle et votre crédibilité. Une favicon bien conçue est un symbole fort qui reste en mémoire.

• Expérience utilisateur améliorée : Une favicon bien pensée donne un aspect soigné et professionnel. Sans favicon, votre site peut paraître incomplet ou amateur.

• Affichage sur divers supports : Elle apparaît non seulement dans les onglets, mais aussi dans les favoris, les raccourcis mobiles, les notifications push, les serps, etc.

• Accessibilité et professionnalisme : Un site avec une favicon est perçu comme plus cohérent et sérieux, surtout pour les visiteurs réguliers et les utilisateurs de raccourcis sur mobile.

Formats et compatibilité des favicons

Autrefois, les favicons étaient limitées au format .ico. Aujourd’hui, plusieurs formats sont acceptés, chacun ayant ses avantages :

Format	Description
.ico	Format historique, compatible avec tous les navigateurs, mais moins flexible.
.png	Le plus courant aujourd’hui, avec prise en charge de la transparence et des hautes résolutions.
.svg	Icône vectorielle ultra-légère, idéale pour les favicons dynamiques et le mode sombre.
.gif	Peu utilisé, permet d’afficher une favicon animée, mais avec des restrictions sur la fluidité de l’animation.
.jpg	Possible, mais non recommandé à cause de l’absence de transparence, ce qui peut donner un rendu inesthétique.

Des dimensions de toutes les tailles

Bien que la taille de la favicon sur Blogger soit limitée à 48x48 px, il existe une multitude de dimensions adaptées à différents supports :

• 16x16 px : Format minimum, utilisé dans les onglets et les anciens navigateurs.

• 32x32 px : Version standard pour les navigateurs modernes, assurant un bon rendu.

• 48x48 px : Utilisé par Windows pour les raccourcis sur le bureau.

• 64x64 px et plus : Adapté aux affichages haute définition et aux interfaces modernes.

• 180x180 px : Taille recommandée pour les icônes d’applications sur iOS et certains navigateurs mobiles.

• 512x512 px : Format conseillé pour les Progressive Web Apps (PWA) et Android.

Ajouter une favicon personnalisée à son blog Blogger

À présent, rentrons dans le vif du sujet. L’ajout d’une favicon sur Blogger est une manipulation simple, mais qui mérite d’être bien réalisée pour garantir un rendu optimal. Voici notre petit guide détaillé pour personnaliser la favicon de votre blog en toute tranquillité.

Ajouter une favicon via l'interface de Blogger

Blogger permet d’ajouter une favicon directement via son tableau de bord, sans avoir à modifier le code du thème.

Étapes pour ajouter une favicon :

• UI
• Paramètres
• Général
• Favicon

Sélectionnez un fichier depuis votre ordinateur en tenant compte des formats et des contraintes imposés par Blogger :

• Formats supportés : .ico, .png, .jpg, .gif

• Poids maximal : 100 Ko

• Taille recommandée : 48x48 px

Dès que l’image est téléversée, Blogger la convertira automatiquement au format .ico. La modification est instantanée, mais il peut être nécessaire de vider le cache de votre navigateur pour voir le changement immédiatement sur votre blog.

Pour cela, essayez d’actualiser la page en appuyant sur Ctrl + F5 (sous Windows) ou Cmd + Shift + R (sous Mac). Vous pouvez aussi ouvrir le blog dans un onglet de navigation privée pour contourner le cache temporaire.

Vérifier la présence du code de la favicon dans le thème

Les templates officiels Blogger prennent en charge la favicon. Toutefois, si vous utilisez un modèle personnalisé, nous vous recommandons de vérifier la présence des balises nécessaires dans le code XML du thème :

• UI
• Thème
• Menu Personnaliser
• Modifier le code HTML

Recherchez la ligne qui génère les balises meta de votre blog qui se situe dans <head> :

<b:include data='blog' name='all-head-content'/>

Si l'appel de l'inclusion all-head-content est absente, ajoutez-la immédiatement après la balise <head>.

Ajouter manuellement le code de la favicon dans le fichier XML

Si vous ne souhaitez pas implémenter l'appel de l'inclusion, vous pouvez ajouter manuellement le code de la favicon avec cette ligne :

<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>

Cela garantit que votre thème est équipé de votre favicon personnalisée.

Adresse de la favicon de votre blog Blogger

Une fois votre favicon téléversée et convertie, elle sera accessible à cette adresse :

https://BLOG_NAME.blogspot.com/favicon.ico

Par exemple, pour le blog Blogger Code PE , l'adresse est la suivante : https://bloggercode.orbiona.com/favicon.ico

Créer une favicon de qualité pour son blog Blogger

Une favicon bien conçue améliore l’identité visuelle de votre blog et lui donne un aspect plus professionnel. Mais comment créer une favicon adaptée, visible et optimisée ? Voici un guide pour fabriquer une favicon de qualité en toute simplicité.

Les critères d’une bonne favicon

Une favicon efficace doit répondre à plusieurs critères :

• Simplicité et clarté : Une favicon est petite (48x48 px après conversion par Blogger). Un design trop complexe sera illisible.

• Format adapté : Privilégiez les formats .png ou .ico. Le .png est le plus courant et gère la transparence.

• Transparence et fond : Évitez les fonds colorés, sauf si cela fait partie du design.

• Couleurs et lisibilité : Testez votre favicon sur fond clair et foncé pour garantir un bon contraste.

Outils en ligne pour créer une favicon

Il existe plusieurs services gratuits pour générer une favicon facilement :

• Favicon.io : Génération rapide depuis une image ou un texte.

• RealFaviconGenerator : Création optimisée pour tous les navigateurs.

• X-Icon Editor : Outil en ligne permettant de dessiner directement une favicon au format .ico.

Créer une favicon à partir d’une image

Si vous avez déjà un logo ou une image, voici comment la transformer en favicon :

• Redimensionner l’image : Utilisez un logiciel comme PhotoFiltre, photoshop, Photopea, GIMP ou Canva et définissez une taille de 48x48 px.

• Exporter au bon format : .png pour la transparence ou .ico pour la compatibilité maximale.

• Tester le rendu : Vérifiez l’apparence en petite taille avant de l’intégrer.

Les bonnes pratiques pour une favicon réussie

• Évitez les images trop détaillées : Un simple pictogramme est souvent plus efficace.

• Testez l’affichage : Vérifiez le rendu sur différents navigateurs (Edge, Google Chrome, Firefox, Safari) et appareils.

• Anticipez le mode sombre : Une favicon foncée risque d’être invisible en mode sombre. Ajoutez une légère bordure claire si nécessaire.

• Respectez la taille de 48x48 px : Blogger convertira automatiquement votre favicon dans ce format .ico.

Avec ces conseils et outils, vous pouvez créer une favicon tellement parfaite que même Google en sera jaloux ! Votre blog aura une icône digne des plus grands sites… ou du moins, il ne ressemblera plus à une page laissée à l’abandon depuis 2007. 😉🔥 😉🔥

À consulter également sur Blogger Code PE : Favicons multi-sets

Sujets SEO

• La balise title
• La description
• Le fichier robots.txt
• Les pages 404
• Les redirections
• Favicon personnalisée

Introduction SEO