Favicon
В этой статье или разделе имеется список источников или внешних ссылок, но источники отдельных утверждений остаются неясными из-за отсутствия сносок. |
Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico, — тогда Microsoft Internet Explorer использовал их для закладок. До версии 7.0 MSIE использовал значки только для закладок, и поэтому администраторы серверов могли узнать, сколько пользователей создало закладку на их сайт[1]. Намного позже появились в формате 32×32, но старые браузеры все еще уменьшают его до 16×16.[2][3]
История развития[править | править код]
В марте 1999 года Microsoft выпустила браузер Internet Explorer 5, который первым стал поддерживать значки для сайта.[1] Изначально этим значком был файл с именем favicon.ico
, помещённый в корневой каталог (например, http://en.wikipedia.org/favicon.ico) веб-сайта. Значок используется браузером Internet Explorer в списке избранного и рядом с URL в адресной строке, если страница находится в закладках.[4][5][6][1] Побочным эффектом было то, что количество посетителей, которые добавили страницу в закладки, можно было оценить по количеству обращений к файлу значка. Эта техника устарела, так как все современные браузеры поддерживают значок без закладок.[5]
Поддержка браузерами[править | править код]
Следующая таблица иллюстрирует основные веб-браузеры, поддерживающие различные функции. Номера указывают начальную версию браузера, с которой осуществляется поддержка указанной функции.
Поддерживаемые форматы иконки сайта[править | править код]
Данная таблица показывает поддержку форматов, в которых может быть выполнен значок сайта (favicon).
Браузер | ICO | PNG | GIF | Анимированный GIF | JPEG | APNG | SVG |
---|---|---|---|---|---|---|---|
Google Chrome | Да | 4.0 | 4.0 | Нет | 4.0 | Нет | Нет |
Internet Explorer | 5.0[7] | 11.0[8] | 11.0[9] | Нет[7] | Да[8] | Нет[7] | Нет[7] |
Firefox | 1.0[10] | 1.0[10] | 1.0[10] | Да | Да | 3.0 | Да[8] |
Opera | 7.0[11] | 7.0[11] | 7.0[11] | 7.0[11] | 7.0[11] | 9.5 | Нет[8] |
Safari | Да | 4.0 | 4.0 | Нет | 4.0 | Нет | Нет |
Современные возможности[править | править код]
Многие современные браузеры не требуют явного указания на favicon.ico
в коде страницы. В случае отсутствия такого указания браузер пытается загрузить favicon.ico
из корня сайта. Однако имеется возможность явно указать положение значка в (X)HTML-коде (внутри элемента <head>
), что позволяет при условии отсутствия /favicon.ico
использовать для каждой страницы свой значок.
Для явного указания местоположения favicon.ico
необходимо вписать следующую строку в код страницы вашего сайта внутрь секции head:
<link rel="icon" type="image/png" href="/someimage.png" />
где
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. Правильный тип image/vnd.microsoft.icon
поддерживается всеми браузерами[источник не указан 3775 дней]. Важно помнить, что иконка не будет показываться в браузере, если её Content-type, возвращаемый веб-сервером, не совпадёт с указанным в html-коде страницы.
Можно указать несколько изображений в разных форматах — например, строку с rel="shortcut icon"
и значком в формате ICO для Internet Explorer, и строку с rel="icon"
и значком в формате GIF или PNG для остальных браузеров.
Мобильный значок сайта[править | править код]
Устройства фирмы Apple начиная с iOS 1.1.3 и некоторые устройства на базе ОС Android[12]
поддерживают специальные большие иконки, которые могут использоваться в качестве значков веб-приложений.[13][14]
Сайт может предоставлять такую иконку, указав в заголовке <head>
<link rel="apple-touch-icon" ...>
.[15]
Рекомендуемый размер иконки 60×60 пикселей для iPhone и 120×120 пикселей для iPhone с Retina дисплеем.[14][16][17]
Для iPad рекомендуется иконка размером 76×76 пикселей, а для iPad с Retina дисплеем (начиная с iPad третьего поколения) - 152×152 пикселя.[18] Для планшетов на Android с браузером Chrome предпочтительной является иконка формата PNG и размера 192x192.[19]
На изображение, упомянутое как apple-touch-icon
, накладывается тень, отражение, а также изображение получает скруглённые края.[14] На изображение apple-touch-icon-precomposed
не накладывается никаких эффектов.[14][15]
- С закруглёнными краями, добавляемыми 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
.[14][15]
Примечания[править | править код]
- ↑ 1 2 3 How to Add a Shortcut Icon to a Web Page (недоступная ссылка). Microsoft Developer Network. Microsoft. Дата обращения: 15 марта 2010. Архивировано 8 февраля 2012 года.
- ↑ What Is a Favicon and Why Is It So Important for Branding? . Дата обращения: 8 декабря 2018.
- ↑ Как создать фавикон для сайта. Пошаговая инструкция от А до Я (неопр.). Блог о создании лого и дизайне | Logaster (21 августа 2015). Дата обращения: 3 мая 2019.
- ↑ McGrew, Darin Web Authoring FAQ - 8.11. How can I have a custom icon when people bookmark my site? (недоступная ссылка). Web Design Group (26 April 2007). Дата обращения: 23 февраля 2011. Архивировано 8 февраля 2012 года.
- ↑ 1 2 Heng, Christopher What is Favicon.ico? Personalise Your Site's Bookmarks (недоступная ссылка). thesitewizard.com (7 September 2008). Дата обращения: 23 февраля 2011. Архивировано 8 февраля 2012 года.
- ↑ Creating favicons with Adobe Photoshop and GoLive (недоступная ссылка). Adobe GoLive. Дата обращения: 25 февраля 2011. Архивировано 7 декабря 2003 года.
- ↑ 1 2 3 4 Davis, Jeff why doesn't the favicon for my site appear in IE7? (недоступная ссылка). jeff's WebLog at Microsoft Developer Network. Microsoft (1 March 2007). Дата обращения: 27 февраля 2011. Архивировано 8 февраля 2012 года.
- ↑ 1 2 3 4 Что такое Favicon и как установить . Sielu (18 March 2019). Дата обращения: 18 марта 2019.
- ↑ Fun with Favicons . Microsoft (7 September 2013). Дата обращения: 3 ноября 2013.
- ↑ 1 2 3 David. Mozilla 0.9.6 Release Notes (недоступная ссылка). Mozilla (19 July 2003). Дата обращения: 23 февраля 2011. Архивировано 8 февраля 2012 года.
- ↑ 1 2 3 4 5 Opera 7 for Windows Changelog (недоступная ссылка). Opera Software (28 January 2003). Дата обращения: 28 февраля 2011. Архивировано 8 февраля 2012 года.
- ↑ Mathias Bynens. Everything you always wanted to know about touch icons (2 March 2011). Дата обращения: 15 ноября 2011.
- ↑ iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips . Apple Inc.. Дата обращения: 27 мая 2010.
- ↑ 1 2 3 4 5 Safari Web Content Guide: Specifying a Webpage Icon for Web Clip . Apple Inc. (15 November 2010). Дата обращения: 25 февраля 2011.
- ↑ 1 2 3 McLellan, Drew How To Set an Apple Touch Icon for Any Site . Allinthe head.com (17 January 2008). Дата обращения: 11 марта 2011.
- ↑ iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines, Table 8-1 . Apple Inc.. Дата обращения: 16 июля 2011.
- ↑ Apple-touch-icon . Apple Inc.. Дата обращения: 25 февраля 2011.
- ↑ iPad Apple Touch Icon . Дата обращения: 12 февраля 2012.
- ↑ Android Chrome and its favicon . Дата обращения: 9 сентября 2014.
Для улучшения этой статьи желательно: |