Favicon (сокр. от  — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой, а также в адресной строке в некоторых браузерах.

История В марте 1999 года Microsoft выпустила браузер Internet Explorer 5, который первым стал поддерживать значки для сайта. Изначально этим значком был файл с именем favicon.ico с картинкой 16×16 пикселей формата ICO, помещённый в корневой каталог веб-сайта. Значок используется браузером Internet Explorer в списке избранного и рядом с URL в адресной строке, если страница находится в закладках. Побочным эффектом было то, что количество посетителей, которые добавили страницу в закладки, можно было оценить по количеству обращений к файлу значка. Эта техника устарела, так как все современные браузеры поддерживают значок без закладок.

Намного позже появились в формате 32×32, но старые браузеры все ещё уменьшают его до 16×16.

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

Поддерживаемые форматы иконки сайта Данная таблица показывает поддержку форматов, в которых может быть выполнен значок сайта (favicon). Браузер ICO PNG GIF Анимированный GIF JPEG APNG SVG Google Chrome Internet Explorer Firefox Opera Safari

Использование Таблица соответствия, какой браузер где использует favicon. Браузер Opera, так же позволяет изменять favicon для Панели быстрого доступа, начиная с Opera 10.

Браузер Адресная строка Подсказка в адресной строке Панель закладок Закладки Вкладки Иконка рабочего стола Edge Firefox Google Chrome Internet Explorer Opera Safari

Современные возможности Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В случае отсутствия такого указания браузер пытается загрузить favicon.ico из корня сайта. Однако имеется возможность явно указать положение значка в (X)HTML-коде (внутри элемента <head>), что позволяет при условии отсутствия /favicon.ico использовать для каждой страницы свой значок.

Для явного указания местоположения favicon.ico необходимо вписать следующую строку в код страницы вашего сайта внутрь секции head:

<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico" />

где rel может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам, — на слово «icon») href содержит абсолютный или относительный URI к файлу (в Mozilla Firefox 3.0, например, поддерживаются те же URI, что и с тегом img). Форматом файла может быть png или gif, размером 16x16 или 32x32 и с 8-битной или 24-битной глубиной цвета (в Mozilla Firefox, например, может быть не только этот, но и как у тега img). При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG).

В 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в Internet Assigned Numbers Authority (IANA). Для этого формата стандартным MIME-типом стал image/vnd.microsoft.icon.

Если для Internet Explorer используется формат ICO, то его MIME-тип должен быть image/vnd.microsoft.icon. Тип image/x-icon устарел в 2003 году после стандартизации типа для ICO. Важно помнить, что иконка не будет показываться в браузере,__FORCETOC__ если её Content-type, возвращаемый веб-сервером, не совпадёт с указанным в html-коде страницы.

Можно указать несколько изображений в разных форматах — например, строку с rel="shortcut icon" и значком в формате ICO для Internet Explorer, и строку с rel="icon" и значком в формате GIF или PNG для остальных браузеров.

Мобильный значок сайта Устройства фирмы Apple начиная с iOS 1.1.3 и некоторые устройства на базе ОС Android поддерживают специальные большие иконки, которые могут использоваться в качестве значков веб-приложений. Сайт может предоставлять такую иконку, указав в заголовке <head> <link rel="apple-touch-icon" ...>. Рекомендуемый размер иконки 60×60 пикселей для iPhone и 120×120 пикселей для iPhone с Retina дисплеем. Для iPad рекомендуется иконка размером 76×76 пикселей, а для iPad с Retina дисплеем (начиная с iPad третьего поколения) — 152×152 пикселя. Для планшетов на Android с браузером Chrome предпочтительной является иконка формата PNG и размера 192x192.

На изображение, упомянутое как apple-touch-icon, накладывается тень, отражение, а также изображение получает скруглённые края. На изображение apple-touch-icon-precomposed не накладывается никаких эффектов.

С закруглёнными краями, добавляемыми iOS

Без отражений

Корневой каталог сайта является локацией по умолчанию для поиска иконок apple-touch-icon-precomposed.png и apple-touch-icon.png.

Примечания

Категория:Всемирная паутина Категория:Графика в Web