Comment ajouter un favicon avec NextJS ?

Ajouter un favicon n'est pas forcément une partie de plaisir : il faut penser à la taille, au format et à la balise qu'il faut utiliser pour voir afficher notre icône.

Heureusement installer un favicon avec NextJS (ou Next.js pour les intimes) est une véritable partie de plaisir ! 😬

Étape 1 : Préparer le favicon

Avant d'ajouter notre favicon à notre projet NextJS, nous devons suivre deux règles :

• Un format d'image - Elle doît être dans un des formats d'image suivant : .ico, .jpg, .jpeg, .png  ou .svg
• Avoir une taille réduite - NextJS permet d'utiliser des images de n'importe quelle taille, mais c'est tout de même mieux si vous utilisez une image avec une taille réduite

Si vous ne voulez pas vous embêter, vous pouvez utiliser ce générateur de favicon.

Étape 2 : Utiliser le favicon

Avec le routeur app

Pour utiliser un favicon avec le routeur app il vous suffit de renommer votre image icon.

Si vous avez bien suivi l'étape 1 vous devriez avoir une image au bon format. Il ne vous reste plus qu'à glisser-deposer votre favicon dans la base du routeur app.

Et le tour est joué ! 😋

Voici le code généré par NextJS quand vous déposez une image favicon.[ico | jpg | jpeg | png | svg] dans votre routeur app :

<link
  rel="icon"
  href="/icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>

Avec le routeur pages

Si vous utilisez le routeur pages de NextJS, vous devriez peut-être créer un dossier app pour utiliser le routeur app afin de vous faciliter la vie. Créer un favicon avec le routeur pages est un peu plus compliqué. 🤔

Vous allez devoir créer une image obligatoirement au format .ico. Heureusement, si vous avez déjà une image dans un autre format, de nombreux convertisseurs en ligne existent. Par exemple celui-ci.

Une fois que vous avez votre image, vous devez renommer votre image favicon.ico.

Enfin, vous devez ajouter votre favicon dans le dossier public/static.

Vous devriez normalement vous retrouvez avec ceci :

/public/static/favicon.ico

Vous devez pour terminer modifier soit le fichier _app.js ou soit le fichier _document.js afin d'ajouter ceci :

<Head>
    <link rel="shorcut icon" href="/static/favicon.ico" />
</Head>

Expliquons un peu cet exemple :

• Head est le composant proposé par NextJS qui permet d'ajouter des balises dans la balise header de la page HTML.
• link est une balise qui permet de lier une ressource, ici nous précisons qu'il s'agit d'une icône (rel="shortcut icon") et d'un raccourci.

Enfin, nous utilisons le dossier _app.js ou _document.js car toutes les pages de notre site utilisent l'une ou l'autre des bases de ces pages. Ainsi, en ajoutant une balise qui permet d'avoir un favicon sur une des deux pages, c'est l'ensemble des pages de notre projet qui ont désormais un favicon. 😉

Bonus : Utiliser un favicon JavaScript

Grâce à NextJS, nous pouvons aussi générer un favicon spécifique pour chaque page. Il s'agit d'un favicon créé grâce à un fichier JavaScript.

Le type de fichier

Vous devez avoir un fichier JavaScript ou TypeScript. Rien de différent par rapport à ce que vous avez déjà l'habitude de faire dans votre projet.

Vous devez par la suite ajouter un fichier icon.[js | jsx | ts | tsx] dans votre routeur app. Vous devriez avoir :

/app/icon.[js | jsx | ts | tsx]

Le code à utiliser

Pour générer une image pour votre page, vous devez utiliser le composant ImageResponse proposé par NextJS.

Voici un petit exemple :

import { ImageResponse } from 'next/og'
 
// On donne les dimensions du favicon
export const size = {
  width: 128,
  height: 128,
}

// On crée une image .png
export const contentType = 'image/png'
 
// On génère une image
export default function Favicon() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        B
      </div>
    ),
    // On définit les options, dont la taille
    {
      ...size,
    }
  )
}

Avec cet exemple, vous pouvez imaginer tout ce que JavaScript vous permet de faire pour vos favicons !

Enfin, sachez que ce fichier reçoit également une props params :

export default function Icon({ params }) {
  // ...
}

Conclusion

Ajouter un favicon dans une application NextJS est rapide et facile. Mais, comme nous avons pu le voir dans les deux exemples avec le routeur pages et le routeur app, c'est beaucoup plus simple avec ce dernier. 

Enfin, nous avons qu'il est possible de générer un favicon à la demande avec NextJS !

Si vous voulez tout savoir sur NextJS, nous avons préparé quelque chose spécialement pour vous. 🤭