Créer une favicon

Une favicon (abréviation de « icône de favori ») est une icône associée à un site web ou à une page web en particulier. Elle est généralement destinée à être utilisée lorsque vous ajoutez une page web à vos favoris. Les navigateurs les utilisent dans la barre d’URL, sur les onglets et ailleurs pour aider à identifier un site visuellement. Les favicons sont également utilisées comme icônes d’application sur les appareils mobiles.

Une favicon est généralement une image carrée de 16 x 16 pixels et est enregistrée sous le nom favicon.ico dans le répertoire racine de votre serveur. Vous pouvez utiliser une favicon avec n’importe quel site WordPress sur un serveur web qui permet d’accéder aux répertoires racine.

La fonctionnalité Icône du site

La version 4.3 (en anglais) de WordPress a implémenté la fonctionnalité Icône du site qui active les favicons sur votre site web.

Depuis la version 5.4 (en anglais) de WordPress, il y a une favicon par défaut : 

Lorsque vous utilisez la fonctionnalité Icône du site, vous n’avez pas besoin de préparer vous-même le fichier favicon.ico ni de modifier votre fichier de thème. Tout ce que vous avez à faire est d’accéder à l’écran Personnaliser (accessible via le Tableau de bord, menu Apparence, puis Personnaliser) et de spécifier une image carrée d’une hauteur et d’une largeur d’au moins 512 pixels.

Suivez les étapes ci-dessous pour utiliser la fonctionnalité Icône du site afin de configurer une favicon pour votre site.

1. Préparez le fichier image. Il doit être carré, avoir une hauteur et une largeur d’au moins 512 pixels.
2. Accédez à votre écran d’administration, puis menu Apparence, Personnaliser.
3. Cliquez sur l’onglet Identité du site.
4. Dans la section Icône du site, cliquez sur le bouton Sélectionner l’icône du site.
5. Cliquez sur l’onglet Téléverser les fichiers, puis sur Sélectionner des fichiers pour téléverser le fichier image que vous avez préparé à l’étape précédente.
6. Sélectionnez votre fichier ; à cette étape vous avez la possibilité de recadrer l’image tout en ayant un aperçu (sur la droite) de la favicon dans la barre d’adresse et en tant qu’icône d’application.

Une fois le recadrage fait, si nécessaire, validez l’intégration de la favicon en cliquant sur le bouton Publier en haut de la page à gauche. L’icône est déjà visible dans l’onglet Identité du site dans la section Icône du site.

Les paragraphes suivants contiennent des instructions pour configurer manuellement votre propre favicon. Cependant, il est fortement recommandé d’utiliser la fonctionnalité Icône du site (fonctionnalité intégrée à WordPress) à la place.

Créer une favicon

Une favicon peut être créée en utilisant n’importe quel logiciel d’édition graphique/d’image qui permet l’enregistrement de fichiers .ico. Il existe également des services en ligne qui vous permettront de créer gratuitement une favicon.

L’image doit être claire et visuellement attrayante. Idéalement, elle doit être conçue pour correspondre à l’image de marque et/ou au contenu de votre site.

Pour préparer l’image à être enregistrée en favicon.ico :

1. Rendez l’image carrée en recadrant ou en ajoutant de l’espace autour d’elle.
2. Redimensionnez l’image à 16 x 16 pixels.
3. Enregistrez le fichier sous favicon.ico.

Si vous utilisez un service en ligne pour créer votre favicon (comme Faviconer.com ou Dynamic Drive, suivez les instructions fournies par le site), puis téléchargez l’image favicon.ico sur votre ordinateur.

Installer une favicon dans WordPress

Si votre thème ou votre version de WordPress ne prend pas en charge l’option Icône du site décrite ci-dessus, vous pouvez utiliser la méthode qui suit pour ajouter manuellement une favicon.

S’il existe déjà un ancien fichier favicon.ico dans le dossier principal de votre thème actuel, supprimez-le à l’aide d’un client FTP.

1. Utilisez un client FTP pour téléverser le nouveau fichier favicon.ico dans votre répertoire de thème actuel.
2. Téléversez une autre copie de votre fichier favicon.ico dans le répertoire principal de votre site (exemple : https://example.com/favicon.ico). Cela affichera la favicon dans les lecteurs de flux de vos abonnés.

Pour que votre favicon apparaisse dans certains navigateurs plus anciens, vous devrez modifier l’entête de votre page. N’oubliez pas que la meilleure façon de modifier les fichiers de votre thème est d’utiliser un thème enfant. Lorsque vous suivez les instructions suivantes, il est fortement recommandé de créer et de modifier la copie du fichier header.php qui se trouve dans votre thème enfant.

1. Accédez à votre écran d’administration WordPress.
2. Cliquez sur le menu Apparence.
3. Cliquez sur le sous-menu Éditeur de thème.
4. Sélectionnez le fichier appelé Entête du thème header.php (en anglais) pour le modifier.
5. Recherchez la ligne de code qui commence par <link rel="shortcut icon" et se termine par /favicon.ico" />. Remplacez-la si elle existe, ou ajoutez le code suivant dans la balise <head> avant l’appel <?php wp_head(); ?> :

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

6. Enregistrez les modifications.

Comment créer une favicon avec un fond transparent

Avant d’implémenter cette méthode, assurez-vous que votre image source a déjà un arrière-plan transparent, ce qui signifie qu’il doit s’agir d’un fichier .gif ou d’un .png.
Le reste des étapes est tel que mentionné ci-dessus. La seule différence dans le code est qu’au lieu d’utiliser un fichier favicon.ico, utilisez plutôt favicon.png ou favicon.gif.

Recherchez la ligne de code commençant par <link rel="shortcut icon" et se termine par /favicon.ico" />. Remplacez-la, si elle existe, ou ajoutez le code suivant dans la balise <head> avant l’appel <?php wp_head(); ?> :

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />

Pour voir votre nouvelle favicon, effacez le cache de votre navigateur. Vous devrez peut-être redémarrer votre navigateur pour voir la nouvelle favicon.

Avantages d’utiliser un fichier ico plutôt que png ou gif

1. Compatibilité – Au moment d’écrire ces lignes, la plupart des navigateurs modernes, à l’exception d’iOS Safari et d’Opera Mini, prennent en charge le format .ico.
2. Évite les erreurs de serveur 404 – Pratiquement tous les navigateurs modernes appeleront un fichier favicon.ico, il est donc préférable de toujours avoir un fichier favicon.ico, pour éviter une « Erreur 404, Page introuvable ».
3. Un fichier .ico peut contenir plusieurs icônes, il n’est donc pas nécessaire d’inclure plusieurs fichiers pour les icônes 16×16 et 48×48.

Traduit par Patrice Pichon
Relu par Jean-Baptiste Audras & Jenny Dupuy
Dernière mise à jour le 20 avril 2024

Contribuer à la documentation en français de WordPress