Устанавливаем фавикон на свой сайт
Фавикон – это маленькая картинка в браузере, которая отображается рядом с названием сайта. Также ее можно увидеть сбоку в поисковой выдаче напротив результатов. Функциональной нагрузки она не несет, однако веб-мастеру всё же стоит её установить, чтобы выделить свой сайт.
09.08.2016 06:55
Владимир Заиченко
Президент
По мере развития веб-технологий требования к фавикону также меняются. Раньше для корректного отображения можно было загрузить в корень сайта квадратную картинку 16х16 пикселей и быть спокойным – браузер ее с легкостью отобразит.
Современные требования
Сейчас разные браузеры и операционные системы предъявляются свои требования, вот некоторые из них:
— Internet Explorer: для него корректными являются файлы, сохраненные с именем favicon и расширением ico – favicon.ico; для этого браузера подойдут изображения с размерами 16х16, 32х32 или 48х48;
— Internet Explorer 10 и 11 версии (под Windows 8.0 и 8.1 соответственно) отображают изображения в формате PNG;
— Формат PNG также используется для отображения фавикона сайта устройствами с Google TV (с разрешением 96х96) и Opera Coast (228×228);
— Устройства Apple предпочитают картинки разрешения не меньше 180х180.
Это лишь некоторые особенности загрузки и отображения фавикона различными устройствами. Сразу возникает логичный вопрос – как же сгенерировать иконку правильно и сразу под все операционки и браузеры?
Онлайн-генерация фавикона
Онлайн-сервис Real Favicon Generator – это именно то, что нужно в данном случае. Он позволяет создать как иконки, так и дополнительные файлы к ним, которые потом легко добавить на свой сайт.
Чтобы начать создание мини-картинки, следует загрузить изображение 512х512 пикселей. Далее можно будет выбрать тип масштабирования и сжатие. Так выглядят иконки, сделанные этим онлайн-сервисом (для примера возьмем изображение Windows 7):
При создании фавикона можно задать большое количество настроек: название сайта или приложения, цвет фона, размер значка и другие. Посмотреть, как он будет выглядеть на различных платформах.
После того, как все настройки заданы, нужно нажать на кнопку «Generate your Favicons and HTML code», которая отправит на следующую страницу – здесь можно скачать zip-архив сгенерированных картинок и получить HTML-код для вставки.