App Router може створювати елементи підключення іконок із файлів зі стандартними назвами або з об’єкта metadata. Обидва підходи придатні, але їх змішування без чіткого правила легко призводить до конкуруючих оголошень.
Використайте стандартні назви файлів
Помістіть favicon.ico до кореня app. Підтримувані файли icon можуть розташовуватися в сегменті маршруту, а apple-icon описує іконку для пристроїв Apple.
Next.js знаходить ці файли, визначає потрібні атрибути й додає відповідні елементи link до head. Іконка в сегменті застосовується до маршрутів цього сегмента.
| Файл | Розташування | Призначення |
|---|---|---|
| favicon.ico | app/ | Резервна іконка сайту |
| icon.svg | сегмент app | Іконка браузера |
| apple-icon.png | сегмент app | Іконка Apple |
| manifest.webmanifest | сегмент app | Маніфест для встановлення |
Використовуйте метадані для явних шляхів
Якщо файли розташовані в public або на хостингу зображень, оголосіть metadata.icons у layout або на сторінці. Укажіть icon, apple і за потреби shortcut, використовуючи узгоджені URL.
Метадані дочірнього сегмента можуть замінювати складені поля, успадковані від батьківського. Перевірте кінцевий head на кількох маршрутах, а не припускайте, що всі батьківські записи було об’єднано.
Для піктограми, створеної на вимогу, Next.js також підтримує icon.tsx або icon.js. Функція повертає дані зображення з чітким розміром і типом вмісту. Зберігайте цей підхід для справді динамічних композицій: статичний файл простіше кешувати, перевіряти та обслуговувати узгоджено в усіх розгортаннях.
З’єднайте маніфест і його значки
Статичний файл маніфесту або функція manifest.ts можуть описувати назву застосунку, кольори й іконки для встановлення. URL іконок у маніфесті мають бути публічними та вказувати на файли з оголошеними розмірами.
Зберігайте роль маніфесту окремо від значка вкладки: піктограма встановлення 512×512 не замінює автоматично icon.svg або favicon.ico.
Перевірте виробничу збірку
Виконайте виробничу збірку, відкрийте по одному маршруту з кожного зміненого сегмента та перевірте елементи link. Потім безпосередньо відкрийте URL кожного файлу й переконайтеся, що middleware не перехоплює запити.
Якщо використовуєте basePath або CDN, перевірте сформовані URL у розгорнутому середовищі. Локальна перевірка не завжди виявляє неправильну базову публічну адресу або правило перезапису.
Першоджерела
Поширені запитання
Чи потрібно писати елементи посилань від руки?
Ні. Стандартні назви файлів або metadata.icons дозволяють створювати їх автоматично. Виберіть одне чітке джерело налаштувань.
Де розмістити favicon.ico?
В App Router файл зі стандартною назвою favicon.ico підтримується в корені каталогу app.
Чи замінює manifest.ts icon.svg?
Ні. Маніфест серед інших даних описує піктограми, які можна встановити, тоді як icon.svg безпосередньо обслуговує піктограму браузера.