WordPress 💎 Favicon multi-format sans plugin

Partager sur email
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Illustration de l'article : Favicon multi-format sur WordPress sans plugin
Illustration de l'article : Favicon multi-format sur WordPress sans plugin
Illustration de l'article : Favicon multi-format sur WordPress sans plugin
Illustration de l'article : Favicon multi-format sur WordPress sans plugin
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

avatar
  S’abonner  
Notifier de