Михаил Сенсеев пишет:

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 — можно использовать в качестве фавиконки ничего не нарушая.

Ещё полезные ссылки:

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