Подключаем иконку на сайт, favicon

Иконка, отображаемая на вкладке браузера, перед названием страницы называется favicon (от англ. FAVorite ICON — «значок для избранного»). Эти иконки используются в списках избранного в браузере, вы можете увидите их в результатах поиска Яндекс и многих других местах.

icons-i-see-you-baby

Чтобы подключить иконку к своему сайту, необходимо разобраться как задать её описание в шаблоне сайта. Существует несколько поддерживаемых форматов иконки. Все браузеры поддерживают формат ico. Чтобы подключить иконку в этом формате достаточно добавить в секцию <head> документа такой код:

Как отредактировать файлы шаблона в сайте на wordpress, в том числе header.php, содержащий секцию head (изложено на примере футера), читайте здесь.

Почему название файла иконки — favicon.ico?

При подключении, указанным выше способом, вы вообще-то можете задать произвольное название файла, например, my-icon.ico. А название favicon связано с историей появления иконки.

В 1999 году компания Microsoft выпустила свой браузер Internet Explorer 5. Он впервые стал поддерживать значки для сайта. Таким значком выбирался файл с именем favicon.ico, который должен был быть помещён в корневой каталог сайта. Т.е. изначально не требовалось даже описывать в HTML документе его наличие. Иконка должна была использоваться при добавлении файла в «избранное».

Современные браузеры, при отсутствии описания в HTML, попробуют проверить наличие файла favicon.ico в корне сайта.

Надо заметить, что файлы ICO морально устарели — их максимальное разрешение 32×32 точки. Но если вы хотите «угодить» любому, даже самому дряхлому браузеру, то для создания иконки в формате ICO вам поможет сайт favicon.cc. Там вы можете преобразовать произвольную картинку в файл .ico и/или нарисовать и отредактировать иконку в пиксельном редакторе.

Другие форматы иконки для сайта

Все современные браузеры могут использовать в качестве иконки jpeg, png или gif изображение. Некоторые из них (firefox и opera) работают в том числе и с анимированными иконками.

Как подключить иконку в другом формате. Для этого в секцию head нужно добавить вот такой HTML код (покажу сразу несколько примеров):

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

Написать комментарий

Мало букафф? Читайте есчо !

Эффект тряски элемента на сайте при наведении с помощью CCS3

Октябрь 23, 2015 г.

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...

Читать

Считаем полное число строк в запросе MySQL, ограниченного LIMIT

Ноябрь 2, 2012 г.

О полезном операторе - SQL_CALC_FOUND_ROWS. Это конструкция просто незаменима для организации постраничного вывода каких либо данных. Все время забываю синтаксис, приходится каждый раз искать. Решил записать в блоге, чтобы уж не терять :). Во всех ...

Читать

 

Комментарии к «Подключаем иконку на сайт, favicon»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: