WordPress 💎 Favicon multi-format sans plugin

Partager sur twitter
Partager sur linkedin
Partager sur facebook
Partager sur whatsapp
Partager sur email
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Partager sur whatsapp
Partager sur email

Ajouter à votre thÚme WordPress une série de favicons de différentes tailles afin de la rendre multi-format / multi-plateforme. La favicon participe grandement à l'identité visuelle d'un site. Il s'agit de l'icÎne qui est affichée à cÎté du titre dans les onglets des navigateurs, barre des favoris, raccourcis vers une page web, etc. 

C'est internet explorer qui a été le premier à utiliser les favicons. Ce dernier testait l'existence d'un fichier nommé favicon.ico à la racine des sites. Une norme qui fut adoptée par tous les navigateurs. Par la suite est apparu la possibilité d'utiliser des fichiers au format PNG sans contraintes de répertoire en les incluant dans la section <head> d'une page web grùce à la balise :

<link rel="icon" type="image/png" href="favicon.png" />

Mais aujourd'hui, cette icĂŽne est utilisĂ©e par une multitude de pĂ©riphĂ©riques et dans diffĂ©rents contextes. Il faut donc le prĂ©voir et s'assurer qu'elles s'affichent correctement, de la petite icĂŽne affichĂ©e dans l'en-tĂȘte d'un onglet de navigateur web jusqu’à l'icĂŽne qui sera affichĂ©e dans les favoris ou les raccourcis sur smartphones.

Création d'une favicon

Avant de penser à comment mettre en place une icÎne sur un site, il va nous en falloir une. Direction donc vers un éditeur d'image. Dans mon cas, ce sera Photoshop. Le plus grand format de favicon est celui pour android qui fait 192 x 192 px. C'est donc la taille que nous allons utiliser lors de la création de l'icÎne. Enfin, le format à utiliser est le PNG afin de profiter de la transparence. C'est également le format qui offre la meilleure compatibilité.

Ajouter une favicon Ă  WordPress

Pour ajouter notre favicon à WordPress sans plugin, il va falloir générer une déclinaison de celle-ci avec les différentes tailles nécessaires et ensuite modifier notre thÚme. Pas de panique, on ne va pas enregistrer manuellement toutes les déclinaisons de l'image à la main mais plutÎt utiliser un générateur en ligne. Ce dernier va se charger de produire tous les fichiers dont nous allons avoir besoin, ainsi que le code à utiliser.

Le générateur que j'utilise dans cet article est : http://www.favicon-generator.org

Une fois sur le site, il nous faut uploader notre icÎne précédemment créée en cliquant sur "Choisissez un fichier" puis en cliquant sur "Create Favicon" en conservant les options par défaut. Une fois fait, une nouvelle page apparaßt, nous proposant de télécharger les fichiers générés et nous donnant un code à utiliser pour intégrer nos icÎnes.

Téléchargez donc l'archive en cliquant sur "Download the generated favicon". AprÚs extraction, nous obtenons 27 fichiers, dont 24 images au format PNG, une au format ICO ainsi que 2 autres fichiers (manifest.json et browserconfig.xml). A ce stade, nous avons tous les fichiers qui nous serons utiles.

Si vous le désirez, vous pouvez optimiser les 24 images au format PNG. Pour ce faire, j'ai utilisé TinyPNG, ce qui a diminué de 61% le poids des images que j'utilise.

Maintenant, nous avons tous les fichiers dont nous avons besoins, il est temps de passer à l'intégration WordPress. Si vous utilisez un thÚme créé sur mesure, les modifications se feront directement dessus. Si vous utilisez un thÚme téléchargé, il va falloir passer par un thÚme enfant.

Commençons par copier les 27 fichiers dans notre dossier de thÚme. Dans mon cas je vais les placer dans un dossier que je nomme "fav" et que je place dans le dossier "img" de mon thÚme.

Il est maintenant temps d'ajouter le code nĂ©cessaire Ă  la bonne intĂ©gration de nos icĂŽnes. Les modifications sont Ă  effectuer  dans le fichier "header.php", entre les balises <head> et </head> oĂč nous allons ajouter le code suivant :

<?php

/**
 * Add favicon code in HTML head
 */
add_action( 'wp_head', 'wprock_custom_favicon', 1 );
function wprock_custom_favicon() {

	?>
<!-- Favicon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="<?php echo get_template_directory_uri(); ?>/img/fav/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo get_template_directory_uri(); ?>/img/fav/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo get_template_directory_uri(); ?>/img/fav/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo get_template_directory_uri(); ?>/img/fav/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="<?php echo get_template_directory_uri(); ?>/img/fav/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="<?php echo get_template_directory_uri(); ?>/img/fav/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/img/fav/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/img/fav/favicon-16x16.png" sizes="16x16" />
<meta name="msapplication-TileColor" content="#1da1f2">
<meta name="theme-color" content="#26374d">
<meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri(); ?>/img/fav/mstile-144x144.png" />
<!-- End Favicon -->
	<?php
}

Vous l'aurez surement remarquĂ©, c'est Ă  peu de chose prĂšs le mĂȘme code que celui qui nous a Ă©tĂ© donnĂ© par le gĂ©nĂ©rateur de favicons, sauf qu'ici nous plaçons <?php echo get_template_directory_uri(); ?> au dĂ©but de chaque lien vers les fichiers. Cette fonction retourne l'URL vers le dossier du thĂšme WordPress activĂ© (qui ressemble Ă  http://exemple.fr/wp-content/mon-theme), ce qui a pour consĂ©quence de transformer les liens relatifs en liens absolus.

Il reste encore une derniÚre étape  à effectuer afin d'obtenir une meilleure compatibilité avec les vieux navigateurs, copier le fichier "favicon.ico" à la racine de votre site.

Voilà, notre site propose à présent une série de favicon qui s'adapte parfaitement à tous types de périphériques.

Julien .MA Jacob
DĂ©veloppeur WordPress
Julien MA Jacob - DĂ©veloppeur WordPress
đŸ§™â€â™‚ïž PassionnĂ© par le web et la programmation avec toujours plein de projets en tĂȘte đŸ‘šâ€đŸ’» | Page Ă  propos
  Discussion autour de l'article
S’abonner
Notifier de
guest
0 Commentaires
Inline Feedbacks
View all comments