Comment ajouter un favicon avec NextJS ?

Apprenez comment ajouter facilement un favicon à votre projet NextJS avec ce guide détaillé et découvrez également comme générer un favicon à la demande grâce à ImageResponse.

Louis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

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.

Un favicon est une petite icône qui sert de favori (icône de favori se dit favourite icon en anglais : on retrouve donc bien l'origine du nom favicon). Elle est aussi mise en avant dans l'onglet sur votre navigateur.

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é ! 😋

Si vous voulez en savoir plus sur NextJS, allez voir cette page vous devriez adorer. ✨

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

HTML

<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.

Le dossier static est un dossier qui est utilisé pour toutes les ressources qui ne changent pas sur votre site internet comme votre favicon ou vos polices. Si vous ne l'avez pas, vous avez la possibilité de le créer.

Vous devriez normalement vous retrouvez avec ceci :

CONSOLE

/public/static/favicon.ico

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

JSX

<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.

Il n'est possible de générer (facilement) un favicon JavaScript qu'avec le routeur app de NextJS.

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 :

CONSOLE

/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 :

JSX

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 !

Les favicons générés par NextJS ne peuvent pas être modifiés après le build time. Donc quand vous exportez votre projet pour le mettre en ligne.

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

JSX

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. 🤭

Catégorie : Développement