По умолчанию все браузеры ищут фавикон в корне сайта, но ничего не случиться, если мы поместим фавикон в папку с картинками и укажем пути в хедере сайта. Удобнее всего создавать фавиконки в онлайн-генераторах. Сервис сам создаст оптимальные размеры и выдаст сгенерированный код.
По умолчанию все браузеры ищут фавикон в корне сайта, но ничего не случиться, если мы поместим фавикон в папку с картинками и укажем пути в хедере сайта. Удобнее всего создавать фавиконки в онлайн-генераторах. Сервис сам создаст оптимальные размеры и выдаст сгенерированный код.
1) Создать фавикон
Нужно подготовить картинку в любом из форматов (PNG, JPG, SVG), размером 260x260 пикселей. Как правило, при верстке сайта по готовому макету, дизайнер предоставляет уже готовую картинку для favicon. В остальных случаях можно самим нарисовать в фотошопе или скачать подходящее изображение, например здесь.
2) Добавить картинку в генератор и настроить
Генератор favicon
После генерации нас перекинет на страницу настроек. Настраиваем фавикон для iOS - выбираем второй пункт и задаем нужный цвет фона.
Делаем настройки под Android. Так же даем цвет фона и прописываем название проекта.
Остальные настройки можно оставить по умолчанию. Favicon генератор в качестве результата выдаст HTML код и архив для скачивания.
3) Установка фавикон на сайт
Скопированный HTML код вставляем в проект, между тегами head.
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="manifest" href="img/site.webmanifest">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
Скачиваем архив с автоматически сгенерированными фавиконками и распаковываем его в нужную папку. Затем меняем в коде пути к картинкам и к манифесту.
4) Проверяем
Открываем наш сайт и видим, что в адресной строке появился фавикон. Теперь браузер не будет тратить драгоценное время для поиска фавиконки, поскольку вы указали, где находятся фавиконки на вашем сайте.
Не стоит сильно заморачиваться с созданием фавиконок, делая размеры под все существующие устройства. Данный генератор предлагает нам оптимальный набор фавиконок, подходящих под большинство браузеров, в том числе и под мобильные устройства на Apple.
