Favicon

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до навігації Перейти до пошуку
Favicon Вікіпедії

Favicon (скор. від favorites icon) — іконка сайту, що зображається поряд з адресою сайту в адресному рядку, біля заголовку сторінки у вкладці або в списку закладок браузера.

Традиційно використовується зображення розміром 16×16 пікселів у форматі файлу ICO, який зазвичай розташовується в корені сайту з назвою favicon.ico.

Позначення іконки сайту на сторінці[ред. | ред. код]

Іконка сайту у вікні браузера Хром від Ґуґл.
Рядок 1 — вікна вкладок браузера;
рядок 2 — панель закладок.

Якщо в HTML коді сторінки іконка не призначена, більшість сучасних браузерів спробують знайти її самостійно в корені сайту, запитавши файл з назвою favicon.ico.

Щоб точно зазначити іконку сайту для сторінки, потрібно в секції head сторінки вказати тег link із адресою файла, з зображенням потрібної іконки, в атрибуті href, наприклад, таким чином: 

<link rel="shortcut icon" href="/imgs/favicon.png" type="image/png" />


Таблиця підтримки форматів зображень для Favicon[ред. | ред. код]

Браузер ICO PNG GIF Анімований GIF JPEG APNG SVG
Google Chrome Так 4.0 4.0 Ні 4.0 Ні Ні
Internet Explorer 4.0 Ні Ні Ні Ні Ні Ні
Mozilla Firefox Так Так Так Так Так 3.0 Ні
Opera Так Так Так Так Так Так 9.6
Safari Так 4.0 4.0 Ні 4.0 Ні Ні


Використання[ред. | ред. код]

В таблиці наведено різні способи як вказати різним типам браузерів використовувати значок сайту.

Edge Firefox Google Chrome Internet Explorer Opera Safari 
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
Так[1] Так[1] Так[1] Так[1][2] Так[1] Так 
<link rel="icon"
 type="image/vnd.microsoft.icon"
 href="http://example.com/image.ico" />
Так Так Так Так (починаючи з IE 9)[3] Так Так 
<link rel="icon" type="image/x-icon" href="http://example.com/image.ico" />
Так[1] Так[1] Так[1] Так (починаючи із IE 9)[4] Так[1] Так 
<link rel="icon" href="http://example.com/image.ico" />
Так Так Так Так (починаючи із IE 11)[3] Так Так 
<link rel="icon" type="image/gif" href="http://example.com/image.gif" />
Так Так Так Так (починаючи з IE 11)[3] Так Так 
<link rel="icon" type="image/png" href="http://example.com/image.png" />
Так Так Так Так (починаючи з IE 11)[3] Так Так
favicon.ico яка, розташована в корневій теці сайту Так Optional[5] Так Так Необов'язково[6] Так
Пріоритет: знайдено в корені сайту або позначено на (X)HTML сторінці На сторінці[7] На сторінці[7] На сторінці[7] На сторінці[7] ? ?

Якщо на сторінці присутнє посилання на іконки в обидвох форматах PNG та ICO, то браузери оберуть найбільш повний, виходячи із поточної роздільної здатності екрану пристрою.

Firefox та Safari покажуть ту іконку, яка була вказана найостаннішою.

Chrome для Mac покаже насамперед іконку в ICO форматі, якщо не знайде то в форматі 32×32.

Chrome for Windows will use the favicon that comes first if it is 16×16, otherwise the ICO. If none of the aforementioned options are available, both Chromes will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16×16 favicon and use the 32×32 version, only to scale it back down to 16×16 on non-retina devices. Opera will choose from any of the available icons completely at random.[8]

Тільки SeaMonkey не може завантажити favicon.ico файли, якщо вони розташовані в корневій теці сайту.[9]


Посилання[ред. | ред. код]

Примітки[ред. | ред. код]

  1. ↑ а б в г д е ж и к How to Add a Shortcut Icon to a Web Page. Microsoft Developer Network. Microsoft. Процитовано 15 March 2010. (англ.) Наведено за англійською вікіпедією.
  2. ↑ Davis, Jeff (27 December 2007). why doesn't the favicon for my site appear in IE7?. jeffdav on code. Microsoft. Процитовано 11 March 2013. (англ.) Наведено за англійською вікіпедією.
  3. ↑ а б в г Fun with Favicons. Microsoft. 7 September 2013. Процитовано 3 November 2013. (англ.) Наведено за англійською вікіпедією.
  4. ↑ IE9 RC Minor Changes List. Microsoft. 11 February 2011. Процитовано 16 November 2013. 
  5. ↑ Firefox only accepts favicon.ico in the web site's root without a <link> tag if the setting browser.chrome.favicons is set to true in about:config. The default value is true. If set to false, these favicons are ignored.
  6. ↑ Opera завантажує /favicon.ico тільки якщо встановлена опція Multimedia/Always load favicon через opera:config в значення 1. Детальніше див.Opera Support page.
  7. ↑ а б в г Francis, Lewis (11 December 2007). Chart of modern browser support for favicon. informationgift.com. Процитовано 23 February 2011. (англ.) Наведено за англійською вікіпедією.
  8. ↑ Jonathan T. Neal (16 January 2013). Understand the Favicon. Архів оригіналу за 23 травень 2013. Процитовано 30 May 2013. 
  9. ↑ Mathias Bynens (14 April 2010). rel="shortcut icon" considered harmful. Процитовано 15 November 2011. 
  10. ↑ На прикладі онлайн-генераторів для створення фавіконів, таких як favicon.cc favicon.by favicon.ru, тощо
Отримано з https://uk.wikipedia.org/w/index.php?title=Favicon&oldid=27998021