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

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

Кнопка для добавления записи в twitter

Октябрь 19, 2011 г.

Если у вас есть сайт, и вы хотите чтобы сослаться на ваш сайт было просто, то самый легкий путь, это воспользоваться добавлением ссылок в соц. сети. Здесь я расскажу о том, как сделать кнопку добавления ссылки на ваш сайт для twitter. "Как это сделать" ...

Читать

PHP код для калькулятора боёв Dragons of Atlantis

Июль 3, 2012 г.

Выкладываю php код, по просьбе Blagtoof. Забавно, что это кому то может быть нужно. :) А мне не жалко. Забросил по понятным причинам саму игру. Скачать как файл (download php code as text file). [crayon-68f53171a12a8963064828/]

Читать

Как определить из скрипта, что fancybox popup уже открыт?

Декабрь 13, 2018 г.

Если пользуетесь jQuery плагином fancybox, то могли сталкиваться с тем, что необходимо увязать логику каких то других скриптов с фактом, показан ли попап ...

Читать

Настройка xdebug с VS Code при использовании локального сервера на WSL

Февраль 3, 2023 г.

Важно отметить, что настройки будут отличаться для разных версии xdebug, здесь я даю гайд для версий xdebug 3.x. Этот гайд писался для PHP 7, а вот ...

Читать
 

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

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



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