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, Telefon-Startbildschirmen und Suchergebnisseiten erscheinen.

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

Verwendung von Bilddateien (.ico, .jpg, .png)
Verwendung von Code zur Generierung eines Icons (.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 sich nur auf der obersten Ebene von app/ befinden.

Next.js wird die Datei auswerten und automatisch die entsprechenden Tags zum <head>-Element Ihrer App hinzufügen.

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 Icons festlegen, indem Sie eine Nummer an den Dateinamen anhängen. Zum Beispiel icon1.png, icon2.png usw. Nummerierte Dateien werden lexikalisch sortiert.

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

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

sizes="any" wird zur favicon.ico-Ausgabe hinzugefügt, um einen Browser-Bug zu vermeiden, bei dem ein .ico-Icon gegenüber .svg bevorzugt wird.

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

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

Generieren Sie ein App-Icon, 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 Icon zu generieren, ist die Verwendung der ImageResponse-API von next/og.

import { ImageResponse } from 'next/og'

// Route-Segment-Konfiguration
export const runtime = 'edge'

// 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
    {
      // Zur Vereinfachung können wir die exportierten Größenmetadaten des Icons
      // wiederverwenden, um auch die Breite und Höhe der ImageResponse zu setzen.
      ...size,
    }
  )
}

import { ImageResponse } from 'next/og'

// Route-Segment-Konfiguration
export const runtime = 'edge'

// 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
    {
      // Zur Vereinfachung können wir die exportierten Größenmetadaten des Icons
      // wiederverwenden, um auch die Breite und Höhe der ImageResponse zu setzen.
      ...size,
    }
  )
}

<head>-Ausgabe

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

Gut zu wissen

Standardmäßig sind generierte Icons statisch optimiert (während des Builds generiert und zwischengespeichert), es sei denn, sie verwenden dynamische Funktionen oder ungecachte Daten.

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

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

Props

Die Standardexport-Funktion erhält folgende Props:

`params` (optional)

Ein Objekt, das das dynamische Route-Parameter-Objekt vom Root-Segment bis zum 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' }`
`app/shop/[...slug]/icon.js`	`/shop/1/2`	`{ slug: ['1', '2'] }`

Rückgabewert

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

Konfigurationsexporte

Sie können optional die Metadaten des Icons 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.

Option	Typ	Standard
`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() {}

Versionsverlauf

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

favicon, icon und apple-icon

On this page