Comment ajouter et modifier un favicon WordPress | Buffs WP

Les gens utilisent WordPress pour créer des sites Web pour les particuliers et les entreprises. Une façon d'aider les visiteurs réguliers à savoir que le site est le vôtre est d'avoir un favicon WordPress personnalisé.

Qu'est-ce qu'un favicon ?

Un favicon est une icône qui apparaît dans l'onglet ou la fenêtre du navigateur et sur la liste des signets ou des favoris spécifiquement associés à un site particulier. Si un navigateur ne trouve pas de favicon personnalisé, il affiche à la place un favicon par défaut.

Un favicon WordPress est souvent une petite version du logo du site. Vous pourrez peut-être réduire le logo à la taille d'un favicon, mais il est généralement nécessaire d'en créer un lié au logo d'origine.

Pourquoi devrais-je utiliser un favicon ?

Les entreprises devraient avoir un favicon pour améliorer la familiarité et encourager la confiance des clients potentiels. L'image de marque permet aux visiteurs de reconnaître instantanément un site. Cela ajoute de la continuité et de la légitimité.

Les particuliers peuvent également utiliser un favicon pour des raisons similaires, bien que l'objectif soit des visiteurs réguliers plutôt que des achats dans la plupart des situations.

Spécifications des icônes préférées

La taille du favicon dans WordPress est de 16 × 16 pixels. Cependant, certains autres navigateurs et applications utilisent une taille plus grande, allant de 16 à 195 pixels carrés.

Si vous vous en tenez à la taille 16 × 16, les applications qui utilisent des tailles plus grandes l'agrandiront généralement, provoquant souvent une pixellisation. Pour cette raison, l'identité du site de WordPress nécessite 512 × 512 à la place.

Certaines tailles alternatives courantes sont :

• 24 pixels - l'icône d'un site épinglé dans Internet Explorer 9
• 72 pixels – l'icône sur l'écran d'accueil d'un iPad
• 128 pixels - l'icône utilisée sur le Chrome Web Store
• 195 pixels - l'icône affichée sur Opera Speed ​​Dial

Formats de favicons

Un favicon ne s'affichera pas correctement s'il est enregistré dans un format incorrect. Le format le plus courant est Windows ICO, qui était l'exigence initiale. Il peut contenir une variété de tailles et de résolutions pour une utilisation sur plusieurs plates-formes. C'est le seul format utilisé par Internet Explorer.

PNG est l'option la plus conviviale car presque tous les programmes graphiques enregistrent dans ce format, et il fournit une petite taille de fichier et permet au favicon d'être transparent si vous le souhaitez.

Opera prend en charge l'utilisation de SVG pour les favicons, bien que ce soit le seul navigateur qui le fasse.

GIF, JPG et APNG sont des options mais sont moins utiles car leur résolution est moins bonne et ils peuvent être gênants. La distraction est particulièrement probable avec les fichiers GIF animés et les fichiers APNG, qui sont également animés.

Création d'un favicon

Concevoir un favicon WordPress pour ajouter de la reconnaissance à votre site est une excellente idée. Vous pouvez en concevoir un sur un programme graphique sur votre ordinateur ou utiliser un site Web gratuit en ligne, tel que favicon-generator.org ou favicon.cc.

Tenez compte des facteurs suivants pour améliorer la valeur de votre favicon.

Identité

La raison la plus importante d'avoir un favicon est d'être reconnu. Créez un design qui représente le produit ou le service que vous proposez ou un design qui correspond au logo de votre marque. Une image qui se rapporte directement à votre marque, comme une version plus petite du logo ou la ou les lettres principales du nom de l'entreprise, est idéale.

Simplicité

En raison de sa petite taille, simple est le meilleur. Les formes ou les lettres de base sont un bon choix pour la visibilité. Lorsque les visiteurs le reconnaissent d'un coup d'œil, il est plus efficace. Plus vous essayez d'inclure de détails, plus il est difficile pour le visiteur de reconnaître l'icône. Précision, audace et clarté sont essentielles.

Couleurs

Un contraste élevé améliorera la lisibilité et augmentera la reconnaissance. Considérez les favicons de sites tels que NBC et Netflix. Leurs sites sont immédiatement évidents. Les sites qui ont une identité de couleur claire doivent inclure cette couleur dans leur favicon WordPress. Encore une fois, restez simple. Trop de couleurs peuvent causer une image floue.

Comment ajouter un favicon à WordPress

Ajoutez un favicon WordPress en utilisant l'une des méthodes suivantes :

1) Utilisez l'option d'icône de site intégrée dans WordPress.

