Favicon это сокращение двух слов - favorites и icon, то есть это избранная иконка (значок). Она позволяет сделать ваш сайт узнаваемым.
Вначале, фавиконка отображалась только в закладках сайтов, помогая визуально отличать их друг от друга. Сейчас же, она отображается практически везде: во вкладках десктопных и мобильных браузеров, на пустом начальном экране, на странице поисковой выдачи рядом со строкой сайта.
Поэтому раньше достаточно было сделать одну иконку небольшого размера, которая отображалась только в закладках браузера, а сейчас уже необходимы значки самых разных размеров, для корректного отображения на самых разных платформах.
Рисовать иконку разного размера для каждой платформы самому долго и муторно. Поэтому хочу поделиться с вами сервисом https://realfavicongenerator.net/, который позволяет из одной иконки сгенерировать все необходимые размеры. Изначально вам нужна лишь одна иконка с разрешением не менее 260х260 пикселей.
Как создать favicon для разных платформ и браузеров?
Перейдите на сайт и нажмите на кнопку Select your Favicon image.
Выберите своё изображение, подготовленное для иконки. На следующей странице вам нужно будет выбрать настройки для ваших иконок для разных платформ. Например для операционной системы iOS, для MacOS и Safari, для Android, для плиток Metro Windows 8 и 8.1 и т.д. В последнем разделе можно выбрать степень сжатия иконок (компрессии) для уменьшения их веса.
Завершив выбор необходимых настроек остается нажать на кнопку Generate your Favicons and HTML code и дождаться генерации несколько секунд.
По окончании сайт выдаст ссылку для скачивания пакета иконок и HTML код , который нужно вставить между тегами <head></head> кода вашего сайта. Сгенерированные иконки нужно загрузить в коренную (root) папку сайта.
Также на этом же сайте можно проверить какие размеры иконок есть на вашем сайте, а какие еще нужно добавить. Сделать это можно нажав на кнопку Check your favicon
