WordPress : personnaliser les favicons du site

Un favicon, c’est une toute petite image généralement au format .ico qui s’affiche dans l’en-tête de votre navigateur, sur l’onglet. Cela permet d’aider l’internaute à savoir à quel site l’onglet fait référence, tout en apportant un peu de design au navigateur internet.

Saviez-vous qu’il existe plusieurs types de favicons, selon l’appareil utilisé ? Globalement, peu de thèmes en tiennent compte, et modifier les favicons par défaut est souvent oublié par les webdesigners. Pourtant, ce n’est que l’affaire de quelques minutes, comme nous allons le voir.

Afin de personnaliser les favicons de notre site WordPress, nous allons devoir :

• récupérer les favicons d’après notre logo
• créer une fonction WordPress pour afficher les favicons

Une fois de plus, cela sous-entend que vous utilisez un thème enfant, ou que vous avez codé votre propre thème. Il vous faudra également votre logo, peut-être découpé, pour obtenir un favicon adapté. Dans mon exemple, je vais me baser sur le logo de Team Ever, qui est parfaitement adapté à ce genre de démarches avec sa forme de losange et ses quatre couleurs.

Récupération des favicons

Le site pour récupérer les favicons a déjà été abordé sur le tutoriel de création de thème enfant pour Prestashop, il s’agit de celui-ci :

https://www.favicon-generator.org/

C’est en réalité l’un des premiers que l’on peut trouver sur les moteurs de recherche avec la requête « favicon generator ». Rien de bien complexe. Je charge donc mon logo sur ce site.

Nul besoin d’envoyer une image trop grande, un icône étant par définition tout petit. Cliquez sur « Create favicon » pour convertir votre image en favicons.

Un lien de téléchargement vous permet de récupérer l’archive contenant les favicons, rangez-les tous dans le répertoire /wp-content/themes/child-theme/assets/img, où child-theme fait bien évidemment référence à votre thème enfant. Veillez aussi à bien avoir des fichiers index.php vides dans les répertoires /assets et /img, par mesure de sécurité.

Passons à présent à la fonction.

Création d’une fonction WordPress d’affichage des favicons

Qui dit « fonction WordPress », dit « functions.php ». Éditez votre fichier, nous allons nous baser sur le hook le plus connu de WordPress : wp_head. J’appelerai la fonction generated_favicons(), et je la grefferai donc ainsi :

add_action('wp_head', 'generated_favicons');

Le site sur lequel nous avons téléchargé les favicons nous a fourni du code HTML, qu’il faut charger dans l’en-tête du site. Afin de ne pas avoir à modifier systématiquement le code si nous devons réutiliser ce thème enfant ou juste cette fonction, nous allons utiliser la fonction get_stylesheet_directory_uri() native de WordPress, qui fait référence au répertoire du thème actif (donc votre thème enfant dans la présente situation).

Avec cette fonction, vous n’aurez plus qu’à récupérer les favicons d’un autre site pour que cela soit automatiquement en place. Modifions un peu le HTML fourni, pour mettre le tout dans une fonction PHP. Cela nous donne à présent la fonction suivante :

/**
 * Generated favicons
 * @see https://www.team-ever.com/wordpress-personnaliser-les-favicons-du-site
 */
function generated_favicons() {
    echo '
    <link rel="icon" sizes="57x57" href="'.get_stylesheet_directory_uri().'/assets/img/favicon.ico">
    <link rel="apple-touch-icon" sizes="57x57" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-180x180.png">
    <link rel="apple-touch-icon-precomposed" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-57x57.png" />
    <link rel="icon" type="image/png" sizes="192x192"  href="'.get_stylesheet_directory_uri().'/assets/img/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="'.get_stylesheet_directory_uri().'/assets/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="'.get_stylesheet_directory_uri().'/assets/img/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="'.get_stylesheet_directory_uri().'/assets/img/favicon-16x16.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="'.get_stylesheet_directory_uri().'/assets/img/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    ';
}
add_action('wp_head', 'generated_favicons');

Le résultat peut dépendre de votre cache navigateur, tout comme de votre cache WordPress si toutefois vous en avez un. Sinon, pour visualiser le résultat, nul besoin de capture d’écran : regardez plutôt le favicon de notre site dans votre navigateur !

 Imprimer