Favicon (скор. від favorites icon) — іконка сайту, що зображається поряд з адресою сайту в адресному рядку, біля заголовку сторінки у вкладці або в списку закладок браузера.
Традиційно використовується зображення розміром 16×16 пікселів у форматі файлу ICO, який зазвичай розташовується в корені сайту з назвою favicon.ico
.
Позначення іконки сайту на сторінці
Якщо в 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" /> | Так | Так | Так | Так | Так | Так |
<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico" /> | Так | Так | Так | Так (починаючи з IE 9) | Так | Так |
<link rel="icon" type="image/x-icon" href="http://example.com/image.ico" /> | Так | Так | Так | Так (починаючи із IE 9) | Так | Так |
<link rel="icon" href="http://example.com/image.ico" /> | Так | Так | Так | Так (починаючи із IE 11) | Так | Так |
<link rel="icon" type="image/gif" href="http://example.com/image.gif" /> | Так | Так | Так | Так (починаючи з IE 11) | Так | Так |
<link rel="icon" type="image/png" href="http://example.com/image.png" /> | Так | Так | Так | Так (починаючи з IE 11) | Так | Так |
favicon.ico яка, розташована в корневій теці сайту | Так | Optional | Так | Так | Необов'язково | Так |
Пріоритет: знайдено в корені сайту або позначено на (X)HTML сторінці | На сторінці | На сторінці | На сторінці | На сторінці | ? | ? |
Якщо на сторінці присутнє посилання на іконки в обидвох форматах 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.
Тільки SeaMonkey не може завантажити favicon.ico
файли, якщо вони розташовані в корневій теці сайту.
Посилання
- uk.wikis.wikia.com/wiki/Фавікон [ 10 березня 2016 у Wayback Machine.] — стаття на українській вікі Довідка/Фавікон чи Як самому зробити іконку сайту
Примітки
- Lane, Dave (9 серпня 2008). . 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). . jeffdav on code. Microsoft. Архів оригіналу за 9 червня 2019. Процитовано 11 березня 2013.(англ.) Наведено за англійською вікіпедією.
- . Microsoft. 7 вересня 2013. Архів оригіналу за 26 січня 2016. Процитовано 3 листопада 2013.(англ.) Наведено за англійською вікіпедією.
- . 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). . informationgift.com. Архів оригіналу за 10 жовтня 2019. Процитовано 23 лютого 2011.(англ.) Наведено за англійською вікіпедією.
- (16 січня 2013). . Архів оригіналу за 23 травня 2013. Процитовано 30 травня 2013.
- (14 квітня 2010). . Архів оригіналу за 7 квітня 2019. Процитовано 15 листопада 2011.
- На прикладі онлайн-генераторів для створення фавіконів, таких як favicon.cc favicon.by favicon.ru, тощо
Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет
Favicon skor vid favorites icon ikonka sajtu sho zobrazhayetsya poryad z adresoyu sajtu v adresnomu ryadku bilya zagolovku storinki u vkladci abo v spisku zakladok brauzera Favicon Vikipediyi Tradicijno vikoristovuyetsya zobrazhennya rozmirom 16 16 pikseliv u formati fajlu ICO yakij zazvichaj roztashovuyetsya v koreni sajtu z nazvoyu favicon ico Poznachennya ikonki sajtu na storinciIkonka sajtu u vikni brauzera Hrom vid Gugl Ryadok 1 vikna vkladok brauzera ryadok 2 panel zakladok Yaksho v HTML kodi storinki ikonka ne priznachena bilshist suchasnih brauzeriv sprobuyut znajti yiyi samostijno v koreni sajtu zapitavshi fajl z nazvoyu favicon ico Shob tochno zaznachiti ikonku sajtu dlya storinki potribno v sekciyi head storinki vkazati teg link iz adresoyu fajlu z zobrazhennyam potribnoyi ikonki v atributi href napriklad takim chinom lt link rel shortcut icon href imgs favicon png type image png gt Tablicya pidtrimki formativ zobrazhen dlya FaviconBrauzer ICO PNG GIF Animovanij GIF JPEG APNG SVG Google Chrome Tak 4 0 4 0 Ni 4 0 Ni Ni Internet Explorer 4 0 Ni Ni Ni Ni Ni Ni Mozilla Firefox Tak Tak Tak Tak Tak 3 0 Ni Opera Tak Tak Tak Tak Tak Tak 9 6 Safari Tak 4 0 4 0 Ni 4 0 Ni NiVikoristannyaV tablici navedeno rizni sposobi yak vkazati riznim tipam brauzeriv vikoristovuvati znachok sajtu Edge Firefox Google Chrome Internet Explorer Opera Safari lt link rel shortcut icon href http example com myicon ico gt Tak Tak Tak Tak Tak Tak lt link rel icon type image vnd microsoft icon href http example com image ico gt Tak Tak Tak Tak pochinayuchi z IE 9 Tak Tak lt link rel icon type image x icon href http example com image ico gt Tak Tak Tak Tak pochinayuchi iz IE 9 Tak Tak lt link rel icon href http example com image ico gt Tak Tak Tak Tak pochinayuchi iz IE 11 Tak Tak lt link rel icon type image gif href http example com image gif gt Tak Tak Tak Tak pochinayuchi z IE 11 Tak Tak lt link rel icon type image png href http example com image png gt Tak Tak Tak Tak pochinayuchi z IE 11 Tak Tak favicon ico yaka roztashovana v kornevij teci sajtu Tak Optional Tak Tak Neobov yazkovo Tak Prioritet znajdeno v koreni sajtu abo poznacheno na X HTML storinci Na storinci Na storinci Na storinci Na storinci Yaksho na storinci prisutnye posilannya na ikonki v obidvoh formatah PNG ta ICO to brauzeri oberut najbilsh povnij vihodyachi iz potochnoyi rozdilnoyi zdatnosti ekranu pristroyu Firefox ta Safari pokazhut tu ikonku yaka bula vkazana najostannishoyu Chrome dlya Mac pokazhe nasampered ikonku v ICO formati yaksho ne znajde to v formati 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 Tilki SeaMonkey ne mozhe zavantazhiti favicon ico fajli yaksho voni roztashovani v kornevij teci sajtu Posilannyauk wikis wikia com wiki Favikon 10 bereznya 2016 u Wayback Machine stattya na ukrayinskij viki Dovidka Favikon chi Yak samomu zrobiti ikonku sajtuPrimitkiLane Dave 9 serpnya 2008 Egressive com Arhiv originalu za 25 grudnya 2010 Procitovano 25 lyutogo 2011 How to Add a Shortcut Icon to a Web Page Microsoft Developer Network Microsoft Arhiv originalu za 8 lyutogo 2012 Procitovano 15 bereznya 2010 angl Navedeno za anglijskoyu vikipediyeyu Davis Jeff 27 grudnya 2007 jeffdav on code Microsoft Arhiv originalu za 9 chervnya 2019 Procitovano 11 bereznya 2013 angl Navedeno za anglijskoyu vikipediyeyu Microsoft 7 veresnya 2013 Arhiv originalu za 26 sichnya 2016 Procitovano 3 listopada 2013 angl Navedeno za anglijskoyu vikipediyeyu Microsoft 11 lyutogo 2011 Arhiv originalu za 18 zhovtnya 2015 Procitovano 16 listopada 2013 Firefox only accepts favicon ico in the web site s root without a lt link gt 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 Opera zavantazhuye favicon ico tilki yaksho vstanovlena opciya Multimedia Always load favicon cherez opera config v znachennya 1 Detalnishe div Opera Support page 3 grudnya 2007 u Wayback Machine Francis Lewis 11 grudnya 2007 informationgift com Arhiv originalu za 10 zhovtnya 2019 Procitovano 23 lyutogo 2011 angl Navedeno za anglijskoyu vikipediyeyu 16 sichnya 2013 Arhiv originalu za 23 travnya 2013 Procitovano 30 travnya 2013 14 kvitnya 2010 Arhiv originalu za 7 kvitnya 2019 Procitovano 15 listopada 2011 Na prikladi onlajn generatoriv dlya stvorennya favikoniv takih yak favicon cc favicon by favicon ru tosho