Лучший генератор favicon для Next.js
Next.js не использует теги link, которые вы пишете вручную. App Router читает файлы с именами icon, apple-icon и favicon из директории app и вставляет разметку на этапе сборки. Правильный генератор выдаёт именно эти файлы.
Что действительно важно в Next.js
App Router берёт иконки из файлов, а не из тегов. Файл с именем icon, apple-icon или favicon в директории app автоматически размеряется и подключается. Поэтому решающий вопрос к генератору — именует и размещает ли он вывод по этому соглашению или отдаёт россыпь PNG и набор тегов link, которые фреймворку не нужны.
Pages Router устроен иначе: там вы кладёте файлы в public и объявляете теги в кастомном Head. Генератор, знающий, в каком из двух вы находитесь, избавляет вас от единственной ошибки, из-за которой favicon в Next.js тихо не выводит ничего.
Критерии, которые важны в Next.js
| На что смотреть | Почему это важно в Next.js | Как это делает генератор здесь |
|---|---|---|
| Имена файлов App Router | Иконки берутся из app/icon, app/apple-icon, app/favicon.ico | Экспортирует файлы, именованные и размещённые по этому соглашению |
| Без тегов, написанных вручную | Фреймворк сам вставляет теги link за вас | Пропускает избыточные теги, которые добавил бы обычный инструмент |
| Манифест и Android | Установке PWA нужен полный диапазон размеров | Экспортирует manifest.json плюс иконки Android 192 и 512 |
| Учитывает роутер | App и Pages берут иконки по-разному | Инструкция по установке охватывает оба роутера, а не только один |
Куда ложатся файлы (App Router)
- app/
- favicon.icoaddServed at /favicon.ico, tag auto-injected
- icon.pngaddSized and linked at build
- apple-icon.pngadd180x180 home screen icon
- public/
- manifest.jsonaddPWA install metadata
- android-icon-192x192.pngadd
- android-icon-512x512.pngadd
Файлы, помеченные add, — те, что экспортирует генератор. Всё остальное — стандартный проект Next.js.
Генератор против одних лишь файловых соглашений Next.js
Генератор с учётом Next.js
Start hereрекомендуется
- Экспорт соответствует соглашению директории app
- Создаёт favicon.ico, все размеры PNG и apple-icon
- Включает manifest.json и размеры Android для установки PWA
- Одно исходное изображение — каждый размер отрисован корректно
Положить один файл самому
- app/favicon.ico в одиночку покрывает вкладку и ничего больше
- Нет apple-touch, поэтому домашние экраны iOS откатываются на запасной вариант
- Нет манифеста, поэтому установка на Android выглядит недоделанной
- Один файл, уменьшенный вручную, редко читается на 16px
Нужны ли теги link для favicon в Next.js?
В App Router — нет. Файлы с именами favicon.ico, icon и apple-icon в директории app читаются, размеряются и подключаются автоматически на этапе сборки. Генератор, который вдобавок выдаёт написанные вручную теги link, добавляет разметку, которую фреймворк уже создаёт. Исключение — Pages Router, где вы объявляете теги в кастомном Head.
Какие размеры генератор должен экспортировать для Next.js?
favicon.ico для вкладки, apple-icon 180x180 для домашних экранов iOS, а также PNG 192 и 512, подключённые из manifest.json, для Android и установки PWA. Проектируйте знак сначала на 16px, ведь именно этот размер решает, читается ли он.
The step-by-step for Next.js
You've picked the tool. Here's the exact install for Next.js.