favicon, Icon und apple-icon

Die Dateikonventionen favicon, icon oder apple-icon ermöglichen es Ihnen, Icons für Ihre Anwendung festzulegen.

Sie sind nützlich, um App-Icons hinzuzufügen, die an Stellen wie Webbrowser-Tabs, Startbildschirmen von Telefonen und in Suchmaschinenergebnissen erscheinen.

Es gibt zwei Möglichkeiten, App-Icons festzulegen:

Verwendung von Bilddateien (.ico, .jpg, .png)
Generieren eines Icons mit Code (.js, .ts, .tsx)

Bilddateien (.ico, .jpg, .png)

Verwenden Sie eine Bilddatei, um ein App-Icon festzulegen, indem Sie eine favicon-, icon- oder apple-icon-Bilddatei in Ihrem /app-Verzeichnis platzieren. Das favicon-Bild kann nur auf der obersten Ebene von app/ abgelegt werden.

Next.js wertet die Datei aus und fügt automatisch die entsprechenden Tags zum <head>-Element Ihrer App hinzu.

Dateikonvention	Unterstützte Dateitypen	Gültige Speicherorte
`favicon`	`.ico`	`app/`
`icon`	`.ico`, `.jpg`, `.jpeg`, `.png`, `.svg`	`app/*/`
`apple-icon`	`.jpg`, `.jpeg`, `.png`	`app/*/`

`favicon`

Fügen Sie eine favicon.ico-Bilddatei zum Root-/app-Routensegment hinzu.

<head>

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

`icon`

Fügen Sie eine icon.(ico|jpg|jpeg|png|svg)-Bilddatei hinzu.

<head>

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

`apple-icon`

Fügen Sie eine apple-icon.(jpg|jpeg|png)-Bilddatei hinzu.

<head>

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

Hinweis:

Sie können mehrere Icons festlegen, indem Sie eine Nummerierung an den Dateinamen anhängen. Zum Beispiel icon1.png, icon2.png usw. Nummerierte Dateien werden lexikalisch sortiert.

Favicons können nur im Root-/app-Segment festgelegt werden. Wenn Sie mehr Granularität benötigen, können Sie icon verwenden.

Die entsprechenden <link>-Tags und Attribute wie rel, href, type und sizes werden durch den Icontyp und die Metadaten der ausgewerteten Datei bestimmt.

Ein 32 x 32 Pixel großes .png-Bild erhält beispielsweise die Attribute type="image/png" und sizes="32x32".

sizes="any" wird Icons hinzugefügt, wenn die Erweiterung .svg ist oder die Bildgröße der Datei nicht bestimmt werden kann. Weitere Details im Favicon-Handbuch.

Icons mit Code generieren (.js, .ts, .tsx)

Zusätzlich zur Verwendung von konkreten Bilddateien können Sie Icons programmgesteuert generieren.

Generieren Sie ein App-Icon, indem Sie eine icon- oder apple-icon-Route erstellen, die eine Funktion als Standardexport enthält.

Dateikonvention	Unterstützte Dateitypen
`icon`	`.js`, `.ts`, `.tsx`
`apple-icon`	`.js`, `.ts`, `.tsx`

Die einfachste Möglichkeit, ein Icon zu generieren, ist die Verwendung der ImageResponse-API von next/og.

app/icon.tsx

TypeScript

import { ImageResponse } from 'next/og'
 
// Bild-Metadaten
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'
 
// Bilderzeugung
export default function Icon() {
  return new ImageResponse(
    (
      // ImageResponse JSX-Element
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // ImageResponse-Optionen
    {
      // Der Einfachheit halber können wir die exportierten Icon-Größen-Metadaten
      // verwenden, um auch die Breite und Höhe der ImageResponse festzulegen.
      ...size,
    }
  )
}

<head>

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

Hinweis:

Generierte Icons werden standardmäßig statisch optimiert (zur Bauzeit generiert und zwischengespeichert), es sei denn, sie verwenden Dynamische APIs oder nicht zwischengespeicherte Daten.

Sie können mehrere Icons in derselben Datei generieren mithilfe von generateImageMetadata.

Ein favicon-Icon kann nicht generiert werden. Verwenden Sie stattdessen icon oder eine favicon.ico-Datei.

App-Icons sind spezielle Route-Handler, die standardmäßig zwischengespeichert werden, es sei denn, sie verwenden eine Dynamische API oder eine dynamische Konfigurationsoption.

Props

Die Standardexport-Funktion erhält folgende Props:

`params` (optional)

Ein Objekt, das die dynamischen Routenparameter vom Root-Segment bis zum Segment enthält, in dem icon oder apple-icon zusammengestellt ist.

app/shop/[slug]/icon.tsx

TypeScript

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' }`

Rückgabe

Hinweis: ImageResponse erfüllt diesen Rückgabetyp.

Konfigurations-Exports

Sie können die Metadaten des Icons optional konfigurieren, indem Sie size- und contentType-Variablen aus der icon- oder apple-icon-Route exportieren.

Option	Typ
`size`	`{ width: number; height: number }`
`contentType`	`string` - Bild-MIME-Typ

`size`

icon.tsx

TypeScript

export const size = { width: 32, height: 32 }
 
export default function Icon() {}

<head>

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

`contentType`

icon.tsx

TypeScript

export const contentType = 'image/png'
 
export default function Icon() {}

<head>

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

Konfiguration des Routensegments

icon und apple-icon sind spezialisierte Route-Handler, die die gleichen Konfigurationsoptionen für Routensegmente wie Seiten und Layouts verwenden können.

Versionsverlauf

Version	Änderungen
`v13.3.0`	Einführung: `favicon` `icon` und `apple-icon`