Question 1

Какие размеры нужно создать для favicon?

Accepted Answer

Минимум: PNG 16×16 и 32×32 для вкладок браузера, а также 180×180 для Apple Touch Icon (экран iOS). Для полного покрытия добавьте 48×48 для ярлыков на рабочем столе, 192×192 для Android Chrome и 512×512 для экранов запуска PWA. Классический favicon.ico может объединять 16×16 и 32×32 в одном файле.

Question 2

Какой формат лучше для favicon — SVG или ICO?

Accepted Answer

Современные браузеры поддерживают SVG-фавиконки: они чёткие при любом размере и занимают мало места. Формат ICO лучше поддерживается в старых браузерах и может объединять несколько разрешений. Рекомендуется использовать оба: SVG для современных браузеров и ICO-запасной вариант для старых, оба подключаются через <link>-теги.

Question 3

Как добавить favicon в HTML сайта?

Accepted Answer

Добавьте эти теги в раздел : для классического ICO, для SVG и для iOS. Разместите favicon.ico прямо в корневом каталоге, так как браузеры также запрашивают его автоматически.

Question 4

Почему новый favicon не отображается после замены?

Accepted Answer

Браузеры агрессивно кэшируют фавиконки. Чтобы принудительно обновить, добавьте строку версии: <link rel="icon" href="/favicon.ico?v=2">. Также можно принудительно перезагрузить страницу (Ctrl+Shift+R или Cmd+Shift+R) или очистить кэш браузера. В Chrome можно кликнуть правой кнопкой по вкладке и выбрать «Обновить».

Question 5

Что такое Web App Manifest и нужен ли он мне?

Accepted Answer

Web App Manifest (manifest.json или site.webmanifest) определяет, как сайт выглядит при установке как PWA на мобильных устройствах. Задаёт иконки приложения (192×192 и 512×512), название, цвет темы и режим отображения. Для базового favicon необязателен, но рекомендуется для сайтов, которые пользователи могут добавить на главный экран.

Генератор Favicon

Часто задаваемые вопросы

Comments & Feedback