Найти в Дзене
Век живи

Создание фавикона в формате svg. Яндекс рекомендует.

Приветствую! Уважаемый читатель.

Сегодня хотелось бы рассказать, как я устранил проблему с отображением фавикона на своих сайтах. На днях, а точнее 22 сентября в панели вебмастера от Яндекса пришло сообщение:

Добавьте на сайт ……..ru файл favicon в формате SVG или размером 120 × 120 пикселей.
Добавьте на сайт ……..ru файл favicon в формате SVG или размером 120 × 120 пикселей.

Со времени создания фавикона в формате ICO, прошло много времени, и теперь его функции на много расширились. Для правильного отображения на различных платформах нам необходимо настроить целый ряд параметров. Конечно, настраивать под каждый браузер и систему и отследить, как они отображаются, займет довольно длительное время. Поэтому я потратил время, но нашел сервис, который поможет нам сделать это буквально за считанные минуты в режиме онлайн.

Очень хороший сайт по созданию фавикона для всех версий устройств: здесь. На данном сайте мы можем, загрузить картинку, для лучшего результата картинка должна быть 260 на 260 пикселей не меньше и на выходе нам сгенерируются иконки для всех устройств.

Иконка для iOS
Иконка для iOS
Иконка для Windows
Иконка для Windows
Иконка для браузера
Иконка для браузера

Там, ещё есть пару окон, эти я разместил с целью показать вам, что возможностей там масса.

В процессе, можно самому настраивать отдельные параметры и сразу видеть, как иконка будет выглядеть после генерации. После того как настроены все параметры на свой вкус, нажимаем кнопку сгенерировать иконки.

Нажимаем синюю кнопку.
Нажимаем синюю кнопку.

Проходит секунд 15 и иконки готовы. Скачиваем архив с иконками к себе на компьютер. Размещаем иконки в корень сайта и между тегами <head> прописываем код, который копируем с сайта, где только что сгенерировали иконки. Всё.

-6

Нажимаем на кнопку проверить и смотрим, что всё нормально отображается на всех устройствах.

А саму иконку, которая у меня была до этого (favicon.ico), я с помощью вот этого сайта конвертировал в формат svg. Загрузил в корень сайта и всё. Через пару дней Яндекс в панели вебмастера, убрал сообщение, что нет файла в формате svg.

Конечно, можно было проделать только конвертацию на вот этом втором сайте и всё, но зато теперь наша иконка корректно отображается на всех устройствах, что благотворно сказывается на нашем сайте.

Надеюсь, информация была полезна для вас, и вы сэкономите время, на создание фавикона в формате svg.

Желаю всем мира и добра!

p.s. Подписывайтесь на наш канал! Ставьте класс и делитесь статьёй с друзьями! До новых встреч!