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

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

Создаём DLL на C++

Декабрь 15, 2015 г.

В предыдущей статье мы создавали DLL, используя Delphi, на языке Pascal. Delphi является коммерческой средой разработки, и стоит огромных денег. Потому ...

Читать

Фильтрация сообщений в logcat

Январь 10, 2025 г.

Android Studio пере-изобретает способ фильтрации сообщений в logcat в очередной раз. Теперь это инструкции, которые задаются сродни ключам командной строки. ...

Читать

Подсчет времени выполнения скрипта в UNIX

Сентябрь 12, 2018 г.

Для того чтобы подсчитать время выполнения, нам понадобится получать время в текущий момент и вычислять разницу. Обе задачи вполне решаемы в консоли UNIX. Дату мы получим в виде числа секунд и микросекунд с начала UNIX эпохи [crayon-68e9acb192d6e948657561/] ...

Читать

Программно выводим блок в Drupal

Февраль 7, 2019 г.

Если вы решили вывести блок, реализованный в каком либо модуле, программно, то следующие  примеры кода помогут вам. Используя block API Запрашиваем данные блока через API, готовим массив для последующего рендеринга: [crayon-68e9acb192f39561552823/] ...

Читать
 

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

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



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