WordPress đź’Ž Favicon multi-format sans plugin

Partager sur email
Partager sur twitter
Partager sur linkedin
Partager sur facebook
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
  Discussion autour de l'article
S’abonner
Notifier de
guest
0 Commentaires
Inline Feedbacks
View all comments