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
.
<link rel="icon" href="/favicon.ico" sizes="any" />
icon
Ajoutez un fichier image icon.(ico|jpg|jpeg|png|svg)
.
<link
rel="icon"
href="/icon?<generated>"
type="image/<generated>"
sizes="<generated>"
/>
apple-icon
Ajoutez un fichier image apple-icon.(jpg|jpeg|png)
.
<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 utilisericon
.- Les balises
<link>
appropriées et les attributs tels querel
,href
,type
etsizes
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 attributstype="image/png"
etsizes="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,
}
)
}
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,
}
)
}
<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ôticon
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 } }) {
// ...
}
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' } |
Retour
La fonction d'export par défaut doit retourner un Blob
| ArrayBuffer
| TypedArray
| DataView
| ReadableStream
| Response
.
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() {}
<link rel="icon" sizes="32x32" />
contentType
export const contentType = 'image/png'
export default function Icon() {}
export const contentType = 'image/png'
export default function Icon() {}
<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 |