Настройка иконки сайта в Next.js: создание favicon.ico из SVG

Одного файла favicon.ico может хватить для первого запуска. Но если вам нужно стабильное отображение в браузерах, на главном экране iOS, в PWA и в результатах поиска Google, лучше сразу подготовить полный набор иконок.

В этом руководстве показан практический процесс: определить нужные иконки, сгенерировать их из SVG и аккуратно встроить в Next.js.

Какие файлы иконок вам действительно нужны

Минимальный набор включает:

favicon.ico (резерв совместимости)
icon.svg или icon.png (современные браузеры)
apple-icon.png (иконка главного экрана iOS)
manifest (метаданные PWA)
icon-192.png (размер manifest)
icon-512.png (размер manifest)

Практический рабочий процесс: от SVG к набору иконок

1. Начните с SVG, который читается на маленьких размерах

Favicons часто отображаются при 16x16 и32x32. Оптимизируйте источник соответственно:

Сохраните основную форму, удалите мелкие детали.
Используйте высокий контраст.
Избегайте очень тонких линий.

Быстрый просмотр в SVG Viewer.

2. Создайте `favicon.ico`

Используйте SVG в ICO для конвертации SVG в многоразмерный ICO.

3. Создайте AppleIcon и PNG

Используйте SVG в PNG:

apple-icon.png 180×180 для главного экрана iOS
icon-192.png иicon-512.png для manifest

4. Создайте manifest.json

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

5. Добавьте в Next.js

В app/layout.tsx:

<link rel="apple-touch-icon" href="/apple-icon.png" />
<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />

Резюме

Это простой и последовательный процесс, который помогает собрать весь комплект иконок сайта из одного SVG, а затем без лишней ручной работы встроить его в Next.js.

Настройка иконки сайта в Next.js: создание favicon.ico из SVG