Фавикон — иконка для избранного. То самое лого сайта с вкладки браузера.
Раньше это была иконка 16х16px, но сейчас для корректной работы на всех устройствах можно сделать до 27 изображений разного размера и формата.
В сети много сложных и местами противоречивых инструкций про favicon и его поддержку разными устройствами. Я перебрал несколько десятков и вот мои выводы.
Favicon используется:
– В заголовке или на вкладке браузера
– В поиске Google и Яндекс — около названия сайта будет показана иконка
– В разных программах, которые работают с сайтами.
– В качестве иконки на мобильнике, если пользователь сохранит сайт на рабочий стол
Для полной поддержки нужен векторный логотип компании, из которого мы будем делать полный набор:
– SVG-иконку, которая автоматически включает темную или светлую версию под тему оформления пользователя (а что, так можно было?).
– PNG 512х512 и 192х192 без полей под Android.
– PNG 512х512 и 180х180 с отступами от края под iOS.
– PNG 32х32 и 16х16, запакованные как favicon.ico для совместимости со старыми девайсами.
– JSON-файл manifest.webmanifest в корень сайта со ссылками на файлы иконок для мобилок и PWA.
Полный гид по техническим подробностям от Злых Марсиан (обновлено в 2025 году).
Инструкции такого размера ради одной иконки меня удручают. Выглядит как подарочный ребус для досуга дизайнера.
Лайфхак: У моего блога ещё нет логотипа. Поэтому я решил взять в качестве иконки обычную эмодзи. Пусть будет 🤖
Найденный сайт позволил выбрать эмодзи и сразу получить набор иконок всех нужных размеров. Не хватает только SVG-версии. Её нахожу на другом сайте по запросу robot emoji svg download. Обойдусь без тёмной версии, её создание выглядит для меня трудозатратно.
В обоих случаях это одна и та же иконка из бесплатного набора, который выпустил Twitter под open source лицензией MIT — можно использовать в качестве фавиконки ничего не нарушая.
Ещё полезные ссылки:
– Генератор иконок из вашей картинки
– Упаковщик favicon.ico
– Инструкция как сделать SVG-иконку с темной и светлой версией