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 des navigateurs web, les écrans d'accueil des téléphones et les résultats des 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 pris en charge	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é à la sortie favicon.ico pour éviter un bug de navigateur où une icône .ico est favorisée par rapport à .svg.

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 pris en charge
`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/server.

import { ImageResponse } from 'next/server'

// Configuration du segment de route
export const runtime = 'edge'

// 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
    {
      // Par 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,
    }
  )
}

import { ImageResponse } from 'next/server'

// Configuration du segment de route
export const runtime = 'edge'

// 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
    {
      // Par 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 fonctions 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.

Props

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

`params` (optionnel)

Un objet contenant l'objet 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 } }) {
  // ...
}

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

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' }`
`app/shop/[...slug]/icon.js`	`/shop/1/2`	`{ slug: ['1', '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() {}

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() {}

export const contentType = 'image/png'

export default function Icon() {}

Sortie <head>

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

Configuration du segment de route

icon et apple-icon sont des Route Handlers spécialisés qui peuvent utiliser les mêmes options de configuration de segment de route que les Pages et Layouts.

Option	Type	Default
`dynamic`	`'auto' \| 'force-dynamic' \| 'error' \| 'force-static'`	`'auto'`
`revalidate`	`false \| 'force-cache' \| 0 \| number`	`false`
`runtime`	`'nodejs' \| 'edge'`	`'nodejs'`
`preferredRegion`	`'auto' \| 'global' \| 'home' \| string \| string[]`	`'auto'`

export const runtime = 'edge'

export default function Icon() {}

export const runtime = 'edge'

export default function Icon() {}

Historique des versions

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

On this page