Passez la souris sur Apparence et choisissez Personnaliser, puis choisissez l'onglet Identité du site. L'icône du site se trouve en bas du panneau de gauche et vous permet de choisir n'importe quelle image carrée de 512 pixels ou plus, qu'elle redimensionne ensuite selon vos besoins.

Si le fichier que vous choisissez n'est pas un carré, WordPress fournit une interface pour recadrer l'image en carré.

2) Modifier le header.php

Modifiez le fichier header.php dans votre thème actuel et ajoutez ce code :

 <link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” > <link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />

Remplacez "votredomaine" par le nom de domaine de votre site et assurez-vous de télécharger le favicon sur l'espace Web.

Si vous souhaitez empêcher WordPress d'annuler la modification d'une mise à jour, créez un thème enfant avant de modifier et modifiez le fichier de thème enfant au lieu du fichier de thème principal.

3) Utilisez un plugin WordPress.

Utilisez l'un des plugins que nous listons ci-dessous.

Comment changer un favicon dans WordPress

Changer le favicon WordPress revient à en ajouter un. Les mêmes méthodes fonctionnent pour télécharger un nouveau favicon. Il est également possible d'en télécharger un nouveau et d'écraser l'ancien, ce qui le changera lorsque les visiteurs videront leur cache ou effectueront une actualisation matérielle.

Laissez WP Buffs gérer vos mises à niveau et modifications si vous trouvez le processus déroutant. L'équipe est disponible 24h/24 et 7j/7 pour assurer le service et l'assistance.

Simplifiez-vous avec un plugin WordPress Favicon

Facilitez le processus d'ajout ou de modification du favicon WordPress en installant un plugin.

• Vous pouvez utiliser le plugin Insert Headers and Footers pour ajouter facilement le code ci-dessus. Collez le code dans la section d'en-tête et enregistrez-le.
• Le plugin All in One Favicon ajoute la fonctionnalité pour faciliter le processus d'ajout d'un favicon.
• RealFaviconGenerator est un plugin qui génère des icônes en fonction des exigences du navigateur.
• Un autre plugin populaire est Heroic Favicon Generator, qui génère un favicon à partir d'une image téléchargée ou déjà dans votre médiathèque. Il utilise le glisser-déposer pour télécharger des fichiers image.

Pourquoi mon favicon WordPress ne s'affiche-t-il pas ?

Il existe plusieurs raisons possibles pour les erreurs de favicon, de l'erreur de l'utilisateur aux idiosyncrasies du navigateur.

Cache

Lorsque votre site Web est mis en cache, les modifications apportées à des éléments tels que le favicon mettent du temps à s'afficher. Vous pouvez accélérer le processus en effectuant une actualisation matérielle (Ctrl + F5) ou en vidant le cache du navigateur. Si cela ne résout pas le problème, vérifiez le type de fichier favicon. S'il ne s'agit pas d'un fichier .ico, il se peut qu'il soit incompatible avec le navigateur.

Fautes de frappe

Si vous avez une erreur typographique dans le code, le favicon est susceptible de générer une erreur plutôt que de s'afficher. Des erreurs simples telles qu'un guillemet, une barre oblique ou un crochet manquant provoquent des erreurs qui gâchent l'image et éventuellement la page Web entière. Vérifiez attentivement le code.

Emplacement des favicons WordPress

La référence du fichier est également très spécifique. Si le lien (la partie entre guillemets href) pointe vers une image qui n'existe pas, le favicon ne s'affichera pas. Veillez à télécharger le fichier favicon et à copier le lien exact. La meilleure façon de le faire est d'utiliser la médiathèque de WordPress.

Vue locale

Si vous vérifiez l'affichage sur un ordinateur local plutôt que de charger la page Internet, le favicon WordPress ne s'affichera pas car la plupart des navigateurs ne recherchent pas localement le favicon. Vérifiez la page sur Internet pour vous assurer qu'elle s'affiche auprès des visiteurs.

Mauvais type d'image

Le type de fichier par défaut pour l'image favicon est .ico ("image/ico"). Lorsqu'un autre type de fichier est utilisé, tel que PNG ou SVG, cela doit être ajusté dans le code lors de l'utilisation de la méthode d'édition du thème. Le type de fichier doit correspondre au type de fichier de l'image. Par exemple, un fichier PNG doit indiquer "image/png" au lieu de "image/ico".

Pour plus d'informations sur toutes sortes de sujets liés à WordPress, abonnez-vous à la newsletter WPBuffs.

Les gens demandent aussi