Favicon для сайта

Фавикон — иконка для избранного. То самое лого сайта с вкладки браузера. Раньше это была иконка 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-иконку с темной и светлой версией

❤️ Жми на сердечко, если интересно ⚡️ Жми на молнию, если полезно 🏆 Жми на кубок, если рисуешь иконки