Un favicon est la petite image qui identifie un site Web dans les onglets et les favoris du navigateur. Le nom vient de « icône préférée ». Il donne aux lecteurs un moyen visuel de trouver un site parmi les pages ouvertes, même lorsqu'un onglet est trop étroit pour afficher son titre. Les moteurs de recherche peuvent également afficher le favicon d'un site à côté d'un résultat. La définition du favicon de MDN décrit ces utilisations courantes des navigateurs.
Le cercle segmenté orange de ｟T4SearchVector en est un exemple. Le diagramme de couverture utilise son icône réelle pour expliquer la connexion entre un fichier image, le code HTML d'une page et le navigateur. Il s'agit d'un diagramme pédagogique, pas d'une capture d'écran d'un résultat de recherche.Prêt à en mettre en œuvre un ? Accédez à la configuration HTML ou à dépannage des icônes manquantes.
Favicon, logo et image sociale : lequel est lequel ?
Un logo est l’identité visuelle plus large d’une entreprise. Il peut inclure un symbole, un nom complet et un slogan. Un favicon est une petite application de cette identité, généralement un symbole simplifié qui reste reconnaissable même à des tailles minuscules. Réduire un mot-symbole entier rend souvent ses lettres impossibles à distinguer.
| Asset | Principal job |
|---|---|
| Favicon | Identifier la page dans un onglet du navigateur ou favori |
| Logo d'en-tête | Identifier la marque dans la mise en page |
| Aperçu social image | Illustrer un lien partagé avec une image plus grande |
| Icône de l'écran d'accueil | Représente un site Web enregistré ou une application Web installée sur un appareil |
Changer le logo d'en-tête ne met pas nécessairement à jour le favicon. Il peut s'agir de fichiers distincts contrôlés par des paramètres différents. De même, le remplacement d'une image d'aperçu social ne répare pas une icône d'onglet manquante. Commencez par identifier la surface qui ne va pas, puis trouvez le réglage qui la fournit.
Choisissez une icône qui survit aux petites tailles
Commencez avec une toile carrée et une silhouette simple. Exportez une grande image source, puis prévisualisez-la à 16 × 16 et 32 × 32 pour vérifier la conception. Ces aperçus testent la lisibilité ; ils ne prétendent pas que chaque navigateur affiche l'icône à une taille fixe. Recherchez les traits qui disparaissent, les lettres encombrées et les zones transparentes qui fusionnent avec l'arrière-plan de l'onglet.
Examinez la marque sur fond clair et foncé. Un fin contour sombre peut disparaître sur un onglet sombre, tandis qu'un symbole pâle peut disparaître sur un onglet clair. Une forme solide avec un contraste délibéré est souvent plus facile à reconnaître. Ne vous fiez pas uniquement à la couleur : un contour distinctif est toujours utile lorsque les icônes sont visuellement similaires.
Conservez un fichier source que votre équipe peut modifier. L’exportation d’une copie plus grande d’une vignette floue ne restaure pas ses détails. Pour un changement de marque, approuvez la petite icône à côté du logo principal afin que le site Web, les favoris et les raccourcis enregistrés semblent liés.
Ajouter une favicon avec un vrai exemple HTML
SearchVector sert un vrai PNG 512×512 sur son URL d'image favicon. Cette déclaration minimale pointe vers ce bien existant sur le site SearchVector :
Placez la déclaration dans le du document. Le chemin relatif à la racine est résolu à partir du nom d'hôte actuel : sur SearchVector, il demande /favicon.png à SearchVector ; sur votre domaine, il demande ce fichier à votre domaine. Pour votre propre site, téléchargez votre propre actif de marque et utilisez son chemin réel. Copier la balise sans télécharger l'image laisse une référence cassée.
L'attribut rel identifie la ressource sous forme d'icône. Le href le localise, type décrit son format et sizes décrit les dimensions de l'image. Écrire « 512x512 » ne redimensionne pas un fichier. Inspectez l'image exportée et veillez à ce que la déclaration soit exacte.
SearchVector déclare également des alternatives SVG et ICO. Les navigateurs peuvent choisir entre les déclarations d'icônes en utilisant des attributs tels que le type et la taille, comme expliqué dans la référence du lien d'icône de MDN. Les déclarations multiples ne constituent donc pas automatiquement un problème, mais des alternatives obsolètes peuvent expliquer des apparences incohérentes.
Si vous utilisez un CMS, commencez par son paramétrage d'icône de site. Si vous utilisez un framework, utilisez son mécanisme de métadonnées établi. Inspectez ensuite le code HTML obtenu : un téléchargement réussi dans un écran d'administration n'est qu'une partie du travail. Évitez d'ajouter un deuxième paramètre concurrent avant de vérifier ce que le modèle existant génère déjà.
De quoi Google a besoin pour apparaître dans les recherches
La documentation du faviconGoogle de ｟T24
nécessite une image carrée d'au moins 8×8 pixels et recommande une taille supérieure à 48×48. Ses formats répertoriés incluent PNG et ICO. Ne présumez pas qu'un SVG fonctionnant dans un navigateur établit un support dans la présentation de recherche de Google.La page d'accueil doit déclarer l'icône. Googlebot a besoin d'accéder à cette page d'accueil et Googlebot-Image a besoin d'accéder au fichier d'icône. Gardez l'URL de l'icône stable et utilisez une marque représentative du site. Google prend en charge un favicon par nom d'hôte : un sous-domaine peut avoir le sien, mais un sous-répertoire ne reçoit pas de favicon de recherche distinct.
L’éligibilité ne garantit pas l’affichage. Après une modification, Google doit réexplorer et traiter la page d'accueil ; sa documentation indique que cela peut prendre des jours, voire des semaines. Les propriétaires de sites peuvent demander l'indexation de la page d'accueil via l'inspection d'URL. Renommer l'image à plusieurs reprises n'est pas un substitut utile pour vérifier l'accès et autoriser le temps de traitement.
Dépanner une favicon manquante ou obsolète
Séparez trois observations : ce que déclare le HTML, ce que renvoie l'URL de l'image et ce que le navigateur affiche. Une inadéquation entre eux vous indique où enquêter. Conservez un bref enregistrement de l'URL de la page, de l'URL de l'icône et du résultat plutôt que de modifier plusieurs paramètres à la fois.
| Symptôme | Suivant vérifiez |
|---|---|
| Aucune icône sur aucune page | Inspectez la tête pour une déclaration d'icône ; ouvrir directement l'URL de son image |
| La page d'accueil fonctionne, l'article ne fonctionne pas | Comparez les modèles et le relatif à la racine par rapport à la page chemins |
| Ancienne icône dans un navigateur | Comparez un nouveau profil de navigateur et inspectez toutes les alternatives déclarées |
| L'URL de l'image ouvre un page Web | Vérifiez une redirection, un défi d'accès ou une réponse HTML de secours |
| Le navigateur fonctionne, la recherche ne fonctionne pas | Vérifiez séparément la déclaration de la page d'accueil, l'accès à l'exploration et l'éligibilité à la recherche |
Une réponse étiquetée 200 est insuffisante si le serveur envoie une page de connexion ou un repli HTML générique. Dans le panneau Réseau du navigateur, inspectez l'URL finale de la demande d'icône, le type de contenu de la réponse et l'aperçu. Un PNG devrait en fait être décodé en tant que PNG. Vérifiez également si un CDN diffuse toujours un fichier plus ancien après la mise à jour de l'origine.
Pour une enquête sur le cache, ouvrez l'image directement et comparez-la avec un nouveau profil de navigateur. Vider un cache peut aider à isoler la cause, mais les utilisateurs ne devraient pas avoir besoin d'effectuer une réinitialisation spéciale pour que le site Web fonctionne. Vérifiez l'actif déployé et la configuration du cache avant de traiter une actualisation locale comme correctif permanent.
Exemple pratique : une page imbriquée perd son icône
Considérons un site fictif dont la page d'accueil affiche l'icône de droite, alors qu'un article sous /blog/ ne le fait pas. Les deux modèles contiennent href="favicon.png", sans la barre oblique de début. En supposant qu'il n'y ait pas de remplacement d'URL de base, ce chemin relatif est résolu à côté de la page actuelle. Cela peut fonctionner à la racine tout en demandant un emplacement différent pour l'article.
Le développeur ouvre la demande d'icône de l'article et constate qu'elle renvoie le HTML de secours du site au lieu d'une image. Le correctif consiste à confirmer que l'image existe à la racine du site et à modifier la déclaration partagée en href="/favicon.png". Ils vérifient ensuite à nouveau la page d'accueil et l'article. Les deux demandent désormais le même actif.
Il s'agit d'un exemple de diagnostic fonctionnel, et non d'un incident SearchVector signalé. Sa leçon est d'inspecter l'URL demandée avant de remplacer l'illustration. Une image parfaitement valide ne peut pas aider si un modèle imbriqué demande le mauvais fichier.
Une dernière vérification avant de clôturer la tâche
｟T25Pour un examen plus large du site Web, continuez avec le Website Checker de SearchVector ou son Web Page Crawler. Conservez l'image directe et les vérifications HTML ci-dessus comme preuve de votre favicon ; une révision générale de la page ne garantit pas la manière dont un moteur de recherche affichera votre marque.
Une tâche de favicon terminée a une image reconnaissable, une déclaration correcte et une URL de ressource de travail dans les modèles de page. Vérifiez d'abord ces pièces de béton. Surveillez ensuite l'apparence de la recherche sans confondre une actualisation retardée avec une implémentation de navigateur défectueuse.
