Prendre contact
[email protected]
0756810347
Back

Ajouter une favicon sur WordPress

Une favicon c’est quoi ?

ajouter une favicon sur WordPress :
Chaque détail compte lorsqu’il s’agit de concevoir un site web efficace et convivial.

L’un de ces détails est la favicon. Si vous pensez qu’une favicon n’est pas indispensable, deux raisons pourraient bien vous faire changer d’avis.

Capture decran 2023 05 29 171704 2048x285 1

D’abord, elle sert de repère pour l’utilisateur qui visite régulièrement votre site.
La favicon est petite, mais elle est mémorable pour vos visiteurs fidèles, tout comme le logo ou le titre de votre site. Ensuite, elle peut servir de repère lorsque l’on ouvre plusieurs sites à la fois.

Souvent, nous naviguons sur plusieurs sites en même temps, ce qui signifie que nous avons de nombreux onglets ouverts dans notre navigateur.
Le seul moyen d’identifier facilement et rapidement un site ou une page est tout simplement de rechercher la favicon.

Capture decran 2023 05 29 172157 2048x276 1

La favicon : Un petit détail qui a un grand impact

Il serait peut-être facile de négliger l’importance d’une favicon en raison de sa petite taille, mais cela serait une grave erreur
En effet, elle peut avoir un grand impact sur l’expérience de vos utilisateurs et sur la manière dont ils perçoivent votre site.

Par exemple, une favicon bien conçue peut renforcer la marque de votre site et la rendre plus mémorable pour vos visiteurs.

Elle peut également faciliter la navigation de vos utilisateurs, surtout s’ils ont de nombreux onglets ouverts.

En effet, une favicon unique et bien conçue peut permettre à vos utilisateurs de repérer facilement votre site parmi tous les autres onglets ouverts dans leur navigateur.

WordPress rend l’ajout d’une favicon sur votre site extrêmement simple.

Grâce à son interface conviviale, vous pouvez ajouter une favicon à votre site en quelques clics seulement.

Depuis la version 4.3 de WordPress

Une nouvelle fonctionnalité très attendue est enfin disponible : l’ajout de favicon directement depuis le panneau d’administration.

Cela simplifie grandement le processus de personnalisation de votre site web, car vous n’avez plus besoin d’intervenir dans le code ou d’utiliser des plugins supplémentaires.

Dans cet article, nous allons explorer comment utiliser cette nouvelle fonctionnalité et comment créer votre propre favicon pour améliorer l’identité visuelle de votre site WordPress.

La méthode classique

Étape 1 : Préparez votre Favicon

Avant de commencer, assurez-vous d’avoir votre favicon prêt. C’est généralement une petite image carrée qui représente votre site web. Les dimensions recommandées sont de 16×16, 32×32, ou 48×48 pixels, et le fichier doit être au format .ico ou .png.

Étape 2 : Accédez à votre tableau de bord WordPress

Connectez-vous à votre site WordPress et allez dans le tableau de bord. Vous pouvez le faire en tapant votre nom de domaine suivi de ‘/wp-admin’. Par exemple, ‘www.votresite.com/wp-admin‘.

Étape 3 : Allez dans l’option ‘Apparence’

Dans le menu de gauche, cliquez sur ‘Apparence’. Un sous-menu apparaîtra.

Étape 4 : Sélectionnez ‘Personnaliser’

Dans le sous-menu d’apparence, cliquez sur ‘Personnaliser’. Cela vous mènera à la page de personnalisation du thème.

Capture decran 2023 05 29 172622
Étape 5 : Accédez aux ‘Paramètres du site’

Dans le menu de gauche, cliquez sur ‘Paramètres du site’. Un autre sous-menu apparaîtra.

Étape 6 : Cliquez sur ‘Identité du site’

C’est là que vous pouvez changer le titre de votre site, sa description et, bien sûr, ajouter un favicon.

Et voilà, vous avez ajouté avec succès un favicon à votre site WordPress !

Capture decran 2023 05 29 173016
Capture decran 2023 05 29 173046
Étape 7 : Ajoutez votre Favicon

Cliquez sur ‘Sélectionner l’image’ sous ‘Icône du site’ pour télécharger votre favicon. Une fois l’image téléchargée, vous pouvez la rogner à la taille désirée.

Étape 8 : Enregistrez et publiez

Une fois que vous êtes satisfait de votre favicon, cliquez sur ‘Publier’ en haut de l’écran pour enregistrer vos modifications.

Ajouter un favicon via Elementor

Pour ajouter un favicon via Elementor, rien de plus simple !

Tout d’abord rendez-vous sur une page de votre site web en cliquand sur « Modifier avec Elementor »

Ensuite cliquer sur le petit icône juste ici.

Capture decran 2023 05 29 174433 1

Une fois que vous êtes dans le menu de personnalisation d’elementor, cliquer sur les « Réglages du site »

Capture decran 2023 05 29 174613

Ensuite, ne perdez pas de temps et rendez-vous sur l’onglet « Identité du site »

Capture decran 2023 05 29 174728

Et pour l’étape finale, cliquez ici afin de déposer votre favicon

Capture decran 2023 05 29 174904

Version WordPress inférieure à 4.3

Si vous n’avez pas encore effectué la mise à jour de votre site WordPress vers la version 4.3 ou une version ultérieure, vous devrez utiliser un bout de code pour ajouter votre favicon.

Pour commencer, vous devrez redimensionner votre icône en 16×16 pixels et l’envoyer via FTP à la racine de votre site.

Ensuite, nous allons insérer le code dans le fichier header de votre site WordPress, entre les balises <head> </head>. Cela permettra d’afficher votre favicon correctement.

<link rel="icon" href="https://votresite.com/favicon.png" type="image/x-icon"/> <link rel="shortcut icon" href="https://votresite.com/favicon.png" type="image/x-icon"/>

Changez l’url de l’icône par la votre.

Pour les débutants, voilà comment procéder sans passer par un FTP.

Transférez votre image depuis la page Médias > Menu Médias/Ajouter

Capture decran 2023 05 29 175933

Importez votre icône au format 16px, puis récupérez l’adresse de votre icône en copiant CTRL+C:

Capture decran 2023 05 29 180039 1536x813 1

Désormais nous allons donc ouvrir notre fichier header qui se trouve sur la page Editeur > Menu Apparence/Editeur.

Il est temps de coller ce code entre les balises <head> </head>  !

<link rel="icon" href="https://votresite.com/favicon.png" type="image/x-icon"/> <link rel="shortcut icon" href="https://votresite.com/favicon.png" type="image/x-icon"/>

Veuillez substituer l’URL du favicon par celle de l’icône que je vous ai demandé de copier.

N’omettez pas de cliquer sur le bouton pour mettre à jour le fichier.

Et voilà ! Votre nouvelle favicon devrait apparaître !

This website stores cookies on your computer. Cookie Policy