favicon, icon, and apple-icon

favicon, icon veya apple-icon dosya kuralları uygulamanız için simgeler ayarlamanıza olanak tanır.

Web tarayıcı sekmeleri, telefon ana ekranları ve arama motoru sonuçları gibi yerlerde görünen uygulama simgeleri eklemek için kullanışlıdırlar.

Uygulama simgelerini ayarlamanın iki yolu vardır:

Görüntü dosyalarını kullanma (.ico, .jpg, .png)
Simge oluşturmak için kod kullanma (.js, .ts, .tsx)

Image files (.ico, .jpg, .png)

/app dizininize bir favicon, icon veya apple-icon görüntü dosyası yerleştirerek bir uygulama simgesi ayarlamak için bir görüntü dosyası kullanın. favicon görüntüsü yalnızca app/ dizininin en üst düzeyinde bulunabilir.

Next.js dosyayı değerlendirecek ve uygulamanızın <head> öğesine uygun etiketleri otomatik olarak ekleyecektir.

File convention	Supported file types	Valid locations
`favicon`	`.ico`	`app/`
`icon`	`.ico`, `.jpg`, `.jpeg`, `.png`, `.svg`	`app/*/`
`apple-icon`	`.jpg`, `.jpeg`, `.png`	`app/*/`

`favicon`

Kök /app rota segmentine bir favicon.ico görüntü dosyası ekleyin.

<head> output

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

`icon`

Bir icon.(ico|jpg|jpeg|png|svg) görüntü dosyası ekleyin.

<head> output

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

`apple-icon`

Bir apple-icon.(jpg|jpeg|png) görüntü dosyası ekleyin.

<head> output

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

Bildiğim iyi oldu

Dosya adına bir sayı soneki ekleyerek birden fazla simge ayarlayabilirsiniz. Örneğin, icon1.png, icon2.png, vb. Numaralandırılmış dosyalar sözlüksel olarak sıralanacaktır.

Favicon'lar yalnızca kök /app segmentinde ayarlanabilir. Daha fazla ayrıntıya ihtiyacınız varsa, şunları kullanabilirsiniz icon.

Uygun <link> etiketleri ve rel, href, type ve sizes gibi öznitelikler, değerlendirilen dosyanın simge türü ve meta verileri tarafından belirlenir.

Örneğin, 32 x 32 piksellik bir .png dosyası type="image/png" ve sizes="32x32" özniteliklerine sahip olacaktır.

sizes="any" .ico simgesinin .svg simgesine tercih edildiği bir tarayıcı hatasını önlemek için favicon.ico çıktısına eklenir.

Generate icons using code (.js, .ts, .tsx)

Gerçek görüntü dosyalarını kullanmanın yanı sıra, kod kullanarak programlı bir şekilde simgeler oluşturabilirsiniz.

Varsayılan olarak bir işlevi dışa aktaran bir icon veya apple-icon rotası oluşturarak bir uygulama simgesi oluşturun.

File convention	Supported file types
`icon`	`.js`, `.ts`, `.tsx`
`apple-icon`	`.js`, `.ts`, `.tsx`

Bir simge oluşturmanın en kolay yolu ImageResponsenext/og adresinden API.

app/icon.tsx

import { ImageResponse } from 'next/og'
 
// Route segment config
export const runtime = 'edge'
 
// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'
 
// Image generation
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 options
    {
      // For convenience, we can re-use the exported icons size metadata
      // config to also set the ImageResponse's width and height.
      ...size,
    }
  )
}

<head> output

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

Bildiğim iyi oldu

Varsayılan olarak, oluşturulan simgeler dinamik işlevler veya önbelleğe alınmamış veriler kullanmadıkları sürece statik olarak optimize edilir (derleme zamanında oluşturulur ve önbelleğe alınır).

kullanarak aynı dosyada birden fazla simge oluşturabilirsiniz. generateImageMetadata.

Bir favicon simgesi oluşturamazsınız. Kullanım icon veya bunun yerine bir favicon.ico dosyası.

Props

Varsayılan dışa aktarma işlevi aşağıdaki destekleri alır:

`params` (optional)

Kök segmentten icon veya apple-icon segmentine kadar olan dinamik rota parametreleri nesnesini içeren bir nesne.

app/shop/[slug]/icon.tsx

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

Returns

Bilmekte fayda var: ImageResponse bu dönüş türünü karşılar.

Config exports

İsteğe bağlı olarak size ve contentType değişkenlerini icon veya apple-icon rotasından dışa aktararak simgenin meta verilerini yapılandırabilirsiniz.

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

`size`

icon.tsx | apple-icon.tsx

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

<head> output

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

`contentType`

icon.tsx | apple-icon.tsx

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

<head> output

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

Route Segment Config

icon ve apple-icon, Sayfalar ve Düzenlerle aynı rota segmenti yapılandırma seçeneklerini kullanabilen özel Rota İşleyicileridir.

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

app/icon.tsx

export const runtime = 'edge'
 
export default function Icon() {}

Version History

Version	Changes
`v13.3.0`	`favicon` `icon` and `apple-icon` introduced