S’inscrireNous contacter

Favicon


💡

Un favicon (abréviation de favorite icon) est une petite icône associée à un site web, qui s’affiche dans l’onglet du navigateur, à côté du titre de la page, ou encore dans les favoris, les résultats de recherche Google, ou sur l’écran d’accueil mobile (iOS, Android).

Utilisé depuis la fin des années 1990, le favicon joue un rôle visuel et identitaire fort pour une marque ou une entreprise. Il permet aux utilisateurs de reconnaître rapidement un site, même avec plusieurs onglets ouverts.


À quoi sert un Favicon ?


Un favicon bien conçu permet :


  • – D’améliorer l’expérience utilisateur : en facilitant l’identification du site dans les onglets ou favoris.
  • – D’afficher une image cohérente de votre marque (logo, pictogramme, etc.).
  • – D’ajouter une touche professionnelle à votre site web.
  • – De renforcer votre présence dans les résultats de recherche Google : Google peut afficher le favicon à gauche du nom de domaine sur mobile.
  • – D’optimiser votre site pour le SEO : indirectement via l’image de marque et la reconnaissance.


Comment créer et intégrer un Favicon ?


Voici les étapes clés pour créer et intégrer un favicon sur votre site web :


Étape 1 : Créer une image

  • – Format recommandé : PNG, ICO, SVG (compatibilité large).
  • – Taille idéale : 16×16 px, 32×32 px ou 48×48 px.
  • – Garder un design simple et lisible à petite taille.


Outils recommandés :


Étape 2 : Ajouter le code HTML


Ajoutez cette balise dans la section <head> de votre page HTML :

html

<link rel="icon" type="image/png" href="/favicon.png">


Pour WordPress, vous pouvez intégrer le favicon directement via le Personnaliseur : Apparence > Personnaliser > Identité du site > Icône du site


Bonnes pratiques pour les favicons


  • – Utiliser un format standardisé : .ico, .png ou .svg
  • – Ne pas utiliser d’images trop complexes
  • – Tester l’affichage sur différents navigateurs : Chrome, Firefox, Safari, Opera, Edge
  • – Prévoir plusieurs tailles pour un affichage correct sur tous les supports (desktop, iPhone, iPad, Android, etc.)
  • – Vérifier que l’image est bien optimisée pour le web (poids léger, bonne qualité)


Exemple d’intégration

html

<link rel="icon" href="/images/favicon.ico" type="image/x-icon">


Pour les navigateurs modernes, vous pouvez aussi intégrer des favicons animés ou au format SVG selon vos besoins.