Русская Википедия:Favicon
Favicon (сокр. от Шаблон:Lang-en — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой[1][2], а также в адресной строке в некоторых браузерах.
История
В марте 1999 года Microsoft выпустила браузер Internet Explorer 5, который первым стал поддерживать значки для сайта[3]. Изначально этим значком был файл с именем favicon.ico
с картинкой 16×16 пикселей формата ICO, помещённый в корневой каталог веб-сайта. Значок используется браузером Internet Explorer в списке избранного и рядом с URL в адресной строке, если страница находится в закладках[4][5][6][3]. Побочным эффектом было то, что количество посетителей, которые добавили страницу в закладки, можно было оценить по количеству обращений к файлу значка. Эта техника устарела, так как все современные браузеры поддерживают значок без закладок[5].
Намного позже появились в формате 32×32, но старые браузеры все ещё уменьшают его до 16×16[7].
Поддержка браузерами
Следующая таблица иллюстрирует основные веб-браузеры, поддерживающие различные функции. Номера указывают начальную версию браузера, с которой осуществляется поддержка указанной функции.
Поддерживаемые форматы иконки сайта
Данная таблица показывает поддержку форматов, в которых может быть выполнен значок сайта (favicon).
Использование
Таблица соответствия, какой браузер где использует favicon. Браузер Opera, так же позволяет изменять favicon для Панели быстрого доступа, начиная с Opera 10[13].
Браузер | Адресная строка | Подсказка в адресной строке | Панель закладок | Закладки | Вкладки | Иконка рабочего стола |
---|---|---|---|---|---|---|
Edge | Шаблон:No | Шаблон:Yes | Шаблон:Yes | Шаблон:Yes | Шаблон:Yes | Шаблон:Yes |
Firefox | Шаблон:Yes | Шаблон:Yes | Шаблон:Yes | Шаблон:Yes[14] | Шаблон:Yes[14] | Шаблон:Yes[14] |
Google Chrome | [14] | Шаблон:No | Шаблон:Yes[14] | Шаблон:Yes[14] | Шаблон:Yes[14] | Шаблон:No[14] |
Internet Explorer | Шаблон:Yes[14] | Шаблон:No | Шаблон:Yes[14] | Шаблон:Yes[14] | Шаблон:Yes[14] | Шаблон:Yes[14] |
Opera | Шаблон:Yes | Шаблон:No | Шаблон:Yes[14] | Шаблон:Yes[14] | Шаблон:Yes[14] | Шаблон:Yes[14] |
Safari | Шаблон:Yes[14] | Шаблон:Yes | Шаблон:No[14] | Шаблон:Yes[14] | Шаблон:Yes | Шаблон:No[14] |
Современные возможности
Многие современные браузеры не требуют явного указания на 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. Важно помнить, что иконка не будет показываться в браузере, если её Content-type, возвращаемый веб-сервером, не совпадёт с указанным в html-коде страницы.
Можно указать несколько изображений в разных форматах — например, строку с rel="shortcut icon"
и значком в формате ICO для Internet Explorer, и строку с rel="icon"
и значком в формате GIF или PNG для остальных браузеров.
Мобильный значок сайта
Устройства фирмы Apple начиная с iOS 1.1.3 и некоторые устройства на базе ОС Android[15] поддерживают специальные большие иконки, которые могут использоваться в качестве значков веб-приложений[16][17]. Сайт может предоставлять такую иконку, указав в заголовке <head>
<link rel="apple-touch-icon" ...>
[18]. Рекомендуемый размер иконки 60×60 пикселей для iPhone и 120×120 пикселей для iPhone с Retina дисплеем[17][19][20].
Для iPad рекомендуется иконка размером 76×76 пикселей, а для iPad с Retina дисплеем (начиная с iPad третьего поколения) — 152×152 пикселя[21]. Для планшетов на Android с браузером Chrome предпочтительной является иконка формата PNG и размера 192x192[22].
На изображение, упомянутое как apple-touch-icon
, накладывается тень, отражение, а также изображение получает скруглённые края[17]. На изображение apple-touch-icon-precomposed
не накладывается никаких эффектов[17][18].
- С закруглёнными краями, добавляемыми iOS
<link rel="apple-touch-icon" href="somepath/image.png" />
- Без отражений
<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />
Корневой каталог сайта является локацией по умолчанию для поиска иконок apple-touch-icon-precomposed.png
и apple-touch-icon.png
.[17][18]
Примечания
- ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокegressive
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокbbc7839744
не указан текст - ↑ 3,0 3,1 Ошибка цитирования Неверный тег
<ref>
; для сносокmsdn
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокhtmlhelp
не указан текст - ↑ 5,0 5,1 Ошибка цитирования Неверный тег
<ref>
; для сносокheng
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокgolive
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокsitechecker
не указан текст - ↑ 8,0 8,1 8,2 8,3 Ошибка цитирования Неверный тег
<ref>
; для сносокjeffdavis
не указан текст - ↑ 9,0 9,1 9,2 9,3 Ошибка цитирования Неверный тег
<ref>
; для сносокsielufavicon-1
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокericlaw-1
не указан текст - ↑ 11,0 11,1 11,2 Ошибка цитирования Неверный тег
<ref>
; для сносокmozilla.9.6
не указан текст - ↑ 12,0 12,1 12,2 12,3 12,4 Ошибка цитирования Неверный тег
<ref>
; для сносокopera7
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокopera-10.0
не указан текст - ↑ 14,00 14,01 14,02 14,03 14,04 14,05 14,06 14,07 14,08 14,09 14,10 14,11 14,12 14,13 14,14 14,15 14,16 14,17 14,18 14,19 14,20 Ошибка цитирования Неверный тег
<ref>
; для сносокfaviconic
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокmathiasbynens
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокiPhoneWebAppHIG
не указан текст - ↑ 17,0 17,1 17,2 17,3 17,4 Ошибка цитирования Неверный тег
<ref>
; для сносокapplewebclip
не указан текст - ↑ 18,0 18,1 18,2 Ошибка цитирования Неверный тег
<ref>
; для сносокallinthehead
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокiOS_HIG_tbl8-1
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокapple-touch-icon
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокiOS_iPad_Touch_icon
не указан текст - ↑ Ошибка цитирования Неверный тег
<ref>
; для сносокAndroid_Chrome_icon
не указан текст
- Страницы, использующие устаревший тег source
- Русская Википедия
- Страницы с неработающими файловыми ссылками
- Всемирная паутина
- Графика в Web
- Страницы, где используется шаблон "Навигационная таблица/Телепорт"
- Страницы с телепортом
- Википедия
- Статья из Википедии
- Статья из Русской Википедии
- Страницы с ошибками в примечаниях