Фавикон для Next.js
Next.js 14+ App Router рассматривает /app/icon.png и /app/favicon.ico как соглашения — добавьте их, и Next автоматически создаст нужные теги.
Поместите favicon.ico внутри /app, и Next обработает его по адресу /favicon.ico и вставит тег ссылки.
Для значков разного размера или тематических значков используйте соглашения о файлах: icon.png, icon.svg, apple-icon.png внутри /app. Далее генерируются теги <link> из метаданных файла.
Как это работает
- 1
Создать favicon.ico
Мультиразмер 16/32/48/64 из источника 512×512.
- 2
Поместить в /app
/app/favicon.ico обслуживается автоматически. Добавьте icon.png для HD.
- 3
Проверять
Откройте /favicon.ico в своем браузере — Next обслужит его без каких-либо настроек.
Попробовать сейчас
Создайте готовый значок Next.js.
Генератор фавиконовЧастые вопросы
Куда помещаются значки в App Router Next.js?+
Внутри каталога /app. Имя файла (значок, значок яблока, фавикон) определяет роль.
А как насчет Pages Router?+
Перетащите favicon.ico в /public и свяжите его с _document.tsx.
Нужен ли мне еще файл .ico разных размеров?+
Рекомендуется для поддержки устаревших браузеров, особенно Edge и ярлыков режима IE.