Подключаем иконку на сайт, 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 другим вариантам.

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

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

Кастомизация infoWindow на картах гугл

Январь 25, 2018 г.

Поп-ап на картах гугл, объект google.maps.InfoWindow, привлекателен возможностью вставки в него собственного HTML контента. Но кастомизация внешнего вида ...

Читать

CURL выдаёт SSL certificate problem, что делать?

Февраль 12, 2017 г.

Если при отправке запроса через CURL по https, вы получаете следующую ошибку: [crayon-60d55c9942504993584767/] То можно отключить соответствующие проверки, выключив в опциях следующие флаги -SSL_VERIFYHOST, SSL_VERIFYPEER. [crayon-60d55c994250c282804401/] ...

Читать

 

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

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



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