Устанавливаем фавикон на свой сайт

Фавикон – это маленькая картинка в браузере, которая отображается рядом с названием сайта. Также ее можно увидеть сбоку в поисковой выдаче напротив результатов. Функциональной нагрузки она не несет, однако веб-мастеру всё же стоит её установить, чтобы выделить свой сайт.

По мере развития веб-технологий требования к фавикону также меняются. Раньше для корректного отображения можно было загрузить в корень сайта квадратную картинку 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 (228x228);

- Устройства Apple предпочитают картинки разрешения не меньше 180х180.

Это лишь некоторые особенности загрузки и отображения фавикона различными устройствами. Сразу возникает логичный вопрос – как же сгенерировать иконку правильно и сразу под все операционки и браузеры?

Онлайн-генерация фавикона

Устанавливаем фавикон на свой сайт

Устанавливаем фавикон на свой сайт

Онлайн-сервис Real Favicon Generator – это именно то, что нужно в данном случае. Он позволяет создать как иконки, так и дополнительные файлы к ним, которые потом легко добавить на свой сайт.

Чтобы начать создание мини-картинки, следует загрузить изображение 512х512 пикселей. Далее можно будет выбрать тип масштабирования и сжатие. Так выглядят иконки, сделанные этим онлайн-сервисом (для примера возьмем изображение Windows 7):

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

После того, как все настройки заданы, нужно нажать на кнопку «Generate your Favicons and HTML code», которая отправит на следующую страницу – здесь можно скачать zip-архив сгенерированных картинок и получить HTML-код для вставки.

Устанавливаем фавикон на свой сайт

Устанавливаем фавикон на свой сайт