Favicon, Icon und Apple Icon

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

Sie sind nützlich, um App-Symbole hinzuzufügen, die an Stellen wie Webbrowser-Tabs, Telefon-Startbildschirmen und Suchergebnisseiten erscheinen.

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

Verwendung von Bilddateien (.ico, .jpg, .png)
Verwendung von Code zur Generierung eines Symbols (.js, .ts, .tsx)

Bilddateien (.ico, .jpg, .png)

Verwenden Sie eine Bilddatei, um ein App-Symbol festzulegen, indem Sie eine favicon-, icon- oder apple-icon-Bilddatei in Ihrem /app-Verzeichnis platzieren. Die favicon-Bilddatei kann sich nur auf der obersten Ebene von app/ befinden.

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-Route-Segment /app hinzu.

<head>-Ausgabe

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

`icon`

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

<head>-Ausgabe

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

`apple-icon`

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

<head>-Ausgabe

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

Gut zu wissen:

Sie können mehrere Symbole festlegen, indem Sie dem Dateinamen eine Nummer hinzufügen. Zum Beispiel icon1.png, icon2.png usw. Nummerierte Dateien werden lexikalisch sortiert.

Favicons können nur im Root-Segment /app 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 Symboltyp und die Metadaten der ausgewerteten Datei bestimmt.

Beispielsweise hat eine 32x32px große .png-Datei die Attribute type="image/png" und sizes="32x32".

sizes="any" wird zu Symbolen hinzugefügt, wenn die Erweiterung .svg ist oder die Bildgröße der Datei nicht bestimmt werden kann. Weitere Details finden Sie in diesem Favicon-Handbuch.

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

Zusätzlich zur Verwendung von Bilddateien können Sie Symbole programmatisch generieren, indem Sie Code verwenden.

Generieren Sie ein App-Symbol, indem Sie eine icon- oder apple-icon-Route erstellen, die eine Funktion als Standardexport bereitstellt.

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

Der einfachste Weg, ein Symbol zu generieren, ist die Verwendung der ImageResponse-API aus next/og.

import { ImageResponse } from 'next/og'

// Bildmetadaten
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// Bildgenerierung
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 Größenmetadaten
      // wiederverwenden, um auch die Breite und Höhe von ImageResponse festzulegen.
      ...size,
    }
  )
}

import { ImageResponse } from 'next/og'

// Bildmetadaten
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// Bildgenerierung
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 Größenmetadaten
      // wiederverwenden, um auch die Breite und Höhe von ImageResponse festzulegen.
      ...size,
    }
  )
}

<head>-Ausgabe

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

Gut zu wissen:

Standardmäßig sind generierte Symbole statisch optimiert (während des Builds generiert und zwischengespeichert), es sei denn, sie verwenden Dynamische APIs oder ungecachete Daten.

Sie können mehrere Symbole in derselben Datei mit generateImageMetadata generieren.

Sie können kein favicon-Symbol generieren. Verwenden Sie stattdessen icon oder eine favicon.ico-Datei.

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

Props

Die als Standard exportierte Funktion erhält folgende Props:

`params` (optional)

Ein Objekt, das das dynamische Route-Parameter-Objekt vom Root-Segment bis zu dem Segment enthält, in dem sich icon oder apple-icon befindet.

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

Rückgabewerte

Gut zu wissen: ImageResponse erfüllt diesen Rückgabetyp.

Konfigurationsexporte

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

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

`size`

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

export default function Icon() {}

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

export default function Icon() {}

<head>-Ausgabe

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

`contentType`

export const contentType = 'image/png'

export default function Icon() {}

export const contentType = 'image/png'

export default function Icon() {}

<head>-Ausgabe

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

Route Segment Konfiguration

icon und apple-icon sind spezialisierte Route Handler, die dieselben Route-Segment-Konfigurationsoptionen wie Pages und Layouts verwenden können.

Versionsverlauf

Version	Änderungen
`v13.3.0`	`favicon`, `icon` und `apple-icon` eingeführt

Favicon, Icon und Apple Icon

On this page