Всем привет. Недавно мне понадобилось сделать все возможные favicon в разных разрешениях и форматах для сайта whitedogs.ru. В этой статье я расскажу как правильно сгенерировать favicon, каких размеров, в каком формате и что прописать в head.

Генерируем favicon

Заходим на https://realfavicongenerator.net/ и нажимаем "Select your Favicon image". Здесь есть все необходимые настройки. Выставляем их

Нажимаем "Генерировать favicon", скачиваем архив и заливаем в корень сайта или лучше в папку favicon

Прописываем пути favicon d HTML

<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="manifest" href="favicon/site.webmanifest">
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-config" content="favicon/browserconfig.xml">

проверьте правильность всех путей, поправьте пути в browserconfig.xml и site.webmanifest

Проверяем валидность

Проверить правильность подключения сгенерируемых иконок на этом же сервисе

Если вы всё сделали правильно, то получите вот такой красивый чек

Теперь во всех сервисах и в качестве приложения ваша иконка будет показываться красиво. Спасибо за внимание