Favikon

Из Википедије, слободне енциклопедије

Favikon, poznat i kao ikonica prečice, ikonica web sajta, ikonica kartice ili ikonica obeleživača je datoteka, povezana sa određenim web sajtom ili web stranicom koja sadrži jednu ili više ikonica koje su najčešće veličine 16x16 piksela. Web dizajner može da kreira takvu ikonicu i da je instalira na web sajt (ili na web stranicu) na nekoliko načina i onda je grafički internet pregledači mogu koristiti. Pregledači koji podržavaju prikazivanje favikona ga obično prikazuju u adresnom polju ( ponekad i u istoriji i pored imena stranice u listi obelezivača). Pregledači koji podržavaju interfejs sa karticama obično prikazuju favikon stranice pored naslova stranice na kartici.

Istorija[уреди]

U martu 1999. Majkrosoft je objavio Internet Explorer 5 koji je bio prvi pregledač koji podržava favikon. Prvobitno, favikon je bio datoteka poznata pod nazivom favicon.ico koja je bila smeštena u korenskom direktorijumu (npr., http://en.wikipedia.org/favicon.ico) web sajta. Korišćeni su u obeleživačima Internet Explorera pored URL adrese stranice ako je obeležena. Sporedni efekat bio je taj da je broj posetioca koji su obeležili stranicu bio procenjivan zahtevima za favikonom, tj. svaki put kad bi neko obeležio stranicu, podneo bi zahtev za favikonom. Ovaj sporedni efekat više ne radi, a svi moderni pretraživači podržavaju favikon bez obeležavanja.

Wikipedijin favikon, prikazan u starijoj verziji Firefox pretraživača (iz 2008).


Standardizacija[уреди]

Favikon je standardizovao World Wide Web Consortium (W3C) u HTML 4.01 preporuci, objavljenoj u decembru 1999. a kasnije u XHTML 1.0 preporuci, objavljenoj 2000. 2003. IANA je registrovala .ico format pod MIMA tipom/image/vnd.microsoft.icon. [1] Ironično, Internet Explorer ne moze da otvori slike koje su u .ico formatu. Zaobilazenje ovog problema {Internet Explorera} je pridruzivanje .ico sa nestandardnim image/x-icon MIME tipom na web serverima.[2]

Popularni <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> teoretski identifikuje dva odnosa, "shortcut" i "icon", ali "shortcut" nije registrovan i suvišan je. 2011. HTML living standard je precizirao da iz istorijskih razloga "shortcut" bude neposredno ispred "icon"; ipak, "shortcut" nema znacenje u ovom kontekstu. Internet Explorer 5-10 podržavaju samo ICO file format. Netscape 7 i verzije 5 i 6 pregledača Internet Explorer prikazuju favikon samo kada je stranica označena a ne samo kada je posećena, kao u kasnijim verzijama pregledača.

Implementacija pretraživača[уреди]

Sledeća tabela ilustruje najbolje web pretraživače koji podržavaju različite funkcije.Brojevi verzija ukazuju na početnu verziju podržavanih funkcija.

Podrška za formate datoteka[уреди]

Sledeća tabela ilustruje format datoteka podršku za favikone.

Browser ICO PNG GIF animated GIFs JPEG APNG SVG
Firefox 1.0[3] 1.0[3] 1.0[3] Да[4] Да 3.0[4] Не[5]
Google Chrome Да Да 4.0 4.0 4.0 Не Шаблон:Dunno
Internet Explorer 5.0[6] 11.0[7] 11.0[7] Не[6] Не[6] Не[6] Не[6]
Opera 7.0[8] 7.0[8] 7.0[8] 7.0[8] 7.0[8] 9.5 Шаблон:Dunno
Safari Да 4.0 4.0 Не 4.0 Не Не

Dodatno, takve ikonice fajlova mogu biti veličine ×16, 32×32, 48×48, or 64×64 piksela I 8-bitni, 24-bitni 32-bitni dubina boje. Članak o ICO file format objašnjava detalje ikonice sa više 256 boja zasnovanih na Microsoft Windows platformama.

Upotreba favikona[уреди]

Ova tabela ilustruje različite mogućnosti upotrebe favikona.

Browser Address bar Address bar drop down list Links bar Bookmarks Tabs Drag to desktop
Firefox 1.0–12.0: Yes[9]
> v13: No[10]
Да Да Да[9] Да[9] Да[9]
Google Chrome Не[9] Не Да[9] Да[9] 1.0[9] 1.0[11]
Internet Explorer 7.0[9] Не 5.0[9] 5.0[9] 7.0[9] 5.0[9]
Opera 7.0[9] Не 7.0[9] 7.0[9] 7.0[9] 7.0[9]
Safari Да[9] Не Не[9] Да[9] Не[9] Не[9]


Opera Software je dodela mogućnost promene favikona u Speed Dial u Opera 10.[12]

Kako se koristi[уреди]

Tabela ilustruje gde favikoni mogu biti prepoznati od strane pretraživača.

Google Chrome Internet Explorer Firefox Opera Safari
<link rel="shortcut icon"
 href="http://example.com/myicon.ico" />
Да Да[6] Да Да Да
<link rel="icon"
 href="http://example.com/image.ico" />
Да Да (from IE 11)[7] Да Да Да
<link rel="icon"
 type="image/vnd.microsoft.icon"
 href="http://example.com/image.ico" />
Да Да (from IE 9)[7] Да Да Да
<link rel="icon" type="image/png"
 href="http://example.com/image.png" />
Да Да (from IE 11)[7] Да Да Да
<link rel="icon" type="image/gif"
 href="http://example.com/image.gif" />
Да Да (from IE 11)[7] Да Да Да
<link rel="icon" type="image/x-icon"
href="http://example.com/image.ico"/>
Да Да (from IE 9)[13] Да Да Да
favicon.ico located in the website's root Да Да Optional[14] Optional[15] Да
precedence: prefer root or (X)HTML linked version linked[9] linked[9] linked[9] ? ?

Ukoliko su linkovi PNG i ICO favikoni prisutni, PNG-favikoni su kompatibilni pretraživači uzimaju format i veličinu. Firefox i Safari će koristiti favikon koji dolazi poslednji.Chrome za Mac će koristiti svaki koji je ICO formatiran, ili 32x32 favikon. Chrome za Windows će koristiti favikon koji dolazi prvi ukoliko je 16×16, ili ICO. Ukoliko ni jedna od spomenutih opcija nije dostupna, Chromes će koristiti svaki favikon koji dolazi prvi, suprotno od Firefoxa i Safarija.Zaista, Chrome za Mac će ignorisati 16×16 favikone i koristiće 32×32 verziju. Opera će birati bilo koju od dostupnih ikonica nasumično..[16]

Samo SeaMonkey ne prepoznaje favicon.ico u web sajtovima po difoltu.[17]

Podrška za uređaj[уреди]

Apple-ovi uređaji koji koriste iOS operativni sistem od verzije 1.1.3 i novije, kao što su iPod,iPhone i iPad, kao i Android [18] uredjaji mogu napraviti prilagođenu ikonu, koja se može prikazati na početnoj strani uređaja. To se može ostvariti korištenjem Web Clip aplikacije [19][20]. Ovo je omogućeno koristeći <link rel="apple-touch-icon" ...> u <head> sekciji dokumenata koji se nalaze na web sajtu. Ako takva ikona nije unapred određena,umesto nje će se pojaviti početna strana tog web sajta.[21]


Preporučena veličina ikone je 60×60 piksela sa oštrim ivicama. Za najbolje prikazivanje na displeju iPhone 4, preporučuje se veličina od 120×120 piksela[20][22] [23]

Za iPad i iPad 2 , uobičajena veličina je 76×76 piksela. Za iPad uređaje treće generacije, koristi se veća rezolucija od 152×152 piksela.[24]

Ikona datoteke apple-touch-ikona je modifikovana da dodaje zaobljene ivice, senke i reflektujući sjaj. Alternativno, može se obezbediti da se ne primenjuje reflektujući sjaj na slike.[20] [21]

Sa zaobljenim ivicama i reflektujućim sjajem
 <link rel="apple-touch-icon" href="somepath/image.png" />


Bez reflektujućeg sjaja
<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />

Kao u slučaju favicon.ico fajla, pretraživači i mobilni uređaji ne zahtevaju nikakav HTML kod za preuzimanje ovih ikona[21]. Uobičajeno mesto za datoteke su apple-touch-icon-precomposed.png/code> i apple-touch-icon.png(po redosledu prioriteta) koje se nalaze u korenu web sajta.

HTML5 preporuke za ikone različitih veličina[уреди]

Sadašnja specifikacija HTML5 preporučuje da se navode ikone različitih veličina koristeći atribut rel="icon" sizes="space-separated list of icon dimensions" u okviru <link> etikete.[25] Više formata uključujući Microsoft .ico i Macintosh .icns formate, mogu obezbediti tip sadržaja koristeći atribut type="file content-type u okviru <link> etikete.

Apple-ovi mobilni uređaji koji koriste iOS 5 i novije, ignorišu preporuku HTML5 i koriste svoje, već objašnjene preporučene dimenzije ikona. Internet pregledač Google Chrome će odabrati veličinu koja najbliže odgovara onima koje su predviđene u zaglavlju HTML5 dokumenta.

Ograničenja i kritike[уреди]

Zbog potrebe da se favikona može uvek fiksirati, to može dovesti do sporog učitavanja stranica i poruke 404-stranica nije pronađena. W3C organizacija nije standardizovala druge ključne reči kao prečice, koje su takođe prihvaćene od korisnika.[6]

Favikonom se često manipuliše “prisluškivanje ” I napadi na HTML5 veb stranice. Mnogi pregledači veba prikazuju favicon blizu pregledačevog UI-a, kao što su mesta gde se unose URL adrese. Promenom sigurnosti favikona, napadač može da pokuša da prevari korisnika, koji će misliti da je na sigurnom sajtu(HTTPS).[26] Da se ovo ne bi dešavalo, neki veb pregledači prikazuju favikonu u okviru kartice, gde pored URL adrese piše i koji se protokol koristi.[27]

Reference[уреди]

  1. ^ Butcher, Simon (3 September 2003). „Published specification“. Internet Assigned Numbers Authority Приступљено 25 February 2011. 
  2. ^ Irish, Paul (15 December 2010). „commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate“. GitHub Приступљено 25 February 2011. 
  3. ^ а б в David (19 July 2003). „Mozilla 0.9.6 Release Notes“. Mozilla Приступљено 23 February 2011. 
  4. ^ а б „Bug 111373: don't allow animated site icons (favicons)“ Приступљено 1 June 2014. 
  5. ^ Works only on first load of the page.
    Daniel Holbert (14 April 2011). „Bug 366324 – SVG site icons (favicons, shortcut icons) support – comment 22“. Bugzilla@Mozilla. Mozilla Приступљено 23 February 2011. 
  6. ^ а б в г д ђ е Davis, Jeff (27 December 2007). „why doesn't the favicon for my site appear in IE7?“. jeffdav on code. Microsoft Приступљено 11 March 2013. 
  7. ^ а б в г д ђ „Fun with Favicons“. Microsoft. 7 September 2013 Приступљено 3 November 2013. 
  8. ^ а б в г д „Opera 7 for Windows Changelog“. Opera Software. 28 January 2003 Приступљено 28 February 2011. 
  9. ^ а б в г д ђ е ж з и ј к л љ м н њ о п р с т ћ у ф х Francis, Lewis (11 December 2007). „Chart of modern browser support for favicon“. informationgift.com Приступљено 23 February 2011. 
  10. ^ „Firefox deems favicons risky, banishes them from address bar“. Engadget Приступљено 2012-09-10. 
  11. ^ „Create Application Shortcuts“. Google. 22 March 2013. 
  12. ^ „Opera 10.0 beta 2 for Windows changelog“. Opera Software. 16 July 2009 Приступљено 27 February 2011. 
  13. ^ „IE9 RC Minor Changes List“. Microsoft. 11 February 2011 Приступљено 16 November 2013. 
  14. ^ 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.
  15. ^ Opera loads /favicon.ico only if Multimedia/Always load favicon option in opera:config is set to 1. See Opera Support page for more details.
  16. ^ Jonathan T. Neal (16 January 2013). „Understand the Favicon“ Приступљено 30 May 2013. 
  17. ^ Mathias Bynens (14 April 2010). „rel="shortcut icon" considered harmful“ Приступљено 15 November 2011. 
  18. ^ Mathias Bynens (2 March 2011). „Everything you always wanted to know about touch icons“ Приступљено 15 November 2011. 
  19. ^ „iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips“. Apple Inc. Приступљено 2010-05-27. 
  20. ^ а б в „Safari Web Content Guide: Specifying a Webpage Icon for Web Clip“. Apple Inc.. 15 November 2010 Приступљено 25 February 2011. 
  21. ^ а б в McLellan, Drew (17 January 2008). „How To Set an Apple Touch Icon for Any Site“. Allinthe head.com Приступљено 11 March 2011. 
  22. ^ „iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines, Table 8-1“. Apple Inc. Приступљено 2011-07-16. 
  23. ^ „Apple-touch-icon“. Apple Inc. Приступљено 25 February 2011. 
  24. ^ „iPad Apple Touch Icon“ Приступљено 2012-02-12. 
  25. ^ „W3C HTML5 Editor's Draft 26 June 2012, Section 4.12.4.5 'Link type "icon"'“. World Wide Web Consortium Приступљено 2012-07-15. 
  26. ^ Marlinspike, Moxie (21 February 2011). „Defeating Ssl Using Sslstrip (Marlinspike Blackhat)“. (see description of video). SecurityTube Приступљено 9 July 2011. 
  27. ^ „Firefox version 14 features“ Приступљено 18 July 2012.