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

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

Drupal Commerce - расчет доставки для выбранного района

Август 26, 2021 г.

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

Читать

Качество изображений в Drupal

Май 15, 2015 г.

Иногда жалуются, что преобразование изображений в drupal приводит к сильному снижению качества. Где и что настроить, чтобы решить эту проблему смотрите ...

Читать

Хлебные крошки для сайта на Wordpress

Январь 16, 2017 г.

Я нашел пару "годных" модулей для создания хлебных крошек на сайте под управлением WP. Все они находятся по запросу "breadcrumb" на странице "добавить ...

Читать

Импортируем изображения через wysiwyg

Декабрь 27, 2014 г.

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

Читать
 

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

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



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