Favicon
Favicon (անգլ.՝ FAVorite ICON — «ընտրյալ պատկեր»), վեբ կայքի կամ էջի գրաֆիկական պատկեր։ Ցուցադրվում է դիտարկիչի էջանիշների անվանումից առաջ, ինչպես նաև պահպանված էջանիշների շարքում։
Սովորաբար օգտագործվում է 16x16 փիքսել չափով պատկեր՝ favicon.ico անվանմամբ։
Զարգացման պատմություն
[խմբագրել | խմբագրել կոդը]1999 թվականի մարտին Մայքրոսոֆթը թողարկեց Internet Explorer 5 դիտարկիչը, որն առաջին անգամ օգտագործեց պատկերները որպես կայքի էջանիշ[1]։ Սկզբնապես այդ պատկերը favicon.ico
անվանումով ֆայլ էր, որը տեղադրված էր կայքի հիմնային թղթապանակում (root folser) (Օրինակ՝ http://en.wikipedia.org/favicon.ico)[2][3][4][1][3]։
Աջակցող դիտարկիչներ
[խմբագրել | խմբագրել կոդը]Հետևյալ աղյուսակը ցուցադրում է հիմնական վեբ դիտարկիչները, որոնք աջակցում են Favicon֊ի տարբեր տիպեր և ֆունկցիաներ։ Թիվը ցույց է տալիս դիտարկիչի տարբերակը, որից սկսած այն աջակցում է տվյալ ֆունկցիան։
Favicon աջակցող դիտարկիչներ
[խմբագրել | խմբագրել կոդը]Դիտարկիչ | ICO | PNG | GIF | Անիմացիոն GIF | JPEG | APNG | SVG |
---|---|---|---|---|---|---|---|
Google Chrome | Այո | 4.0 | 4.0 | Ոչ | 4.0 | Ոչ | Ոչ |
Internet Explorer | 5.0[5] | 11.0[6] | 11.0[6] | Ոչ[5] | Ոչ[5] | Ոչ[5] | Ոչ[5] |
Firefox | 1.0[7] | 1.0[7] | 1.0[7] | Այո | Այո | 3.0 | Ոչ[8] |
Opera | 7.0[9] | 7.0[9] | 7.0[9] | 7.0[9] | 7.0[9] | 9.5 | 9.6Ոչ |
Safari | Այո | 4.0 | 4.0 | Ոչ | 4.0 | Ոչ | Ոչ |
Ժամանակակից հնարավորություններ
[խմբագրել | խմբագրել կոդը]Ժամանակակից շատ դիտարկիչների դեպքում անհրաժեշտ չէ էջին ավելացնել favicon.ico
կոդը։ Նման հրահանգի բացակայության դեպքում դիտարկիչը փորձում է favicon.ico
ֆայլը բեռնել կայքի հիմնային թղթապանակից։ Սակայն հնարավորություն կա կայքի <head>
թեգերի մեջ հատուկ հրահանգով ցույց տալ /favicon.ico
-ի հասցեն։
favicon.ico
պատկերի հասցեն տալու օրինակ․
<link rel="icon" type="image/png" href="/someimage.png" />
որտեղ
rel
-ը կարող է պարունակել «shortcut icon» պարամետրը։href
-ը պարունակում է ֆայլի բացարձակ կամ հարաբերական հասցեն։- Ֆայլի ֆորմատը կարող է լինել
png
կամgif
, իսկ չափսը 16x16 կամ 32x32 փիքսել, 8 կամ 24 բիթային գույներով։
Այս դեպքում type
-ը պետք է պարունակի MIME ֆորմատ (օրինակ՝ PNG-ի համար image/png
)։
2003 թվականին Սեյմոն Բատչերը Internet Assigned Numbers Authority-ում (IANA) գրանցեց ICO ֆորմատը։
Եթե Internet Explorer-ի համար օգտագործվում է ICO տիպը, ապա դրա MIM տիպը պետք է լինի image/vnd.microsoft.icon
։ image/x-icon
-ը հնացավ 2003 թվականին՝ ICO-ի տիպերի ստանդարտացումից հետո։ image/vnd.microsoft.icon
տիպն աջակցում են բոլոր դիտարկիչները։
Ինչպես օգտագործել
[խմբագրել | խմբագրել կոդը]Edge | Firefox | Google Chrome | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|---|
<link rel="shortcut icon"
href="http://example.com/myicon.ico" />
|
Այո[1] | Այո[1] | Այո[1] | Այո[1][5] | Այո[1] | Այո |
<link rel="icon"
type="image/vnd.microsoft.icon"
href="http://example.com/image.ico" />
|
Այո | Այո | Այո | Այո (IE 9 տարբերակից սկսած)[6] | Այո | Այո |
<link rel="icon" type="image/x-icon"
href="http://example.com/image.ico" />
|
Այո[1] | Այո[1] | Այո[1] | Այո (IE 9 տարբերակից սկսած)[10] | Այո[1] | Այո |
<link rel="icon"
href="http://example.com/image.ico" />
|
Այո | Այո | Այո | Այո (IE 11 տարբերակից սկսած)[6] | Այո | Այո |
<link rel="icon" type="image/gif"
href="http://example.com/image.gif" />
|
Այո | Այո | Այո | Այո (IE 11 տարբերակից սկսած)[6] | Այո | Այո |
<link rel="icon" type="image/png"
href="http://example.com/image.png" />
|
Այո | Այո | Այո | Այո (IE 11 տարբերակից սկսած)[6] | Այո | Այո |
favicon.ico գտնում է կայքի հիմնային թղթապանակում
|
Այո | Optional[11] | Այո | Այո | Optional[12] | Այո |
նախըտրելի է հիմնային (root) կամ (X)HTML հղվող տարբերակը | linked | linked | linked | linked | ? | ? |
Favicon-ը կայքերի մոբայլ տարբերակում
[խմբագրել | խմբագրել կոդը]Apple ընկերություն սարքավորումները՝ սկսած iOS 1.1.3 տարբերակից և Անդրոիդ հիմքով որոշ սարքավորումներ[13] աջակցում են էջանիշի պատկերներ, որոնք օգտագործվում են վեբ ծրագրերում[14][15]։
Ցանկալի չափսերը 60×60 փիքսել են iPhone-ի համար, իսկ Retina էկրանով iPhone-ի դեպքում՝ 120×120 փիքսել[15][16][17]։
iPad֊ի դեպքում Favicon֊ի ցանկալի չափսը 76×76 փիքսել է, իսկ iPad֊ի երրորդ սերնդից սկսած Retina էկրանների դեպքում՝ 152×152 փիքսել[18]։
Անդրոիդով թաբլետների դեպքում (Chrome բրաուզերով) նախընտրելի է PNG ֆորմատը՝ 192x192 փիքսել չափով[19]։
Ծանոթագրություններ
[խմբագրել | խմբագրել կոդը]- ↑ 1,00 1,01 1,02 1,03 1,04 1,05 1,06 1,07 1,08 1,09 1,10 «How to Add a Shortcut Icon to a Web Page». Microsoft Developer Network. Microsoft. Արխիվացված օրիգինալից 2012 թ․ փետրվարի 8-ին. Վերցված է 2010 թ․ մարտի 15-ին.
- ↑ McGrew, Darin (2007 թ․ ապրիլի 26). «Web Authoring FAQ - 8.11. How can I have a custom icon when people bookmark my site?». Web Design Group. Արխիվացված է օրիգինալից 2012 թ․ փետրվարի 8-ին. Վերցված է 2011 թ․ փետրվարի 23-ին.
- ↑ 3,0 3,1 Heng, Christopher (2008 թ․ սեպտեմբերի 7). «What is Favicon.ico? Personalise Your Site's Bookmarks». thesitewizard.com. Արխիվացված է օրիգինալից 2012 թ․ փետրվարի 8-ին. Վերցված է 2011 թ․ փետրվարի 23-ին.
- ↑ «Creating favicons with Adobe Photoshop and GoLive». Adobe GoLive. Արխիվացված է օրիգինալից 2003 թ․ դեկտեմբերի 7-ին. Վերցված է 2011 թ․ փետրվարի 25-ին.
- ↑ 5,0 5,1 5,2 5,3 5,4 5,5 Davis, Jeff (2007 թ․ մարտի 1). «why doesn't the favicon for my site appear in IE7?». jeff's WebLog at Microsoft Developer Network. Microsoft. Արխիվացված օրիգինալից 2012 թ․ փետրվարի 8-ին. Վերցված է 2011 թ․ փետրվարի 27-ին.
- ↑ 6,0 6,1 6,2 6,3 6,4 6,5 «Fun with Favicons». Microsoft. 2013 թ․ սեպտեմբերի 7. Վերցված է 2013 թ․ նոյեմբերի 3-ին.
- ↑ 7,0 7,1 7,2 David (2003 թ․ հուլիսի 19). «Mozilla 0.9.6 Release Notes». Mozilla. Արխիվացված է օրիգինալից 2012 թ․ փետրվարի 8-ին. Վերցված է 2011 թ․ փետրվարի 23-ին.
- ↑ Works only on first load of the page.
Daniel Holbert (2011 թ․ ապրիլի 14). «Bug 366324 – SVG site icons (favicons, shortcut icons) support — comment 22». Bugzilla@Mozilla. Mozilla. Վերցված է 2011 թ․ փետրվարի 23-ին. - ↑ 9,0 9,1 9,2 9,3 9,4 «Opera 7 for Windows Changelog». Opera Software. հունվարի 28, 2003. Արխիվացված է օրիգինալից 2012 թ․ փետրվարի 8-ին. Վերցված է 2011 թ․ փետրվարի 28-ին.
- ↑ «IE9 RC Minor Changes List». Microsoft. 2011 թ․ փետրվարի 11. Վերցված է 2013 թ․ նոյեմբերի 16-ին.
- ↑ 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 loads
/favicon.ico
only ifMultimedia/Always load favicon
option inopera:config
is set to1
. See Opera Support page for more details. - ↑ Mathias Bynens (2011 թ․ մարտի 2). «Everything you always wanted to know about touch icons». Վերցված է 2011 թ․ նոյեմբերի 15-ին.
- ↑ «iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips». Apple Inc. Արխիվացված է օրիգինալից 2010 թ․ հունիսի 4-ին. Վերցված է 2010 թ․ մայիսի 27-ին.
- ↑ 15,0 15,1 «Safari Web Content Guide: Specifying a Webpage Icon for Web Clip». Apple Inc. 2010 թ․ նոյեմբերի 15. Վերցված է 2011 թ․ փետրվարի 25-ին.
- ↑ «iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines, Table 8-1». Apple Inc. Վերցված է 2011 թ․ հուլիսի 16-ին.
- ↑ «Apple-touch-icon». Apple Inc. Վերցված է 2011 թ․ փետրվարի 25-ին.
- ↑ «iPad Apple Touch Icon». Վերցված է 2012 թ․ փետրվարի 12-ին.
- ↑ «Android Chrome and its favicon». Վերցված է 2014 թ․ սեպտեմբերի 9-ին.