Favicon, значок и значок apple

Конвенции файлов 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 маршрут.

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

Значок

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

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

Значок apple

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

<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'
 
// 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,
    }
  )
}

<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 } }) {
  // ...
}

Маршрут	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 изображения

Размер

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

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

contentType

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

<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() {}

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

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

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons