favicon, icon et apple-icon

Les conventions de fichiers favicon, icon ou apple-icon vous permettent de définir des icônes pour votre application.

Elles sont utiles pour ajouter des icônes d'application qui apparaissent dans des endroits comme les onglets de navigateur web, les écrans d'accueil de téléphone et les résultats de moteurs de recherche.

Il existe deux façons de définir des icônes d'application :

Utiliser des fichiers image (.ico, .jpg, .png)
Utiliser du code pour générer une icône (.js, .ts, .tsx)

Fichiers image (.ico, .jpg, .png)

Utilisez un fichier image pour définir une icône d'application en plaçant un fichier image favicon, icon ou apple-icon dans votre répertoire /app. L'image favicon ne peut être placée qu'à la racine de app/.

Next.js évaluera le fichier et ajoutera automatiquement les balises appropriées à l'élément <head> de votre application.

Convention de fichier	Types de fichiers supportés	Emplacements valides
`favicon`	`.ico`	`app/`
`icon`	`.ico`, `.jpg`, `.jpeg`, `.png`, `.svg`	`app/*/`
`apple-icon`	`.jpg`, `.jpeg`, `.png`	`app/*/`

`favicon`

Ajoutez un fichier image favicon.ico au segment de route racine /app.

Sortie <head>

<link rel="icon" href="/favicon.ico" sizes="any" />

`icon`

Ajoutez un fichier image icon.(ico|jpg|jpeg|png|svg).

Sortie <head>

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

`apple-icon`

Ajoutez un fichier image apple-icon.(jpg|jpeg|png).

Sortie <head>

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

Bon à savoir :

Vous pouvez définir plusieurs icônes en ajoutant un suffixe numérique au nom du fichier. Par exemple, icon1.png, icon2.png, etc. Les fichiers numérotés seront triés lexicalement.

Les favicons ne peuvent être définis que dans le segment racine /app. Si vous avez besoin de plus de granularité, vous pouvez utiliser icon.

Les balises <link> appropriées et les attributs tels que rel, href, type et sizes sont déterminés par le type d'icône et les métadonnées du fichier évalué.

Par exemple, un fichier .png de 32 par 32px aura les attributs type="image/png" et sizes="32x32".

sizes="any" est ajouté aux icônes lorsque l'extension est .svg ou que la taille de l'image du fichier n'est pas déterminée. Plus de détails dans ce guide favicon.

Générer des icônes avec du code (.js, .ts, .tsx)

En plus d'utiliser des fichiers image littéraux, vous pouvez générer programmatiquement des icônes en utilisant du code.

Générez une icône d'application en créant une route icon ou apple-icon qui exporte par défaut une fonction.

Convention de fichier	Types de fichiers supportés
`icon`	`.js`, `.ts`, `.tsx`
`apple-icon`	`.js`, `.ts`, `.tsx`

Le moyen le plus simple de générer une icône est d'utiliser l'API ImageResponse de next/og.

import { ImageResponse } from 'next/og'

// Métadonnées de l'image
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// Génération de l'image
export default function Icon() {
  return new ImageResponse(
    (
      // Élément JSX ImageResponse
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // Options ImageResponse
    {
      // Pour plus de commodité, nous pouvons réutiliser les métadonnées de taille exportées
      // pour également définir la largeur et la hauteur de ImageResponse.
      ...size,
    }
  )
}

Sortie <head>

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

Bon à savoir :

Par défaut, les icônes générées sont optimisées statiquement (générées au moment de la construction et mises en cache) sauf si elles utilisent des APIs dynamiques ou des données non mises en cache.

Vous pouvez générer plusieurs icônes dans le même fichier en utilisant generateImageMetadata.

Vous ne pouvez pas générer une icône favicon. Utilisez plutôt icon ou un fichier favicon.ico.

Les icônes d'application sont des gestionnaires de route spéciaux qui sont mis en cache par défaut sauf s'ils utilisent une API dynamique ou une option de configuration dynamique.

Props

La fonction d'export par défaut reçoit les props suivantes :

`params` (optionnel)

Un objet contenant les paramètres de route dynamique depuis le segment racine jusqu'au segment où icon ou apple-icon est colocalisé.

export default function Icon({ params }: { params: { slug: string } }) {
  // ...
}

Route	URL	`params`
`app/shop/icon.js`	`/shop`	`undefined`
`app/shop/[slug]/icon.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/icon.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`

Retour

Bon à savoir : ImageResponse satisfait ce type de retour.

Exports de configuration

Vous pouvez optionnellement configurer les métadonnées de l'icône en exportant les variables size et contentType depuis la route icon ou apple-icon.

Option	Type
`size`	`{ width: number; height: number }`
`contentType`	`string` - type MIME d'image

`size`

export const size = { width: 32, height: 32 }

export default function Icon() {}

Sortie <head>

<link rel="icon" sizes="32x32" />

`contentType`

export const contentType = 'image/png'

export default function Icon() {}

Sortie <head>

<link rel="icon" type="image/png" />

Configuration de segment de route

icon et apple-icon sont des gestionnaires de route spécialisés qui peuvent utiliser les mêmes options de configuration de segment de route que les pages et les layouts.

Historique des versions

Version	Changements
`v13.3.0`	`favicon`, `icon` et `apple-icon` introduits

On this page