Совет: как быстро вставить фавикон в HTML

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

С фавиконом все не так просто, на самом деле. Работа со всеми устройствами очень сильно растягивается и становится крайне утомительным процессом из-за фрагментации в мобильных и настольных ОС, а также браузерах. Иногда приходится работать с 30+ ресурсами одновременно, все зависит от уровня поддержки, которого вы хотите добиться.

К счастью для нас, есть веб-сервис Real Favicon Generator. На данном веб-сайте реализована пошаговая система генерации, которая позволяет быстро и очень просто генерировать все необходимые фавиконы и веб-ресурсы.

Процесс генерации

Real Favicon Generator сильно упрощает процесс генерации иконок. Сперва необходимо выбрать фавикон и загрузить его в генератор. После загрузки страницы перед вами появятся экраны различных устройств.

В некоторых секциях есть одинаковые опции. Например, можно добавить отдельное изображение для конкретного устройства или внешний отступ margin к иконке, а также изменить фоновый цвет. Ниже представлены экраны устройств, которые можно настраивать (iOS и Android и другие Windows / Safari).

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

Помимо генерации самих иконок сервис умеет создавать манифест файл для мобильной версии Chrome, а также изменять другие настройки в прикрепляемых закладках в Safari. Значения настроек в результате заносятся в теги meta.

Как использовать фавиконы

Нажмите кнопку «generate», когда будете готовы. После загрузки страницы перед вашими глазами будет сырой HTML код, который необходимо будет скопировать на сайт. Пример кода:

Генератор создает все теги link и meta на основе ваших настроек. Для загрузки файлов нужно нажать на кнопку Favicon Package. После загрузки извлеките файлы в любую папку и скопируйте иконки на сайт. В процессе настроек можно указать директорию хранения на тот случай, если ваши иконки будут находиться не в корневой папке сайта (к примеру, иконки могут находиться в папке /images/favicons).

Осталось лишь скопировать файлы и добавить HTML код в тег . Теперь при закреплении сайта на устройстве пользователям будет показываться красивый фавикон.

Если данный сервис поможет сэкономить вам время, то, быть может, вы пожертвуете пару долларов в знак благодарности (принимаются даже биткоины!).

Дополнительные функции и опции

Помимо генерации иконок сервис Real Favicon Generator может проверить, а все ли форматы фавикона используются на вашем сайте. После проверки вы увидите сообщения об отсутствующих форматах иконок, если таковые есть.

Поддержка фавиконов развивается, а этот замечательный сервис поможет генерировать лучшие фавиконы и дополнительные ресурсы.

Автор: Simon Codrington

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: