favicon, icon и apple-icon

Конвенции файлов favicon, icon или apple-icon позволяют задавать иконки для вашего приложения.

Они полезны для добавления иконок приложения, которые отображаются в таких местах, как вкладки браузера, домашние экраны телефонов и результаты поисковых систем.

Есть два способа установить иконки приложения:

Использование файлов изображений (.ico, .jpg, .png)
Генерация иконок с помощью кода (.js, .ts, .tsx)

Файлы изображений (.ico, .jpg, .png)

Используйте файл изображения для установки иконки приложения, разместив файл favicon, icon или apple-icon в директории /app. Файл favicon может находиться только в корневой директории app/.

Next.js обработает файл и автоматически добавит соответствующие теги в элемент <head> вашего приложения.

Конвенция файла	Поддерживаемые форматы	Допустимые расположения
`favicon`	`.ico`	`app/`
`icon`	`.ico`, `.jpg`, `.jpeg`, `.png`, `.svg`	`app/*/`
`apple-icon`	`.jpg`, `.jpeg`, `.png`	`app/*/`

`favicon`

Добавьте файл изображения favicon.ico в корневой сегмент маршрута /app.

<head> output

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

`icon`

Добавьте файл изображения icon.(ico|jpg|jpeg|png|svg).

<head> output

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

`apple-icon`

Добавьте файл изображения apple-icon.(jpg|jpeg|png).

<head> output

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

Полезно знать

Вы можете задать несколько иконок, добавляя числовой суффикс к имени файла. Например, icon1.png, icon2.png и т.д. Нумерованные файлы сортируются лексикографически.

Favicon можно установить только в корневом сегменте /app. Если требуется большая детализация, используйте icon.

Соответствующие теги <link> и атрибуты, такие как rel, href, type и sizes, определяются типом иконки и метаданными обработанного файла.

Например, файл .png размером 32×32 пикселя будет иметь атрибуты type="image/png" и sizes="32x32".

sizes="any" добавляется к выводу favicon.ico, чтобы избежать бага браузера, когда иконка .ico предпочитается .svg.

Генерация иконок с помощью кода (.js, .ts, .tsx)

В дополнение к использованию файлов изображений, вы можете программно генерировать иконки с помощью кода.

Создайте иконку приложения, создав маршрут icon или apple-icon, который экспортирует функцию по умолчанию.

Конвенция файла	Поддерживаемые форматы
`icon`	`.js`, `.ts`, `.tsx`
`apple-icon`	`.js`, `.ts`, `.tsx`

Самый простой способ сгенерировать иконку — использовать API ImageResponse из next/og.

import { ImageResponse } from 'next/og'

// Конфигурация сегмента маршрута
export const runtime = 'edge'

// Метаданные изображения
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// Генерация изображения
export default function Icon() {
  return new ImageResponse(
    (
      // JSX-элемент ImageResponse
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // Опции ImageResponse
    {
      // Для удобства можно повторно использовать экспортированные метаданные размера иконки
      // для установки ширины и высоты ImageResponse.
      ...size,
    }
  )
}

import { ImageResponse } from 'next/og'

// Конфигурация сегмента маршрута
export const runtime = 'edge'

// Метаданные изображения
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// Генерация изображения
export default function Icon() {
  return new ImageResponse(
    (
      // JSX-элемент ImageResponse
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // Опции ImageResponse
    {
      // Для удобства можно повторно использовать экспортированные метаданные размера иконки
      // для установки ширины и высоты ImageResponse.
      ...size,
    }
  )
}

<head> output

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

Полезно знать

По умолчанию сгенерированные иконки статически оптимизированы (генерируются во время сборки и кэшируются), если они не используют динамические функции или некэшируемые данные.

Вы можете сгенерировать несколько иконок в одном файле с помощью generateImageMetadata.

Нельзя сгенерировать иконку favicon. Вместо этого используйте icon или файл favicon.ico.

Пропсы

Функция, экспортируемая по умолчанию, получает следующие пропсы:

`params` (опционально)

Объект, содержащий динамические параметры маршрута от корневого сегмента до сегмента, в котором находится icon или apple-icon.

export default function Icon({ params }: { params: { slug: string } }) {
  // ...
}

export default function Icon({ params }) {
  // ...
}

Маршрут	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'] }`

Возвращаемое значение

Полезно знать: ImageResponse соответствует этому типу возвращаемого значения.

Экспорт конфигурации

Вы можете дополнительно настроить метаданные иконки, экспортируя переменные size и contentType из маршрута icon или apple-icon.

Опция	Тип
`size`	`{ width: number; height: number }`
`contentType`	`string` - MIME-тип изображения

`size`

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

export default function Icon() {}

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

export default function Icon() {}

<head> output

<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> output

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

Конфигурация сегмента маршрута

icon и apple-icon являются специализированными Обработчиками маршрутов, которые могут использовать те же параметры конфигурации сегмента маршрута, что и Страницы и Макеты.

Опция	Тип	По умолчанию
`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() {}

История версий

Версия	Изменения
`v13.3.0`	Введены конвенции `favicon`, `icon` и `apple-icon`

On this page