О favicon стало известно уже давно. Сайт выглядит лучше в окне браузера, если у него есть иконка, которая отображается первой на вкладке, далее идет описание сайта title.
С самого начала задумали использовать специальный формат изображения ICO, размер картинки которого составляет 16 х 16 пикселей. Для того чтобы прописать в HTML коде, что иконка для сайта есть применяется специальный код, который я приведу ниже. К тому же следует отметить, что инициализация favicon и сейчас, в конце 2019 года прекрасно поддерживается всеми браузерами. Не смотря на поддержку ico технология считается устаревшей. Вот код, который инициализирует технологию favicon посредством файта *. ico:
<link rel="shortcut icon" href="https://example.com/img/favicon.ico">
<link rel="icon" type="image/ico" href="https://example.com/img/favicon.ico">Всего эти 2 строчки в блоке head и правильно подобранная иконка давали приличный результат.
К сожалению формат ико уже не поддерживается некоторыми современными браузерами для мобильных устройств. Например Google Chrome for Android
Как видите, здесь сайт про ремонт и строительство имеет картинку – она в формате png. А вот другие сайты иконки не показывают – хотя она там имеется в старом формате ICO.
Почему стоит всё еще поддерживать формат ICO
В основном для поддержки старых браузеров, таких как Mircosoft Internet Explorer. До 11 версии формат PNG в Internet Explorer не поддерживался.
Формат PNG начал активно использоваться при появлении HTML5. в нём есть атрибут sizes, который указывает, какие есть размеры картинок в формате png. Браузер или устройство смотрит, какие есть картинки и подбирает наиболее подходящее для своей платформы.
Использование формата PNG
Для подключения формата PNG тоже нужно прописать в коде всего пару строчек. Выглядять они вот так”
<link rel="icon" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-32x32.png" sizes="32x32" />
<link rel="icon" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-180x180.png" />
<meta name="msapplication-TileImage" content="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-270x270.png" />Если вы успользуете популярную систему управления сайтом, например Вордпресс – то эти строчки создаются автоматически, вам всего лишь нужно выбрать в определённом месте картинку правьльных размером. Остальные размеры изображения будут созданы автоматически.
Так же иконки сайта используются для изображения в плитках – такие возможности появились в новых версиях Microsoft Windows. Для фона плитки в коде тоже можно указать цвет <meta name="msapplication-TileColor" content="#009900">
Вывод
Если вы создаёте сайт – позаботьтесь о иконке для него. В совремённом мире информационных технологий принято использовать иконку в формате PNG. Формат ICO является устаревшим.