Иконка, отображаемая на вкладке браузера, перед названием страницы называется favicon (от англ. FAVorite ICON — «значок для избранного»). Эти иконки используются в списках избранного в браузере, вы можете увидите их в результатах поиска Яндекс и многих других местах.
Чтобы подключить иконку к своему сайту, необходимо разобраться как задать её описание в шаблоне сайта. Существует несколько поддерживаемых форматов иконки. Все браузеры поддерживают формат ico. Чтобы подключить иконку в этом формате достаточно добавить в секцию <head> документа такой код:
|
1 2 |
<link rel="icon" type="image/vnd.microsoft.icon" href="--path--/favicon.ico"> <!-- где --path-- это путь к файлу иконки favicon.ico на сайте --> |
Как отредактировать файлы шаблона в сайте на 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 код (покажу сразу несколько примеров):
|
1 2 3 4 5 6 7 8 9 |
<head> <!-- пример подключения иконки в формате .ico --> <link rel="icon" type="image/vnd.microsoft.icon" href="http://www.mydomain.com/myicon.ico"/> <!-- пример подключения .png --> <link rel="icon" type="image/png" href="mypath/icon.png" /> <!-- пример подключения .gif --> <link rel="icon" type="image/gif" href="mypath/favicon.gif" /> <title>My Title</title> </head> |
Для совместимости с ранними версиями браузеров, можно оставить код, подключающий иконку в формате .ico. Но некоторые из них будут предпочитать иконку в формате .ico другим вариантам.