Favicon
![](http://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Wikipedia_favicon_in_Firefox_on_KDE.png/220px-Wikipedia_favicon_in_Firefox_on_KDE.png)
Favicon (скор. від favorites icon) — іконка сайту, що зображається поряд з адресою сайту в адресному рядку, біля заголовку сторінки у вкладці або в списку закладок браузера.[1]
Традиційно використовується зображення розміром 16×16 пікселів у форматі файлу ICO, який зазвичай розташовується в корені сайту з назвою favicon.ico
.
![](http://upload.wikimedia.org/wikipedia/uk/thumb/f/f3/%D0%A4%D0%B0%D0%B2%D1%96%D0%BA%D0%BE%D0%BD_01.png/400px-%D0%A4%D0%B0%D0%B2%D1%96%D0%BA%D0%BE%D0%BD_01.png)
Рядок 1 — вікна вкладок браузера;
рядок 2 — панель закладок.
Якщо в HTML коді сторінки іконка не призначена, більшість сучасних браузерів спробують знайти її самостійно в корені сайту, запитавши файл з назвою favicon.ico
.
Щоб точно зазначити іконку сайту для сторінки, потрібно в секції head
сторінки вказати тег link
із адресою файлу, з зображенням потрібної іконки, в атрибуті href
, наприклад, таким чином:
<link rel="shortcut icon" href="/https/uk.wikipedia.org/imgs/favicon.png" type="image/png" />
Браузер | 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" />
|
Так[2] | Так[2] | Так[2] | Так[2][3] | Так[2] | Так |
<link rel="icon"
type="image/vnd.microsoft.icon"
href="http://example.com/image.ico" />
|
Так | Так | Так | Так (починаючи з IE 9)[4] | Так | Так |
<link rel="icon" type="image/x-icon" href="http://example.com/image.ico" />
|
Так[2] | Так[2] | Так[2] | Так (починаючи із IE 9)[5] | Так[2] | Так |
<link rel="icon" href="http://example.com/image.ico" />
|
Так | Так | Так | Так (починаючи із IE 11)[4] | Так | Так |
<link rel="icon" type="image/gif" href="http://example.com/image.gif" />
|
Так | Так | Так | Так (починаючи з IE 11)[4] | Так | Так |
<link rel="icon" type="image/png" href="http://example.com/image.png" />
|
Так | Так | Так | Так (починаючи з IE 11)[4] | Так | Так |
favicon.ico яка, розташована в корневій теці сайту
|
Так | Optional[6] | Так | Так | Необов'язково[7] | Так |
Пріоритет: знайдено в корені сайту або позначено на (X)HTML сторінці | На сторінці[8] | На сторінці[8] | На сторінці[8] | На сторінці[8] | ? | ? |
Якщо на сторінці присутнє посилання на іконки в обидвох форматах 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.[9]
Тільки SeaMonkey не може завантажити favicon.ico
файли, якщо вони розташовані в корневій теці сайту.[10]
- uk.wikis.wikia.com/wiki/Фавікон [Архівовано 10 березня 2016 у Wayback Machine.] — стаття на українській вікі Довідка/Фавікон чи Як самому зробити іконку сайту[11]
- ↑ Lane, Dave (9 серпня 2008). Creating a Multi-Resolution Favicon Including Transparency with the GIMP. Egressive.com. Архів оригіналу за 25 грудня 2010. Процитовано 25 лютого 2011.
- ↑ а б в г д е ж и к How to Add a Shortcut Icon to a Web Page. Microsoft Developer Network. Microsoft. Архів оригіналу за 8 лютого 2012. Процитовано 15 березня 2010.(англ.) Наведено за англійською вікіпедією.
- ↑ Davis, Jeff (27 грудня 2007). why doesn't the favicon for my site appear in IE7?. jeffdav on code. Microsoft. Архів оригіналу за 9 червня 2019. Процитовано 11 березня 2013.(англ.) Наведено за англійською вікіпедією.
- ↑ а б в г Fun with Favicons. Microsoft. 7 вересня 2013. Архів оригіналу за 26 січня 2016. Процитовано 3 листопада 2013.(англ.) Наведено за англійською вікіпедією.
- ↑ IE9 RC Minor Changes List. Microsoft. 11 лютого 2011. Архів оригіналу за 18 жовтня 2015. Процитовано 16 листопада 2013.
- ↑ Firefox only accepts
favicon.ico
in the web site's root without a<link>
tag if the settingbrowser.chrome.favicons
is set totrue
inabout:config
. The default value istrue
. If set tofalse
, these favicons are ignored. - ↑ Opera завантажує
/favicon.ico
тільки якщо встановлена опціяMultimedia/Always load favicon
черезopera:config
в значення1
. Детальніше див.Opera Support page [Архівовано 3 грудня 2007 у Wayback Machine.]. - ↑ а б в г Francis, Lewis (11 грудня 2007). Chart of modern browser support for favicon. informationgift.com. Архів оригіналу за 10 жовтня 2019. Процитовано 23 лютого 2011.(англ.) Наведено за англійською вікіпедією.
- ↑ Jonathan T. Neal (16 січня 2013). Understand the Favicon. Архів оригіналу за 23 травня 2013. Процитовано 30 травня 2013.
- ↑ Mathias Bynens (14 квітня 2010). rel="shortcut icon" considered harmful. Архів оригіналу за 7 квітня 2019. Процитовано 15 листопада 2011.
- ↑ На прикладі онлайн-генераторів для створення фавіконів, таких як favicon.cc favicon.by favicon.ru, тощо