Favicon не отображается в Astro? Вот решение
Astro копирует public/ в вывод без изменений, но никогда не вставляет теги иконки за вас. Пустая вкладка означает, что ссылки нет в макете, который используют ваши страницы, или страница отрендерила собственный элемент html и пропустила макет.
public/ сохраняет имена, но за вас ничего не подключается
Файлы в public/ копируются в корень вывода дословно, поэтому /favicon.svg или /favicon.ico — это реальный URL. Но Astro не сканирует public/ и не вставляет теги. Всё, что вы хотите в head, должно быть прописано в компоненте макета, в который ваши страницы себя оборачивают.
Подвох — в страницах, которые пропускают макет. У кастомного 404 или разовой лендинг-страницы, пишущей собственный элемент html, не будет тегов иконки, пока вы не добавите их и туда.
Найдите пробел
- 1
Откройте /favicon.ico (или /favicon.svg) напрямую
Ошибка 404 означает, что файла нет в public/. Если он загружается, файл в порядке, и проблема в отсутствующем теге link.
- 2
Проверьте, что макет рендерит ссылку
Откройте исходный код обычной страницы. Отсутствие тега rel=icon означает, что ваш Layout.astro его не включает. Добавьте теги link в head макета.
- 3
Проверьте страницы, которые пропускают макет
Кастомные 404 и отдельные страницы, пишущие собственный html, не наследуют head макета. Добавьте теги иконки и туда или оберните их в макет.
Favicon не отображается в Astro: частые вопросы
Почему мой favicon в Astro не отображается?
Astro не вставляет теги иконки, поэтому либо ваш макет не рендерит ссылку, либо конкретная страница пропускает макет. Убедитесь, что файл загружается по своему URL, затем проверьте, что head макета действительно содержит теги rel=icon.
Нужно ли добавлять теги на каждую страницу?
Только в макет, в который оборачиваются ваши страницы. Подвох — в страницах, которые этого не делают: кастомному 404 или лендингу, пишущему собственный элемент html, теги нужно добавить напрямую.
Мой сайт под подпутём, и иконки дают 404.
Задайте base в astro.config.mjs, но Astro не переписывает жёстко прописанные пути в вашей собственной разметке. Добавьте к href префикс import.meta.env.BASE_URL и проверьте собранный HTML перед деплоем.