Русская Википедия:Favicon

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску

Файл:Wikipedia favicon in Firefox on KDE.png
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).

Браузер ICO PNG GIF Анимированный GIF JPEG APNG SVG
Google Chrome Шаблон:Yes Шаблон:Yes Шаблон:Yes Шаблон:No Шаблон:Yes Шаблон:No Шаблон:No
Internet Explorer Шаблон:Yes[8] Шаблон:Yes[9] Шаблон:Yes[10] Шаблон:No[8] Шаблон:Yes[9] Шаблон:No[8] Шаблон:No[8]
Firefox Шаблон:Yes[11] Шаблон:Yes[11] Шаблон:Yes[11] Шаблон:Yes Шаблон:Yes Шаблон:Yes Шаблон:Yes[9]
Opera Шаблон:Yes[12] Шаблон:Yes[12] Шаблон:Yes[12] Шаблон:Yes[12] Шаблон:Yes[12] Шаблон:Yes Шаблон:No[9]
Safari Шаблон:Yes Шаблон:Yes Шаблон:Yes Шаблон:No Шаблон:Yes Шаблон:No Шаблон:No

Использование

Таблица соответствия, какой браузер где использует 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]

Примечания

Шаблон:Примечания

Партнерские ресурсы
Криптовалюты
Магазины
Хостинг
Разное

  1. ↑ Ошибка цитирования Неверный тег <ref>; для сносок egressive не указан текст
  2. ↑ Ошибка цитирования Неверный тег <ref>; для сносок bbc7839744 не указан текст
  3. ↑ 3,0 3,1 Ошибка цитирования Неверный тег <ref>; для сносок msdn не указан текст
  4. ↑ Ошибка цитирования Неверный тег <ref>; для сносок htmlhelp не указан текст
  5. ↑ 5,0 5,1 Ошибка цитирования Неверный тег <ref>; для сносок heng не указан текст
  6. ↑ Ошибка цитирования Неверный тег <ref>; для сносок golive не указан текст
  7. ↑ Ошибка цитирования Неверный тег <ref>; для сносок sitechecker не указан текст
  8. ↑ 8,0 8,1 8,2 8,3 Ошибка цитирования Неверный тег <ref>; для сносок jeffdavis не указан текст
  9. ↑ 9,0 9,1 9,2 9,3 Ошибка цитирования Неверный тег <ref>; для сносок sielufavicon-1 не указан текст
  10. ↑ Ошибка цитирования Неверный тег <ref>; для сносок ericlaw-1 не указан текст
  11. ↑ 11,0 11,1 11,2 Ошибка цитирования Неверный тег <ref>; для сносок mozilla.9.6 не указан текст
  12. ↑ 12,0 12,1 12,2 12,3 12,4 Ошибка цитирования Неверный тег <ref>; для сносок opera7 не указан текст
  13. ↑ Ошибка цитирования Неверный тег <ref>; для сносок opera-10.0 не указан текст
  14. ↑ 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 не указан текст
  15. ↑ Ошибка цитирования Неверный тег <ref>; для сносок mathiasbynens не указан текст
  16. ↑ Ошибка цитирования Неверный тег <ref>; для сносок iPhoneWebAppHIG не указан текст
  17. ↑ 17,0 17,1 17,2 17,3 17,4 Ошибка цитирования Неверный тег <ref>; для сносок applewebclip не указан текст
  18. ↑ 18,0 18,1 18,2 Ошибка цитирования Неверный тег <ref>; для сносок allinthehead не указан текст
  19. ↑ Ошибка цитирования Неверный тег <ref>; для сносок iOS_HIG_tbl8-1 не указан текст
  20. ↑ Ошибка цитирования Неверный тег <ref>; для сносок apple-touch-icon не указан текст
  21. ↑ Ошибка цитирования Неверный тег <ref>; для сносок iOS_iPad_Touch_icon не указан текст
  22. ↑ Ошибка цитирования Неверный тег <ref>; для сносок Android_Chrome_icon не указан текст
Источник — http://wikihandbk.com/ruwiki/index.php?title=Русская_Википедия:Favicon&oldid=8650455