Drupal 9 : ajouter des favicons à son thème

4 minutes

Un favicon est une image utilisée pour générer l'icône visibles dans l'onglet du navigateur ou encore pour afficher les liens mis en favoris (navigateur, système d'exploitation). C'est la contraction des mots "favori" et "icône".

En général, c'est une image dérivée du logo du site.

Il permet de donner une information visuelle lorsque l'on veut retrouver un site rapidement.

La présence de ces favicons n'est pas un critère de SEO mais ils améliorent l'identité visuelle.

Dans un thème Drupal, développé par nos soins, il faut les rajouter manuellement.

Générer les favicons

Pour ma part, j'utilise un service gratuit en ligne : Favicon Generator.

Ce service permet de générer l'ensemble des favicons à partir d'une image fournie par nos soins.

Favicon Generator

Le set de favicon est disponible sous forme d'une archive .zip et se compose des fichiers suivants :

favicon.ico
image de taille 48px sur 48px
favicon-16x16.png
image de taille 16px sur 16px
favicon-32x32.png
image de taille 32px sur 32px
site.webmanifest
permet d'installer un raccourci vers le site sur l'écran d'accueil du système d'exploitation mobile
android-chrome-192x192.png
image de taille 192px sur 192px et utilisée par le fichier site.webmanifest
android-chrome-512x512.png
image de taille 512px sur 512px et utilisée par le fichier site.webmanifest
apple-touch-icon.png
image de taille 180px sur 180px utilisée par Apple et MacOS
safari-pinned-tab.svg
image au format SVG qui permet d'épingler votre site dans Safari pour Apple et MacOS
browserconfig.xml
permet d'installer un raccourci vers le site pour les interface Microsoft
mstile-150x150.png
image de taille 150px sur 150px et utilisée par le fichier browserconfig.xml

Ces fichiers sont accompagnés d'un code HTML à inclure dans la balise <head> :

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1f5ac9">
<meta name="msapplication-TileColor" content="#fefefe">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

Intégrer les favicons à votre thème Drupal

Pour intégrer ces favicons, nous allons dans un premier temps ajouter les fichiers du set de favicons à la racine de notre thème.

Pour cet exemple, le thème utilisé se nomme "montheme" et se trouve dans le dossier "themes" de Drupal.

Une fois les fichiers ajoutés, il nous faut modifier le chemin des favicons dans les fichiers site.webmanifest et browserconfig.xml.

Pour site.webmanifest :

{
    "name": "Mon thème",
    "short_name": "Mon thème",
    "icons": [
        {
            "src": "/themes/montheme/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/themes/montheme/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Pour browserconfig.xml :

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/themes/montheme/mstile-150x150.png"/>
            <TileColor>#fefefe</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Enfin, dernière étape, il nous faut générer le code HTML fourni par Favicon Generator coté Drupal.

Pour cela, nous allons utiliser la fonction hook_preprocess_html() :

/**
 * Implements hook_preprocess_html().
 */
function montheme_preprocess_html(&$variables) {
  // Get base URL
  $base_url = \Drupal::request()->getSchemeAndHttpHost();
  // Get theme path
  $theme_path = \Drupal::theme()->getActiveTheme()->getPath();

  // Apple touch icon
  $apple_touch_icon = [
    '#tag' => 'link',
    '#attributes' => [
      'rel' => 'apple-touch-icon',
      'sizes' => '180x180',
      'href' => $base_url . '/' .$theme_path . '/apple-touch-icon.png',
    ],
  ];

  // Favicon 32
  $favicon32 = [
    '#tag' => 'link',
    '#attributes' => [
      'rel' => 'icon',
      'type' => 'image/png',
      'sizes' => '32x32',
      'href' => $base_url . '/' .$theme_path . '/favicon-32x32.png',
    ],
  ];

  // Favicon 16
  $favicon16 = [
    '#tag' => 'link',
    '#attributes' => [
      'rel' => 'icon',
      'type' => 'image/png',
      'sizes' => '16x16',
      'href' => $base_url . '/' .$theme_path . '/favicon-16x16.png',
    ],
  ];

  // Manifest
  $manifest = [
    '#tag' => 'link',
    '#attributes' => [
      'rel' => 'manifest',
      'href' => $base_url . '/' .$theme_path . '/site.webmanifest',
    ],
  ];

  // Mask icon
  $mask_icon = [
    '#tag' => 'link',
    '#attributes' => [
      'rel' => 'mask-icon',
      'href' => $base_url . '/' .$theme_path . '/safari-pinned-tab.svg',
      'color' => '#1f5ac9',
    ],
  ];

  // MS Application tile color
  $msapplication_tilecolor = [
    '#tag' => 'meta',
    '#attributes' => [
      'name' => 'msapplication-TileColor',
      'content' => '#fefefe',
    ],
  ];

  // MS Application config
  $msapplication_config = [
    '#tag' => 'meta',
    '#attributes' => [
      'name' => 'msapplication-config',
      'content' => $base_url . '/' .$theme_path . '/browserconfig.xml',
    ],
  ];

  // Theme color
  $theme_color = [
    '#tag' => 'meta',
    '#attributes' => [
      'name' => 'theme-color',
      'content' => '#ffffff',
    ],
  ];

  $variables['page']['#attached']['html_head'][] = [$apple_touch_icon, 'apple_touch_icon'];
  $variables['page']['#attached']['html_head'][] = [$favicon32, 'favicon32'];
  $variables['page']['#attached']['html_head'][] = [$favicon16, 'favicon32'];
  $variables['page']['#attached']['html_head'][] = [$manifest, 'manifest'];
  $variables['page']['#attached']['html_head'][] = [$mask_icon, 'mask_icon'];
  $variables['page']['#attached']['html_head'][] = [$msapplication_tilecolor, 'msapplication_tilecolor'];
  $variables['page']['#attached']['html_head'][] = [$msapplication_config, 'msapplication_config'];
  $variables['page']['#attached']['html_head'][] = [$theme_color, 'theme_color'];
}

Nous avons généré toutes les balises HTML nécessaires à la bonne intégration des favicons. Ces balises sont maintenant contenues sous la forme d'un tableau dans $variables['page']['#attached']['html_head'] et seront directement injectées dans la balise <head> du template html.html.twig.

Et pourquoi pas des favicons directement à la racine ?

Il est possible d'intégrer les favicons directement à la racine de Drupal.

Dans cet exemple, j'ai préféré les inclure dans mon thème, ce qui me permet de versionner ces fichiers avec Git et d'assurer une meilleure maintenance de mon thème.

À noter qu'il est quelquefois nécessaire de supprimer votre cache navigateur pour que les favicons soient pris en compte.

Crédit photo :

Illustration de Brett Jordan

Générer les favicons

Intégrer les favicons à votre thème Drupal

Et pourquoi pas des favicons directement à la racine ?

Ajouter un commentaire

Thématiques