Favicon - Favicon

A favicon (/ˈF…proti.ɪˌkɒn/; zkratka pro oblíbená ikona), také známý jako a ikona zástupce, ikona webové stránky, ikona záložky, Ikona URLnebo ikona záložky, je soubor obsahující jednu nebo více malých ikony,[1] spojené s konkrétním webová stránka nebo webová stránka.[1][2] A webový designér může vytvořit takovou ikonu a nahrát ji na web (nebo webovou stránku) několika způsoby, a to graficky internetové prohlížeče pak to využije.[3] Prohlížeče, které poskytují podporu favicon, obvykle zobrazují favicon stránky v prohlížeči adresní řádek (někdy i v historii) a vedle názvu stránky v seznamu záložky.[3] Prohlížeče, které podporují a rozhraní dokumentu s kartami obvykle na kartě zobrazuje favicon stránky vedle názvu stránky a webové prohlížeče použijte favicon jako ikona plochy.[1]

Favicon Wikipedie, zobrazený ve starší verzi Firefox (od roku 2008)

Dějiny

V březnu 1999 Microsoft propuštěn Internet Explorer 5, který podporoval favicons poprvé.[4] Původně byl favicon a soubor volala favicon.ico umístěn v kořenový adresář webové stránky. Bylo použito v internet Explorer je oblíbené (záložky) a vedle URL v adresním řádku, pokud byla stránka označena záložkou.[5][6][7][4] Vedlejším efektem bylo, že počet návštěvníků, kteří si stránku přidali do záložek, lze odhadnout podle požadavků favicon. Tento vedlejší efekt již nefunguje, protože všechny moderní prohlížeče načtou soubor favicon, který se zobrazí v řádku webové adresy, bez ohledu na to, zda je web označen záložkou.[6]

Standardizace

Favicon byl standardizován World Wide Web Consortium (W3C) v HTML Doporučení 4.01, vydané v prosinci 1999 a později v XHTML Doporučení 1.0, vydané v lednu 2000.[8][9] Standardní implementace používá a odkazový prvek s rel atribut v <head> části dokumentu k určení formátu souboru, názvu a umístění souboru. Na rozdíl od předchozího schématu může být soubor na jakémkoli webu adresář a mít jakýkoli formát obrazového souboru.[10][11]

V roce 2003 .ico formát byl zaregistrován třetí stranou u Autorita pro internetová přidělená čísla (IANA) pod Typ MIME image / vnd.microsoft.icon.[12][13] Při použití .ico formát, který se zobrazí jako obrázky (např. ne jako favicon), nemůže aplikace Internet Explorer zobrazit soubory obsluhované tímto standardizovaným typem MIME.[13] A řešení pro Internet Explorer je přidružit .ico s nestandardním obrázek / ikona x Typ MIME na webových serverech.[14]

RFC 5988 zřídil registr vztahů s odkazy IANA,[15]a rel = "ikona" byla zaregistrována v roce 2010 na základě HTML5 Specifikace. Populární <link rel="shortcut icon" type="image/png" href="image/favicon.png"> teoreticky identifikuje dva vztahy, “zkratka" a "ikona", ale "zkratka„není registrován a je nadbytečný. V roce 2011 Životní standard HTML[16] upřesnil, že z historických důvodů “zkratka„je povoleno bezprostředně před“ikona";[17] nicméně, "zkratka„v tomto kontextu nemá význam.

Dědictví

Internet Explorer 5–10 podporuje pouze Formát souboru ICO. Netscape 7 a Internet Explorer verze 5 a 6 zobrazit favicon pouze v případě, že je stránka označena záložkami, a ne jednoduše, když jsou stránky navštěvovány jako v pozdějších prohlížečích.[4]

Implementace prohlížeče

Následující tabulky ilustrují podporu různých funkcí hlavních webových prohlížečů. Pokud není uvedeno, čísla verzí označují počáteční číslo verze podporované funkce.

Podpora formátu souborů

Následující tabulka ilustruje formát obrazového souboru podpora favicon.

Prohlížečformát obrazového souboru
ICOPNGGIFanimované GIFyJPEGAPNGSVG
OkrajAnoAnoAnoNeNeznámýNeznámýNeznámý
Firefox1.0[18]1.0[18]1.0[18]Ano[19]Ano3.0[19]41.0[20]
Google ChromeAnoAno4.0Ne[21][22]4.0Ne80[23]
internet Explorer5.0[24]11.0[25]11.0[25]Ne[24]Ne[24]Ne[24]Ne[26]
Opera7.0[27]7.0[27]7.0[27]7.0[27]7.0[27]9.544.0[28]
SafariAno4.04.0Ne4.0NeNestandardní (12.0)[A][29][30]
  1. ^ Safari od verze 12.0 podporuje jednobarevné SVG favikony v některých případech nestandardně ikona masky formát.

Tyto soubory ikon mohou být navíc 16 × 16, 32 × 32, 48 × 48 nebo 64 × 64 pixelů ve velikosti a 8bitový, 24bitový nebo 32bitový barevná hloubka.[1][3] The Formát souboru ICO článek vysvětluje podrobnosti ikon s více než 256 barvami v různých barvách Microsoft Windows platformy.

Použití favicon

Tato tabulka ilustruje různé oblasti prohlížeče, kde lze zobrazit favikony.

ProhlížečLišta adresyRozevírací seznam adresního řádkuLišta odkazůZáložkyZáložkyPřetáhněte na plochu
OkrajNeAnoAnoAnoAnoAno
Firefox1.0–12.0: Ano[31]
> v13: Ne[32]		AnoAnoAno[31]Ano[31]Ano[31]
Google ChromeNe[31]NeAno[31]Ano[31]1.0[31]Ne[31]
internet Explorer7.0[31]Ne5.0[31]5.0[31]7.0[31]5.0[31]
Opera7.0–12.17: Ano
> v14: Ne[31]		Ne7.0[31]7.0[31]7.0[31]7.0[31]
SafariAno[31]AnoNe[31]Ano[31]1.0–8.0: Ano
9.0–11.0: Ne
> 12.0: Volitelné[33]		Ne[31]

Software pro operu přidána možnost změnit favicon v souboru Rychlé vytáčení v Opera 10.[34]

Jak používat

Tato tabulka ukazuje různé způsoby, jak lze favicon rozpoznat pomocí webového prohlížeče. Standardní implementace používá a odkazový prvek s rel atribut v <head> části dokumentu k určení formátu, názvu a umístění souborů.

OkrajFirefoxGoogle Chromeinternet ExplorerOperaSafari
 rel ="ikona zástupce" href =„https://example.com/myicon.ico“>
Ano[4]Ano[4]Ano[4]Ano[4][24]Ano[4]Ano
 rel ="ikona" zadejte =„image / vnd.microsoft.icon“ href =„https://example.com/obrazek.ico“>
AnoAnoAnoAno (z IE 9)[25]AnoAno
 rel ="ikona" zadejte =„image / x-icon“ href =„https://example.com/obrazek.ico“>
Ano[4]Ano[4]Ano[4]Ano (z IE 9)[35]Ano[4]Ano
 rel ="ikona" href =„https://example.com/obrazek.ico“>
AnoAnoAnoAno (z IE 11)[25]AnoAno
 rel ="ikona" zadejte =„obrázek / gif“ href =„https://example.com/obrazek.gif“>
AnoAnoAnoAno (z IE 11)[25]AnoAno
 rel ="ikona" zadejte =„image / png“ href =„https://example.com/obrazek.png“>
AnoAnoAnoAno (z IE 11)[25]AnoAno
 rel ="ikona" zadejte =„image / svg + xml“ href =„https://example.com/obrazek.svg“>
AnoAnoAnoAnoAnoNe
 rel ="ikona masky" href =„https://example.com/obrazek.svg“ barva ="Červené">
NeNeNeNeNeAno[36]
favicon.ico umístěný v kořenovém adresáři webuAnoVolitelný[A]AnoAnoVolitelný[b]Ano
přednost: upřednostňujte kořenovou nebo (X) HTML propojenou verzipropojeno[31]propojeno[31]propojeno[31]propojeno[31]??
  1. ^ Firefox přijímá pouze favicon.ico v kořenovém adresáři webu bez a <link> označte, pokud je nastavení browser.chrome.site_icons je nastaven na skutečný v about: config. Výchozí hodnota je skutečný. Pokud je nastaveno na Nepravdivé, tyto favikony jsou ignorovány.
  2. ^ Opera se načítá /favicon.ico jen když Multimédia / Vždy načíst favicon možnost v opera: konfigurace je nastaven na 1. Vidět Stránka podpory Opera Více podrobností.

Pokud jsou k dispozici odkazy na favikony PNG i ICO, prohlížeče kompatibilní s PNG-favicon vyberou následující formát a velikost. Firefox a Safari budou používat favicon, který přijde jako poslední. Chrome pro Mac použije jakýkoli favicon formátovaný ICO, jinak favicon 32 × 32. Chrome pro Windows použije favicon, který je na prvním místě, pokud je 16 × 16, jinak ICO. Pokud není k dispozici žádná z výše uvedených možností, oba Chromes použijí jakýkoli favicon, který přijde dříve, pravý opak Firefoxu a Safari. Chrome pro Mac skutečně ignoruje favicon 16 × 16 a použije verzi 32 × 32, pouze aby ji na zařízeních bez sítnice zmenšil zpět na 16 × 16. Opera vybere z kterékoli z dostupných ikon zcela náhodně.[37]

Pouze Mořská opice nenačte favicon.ico ve výchozím nastavení soubory v kořenovém adresáři webu.[38]

Podpora zařízení

Pro Jablko zařízení s iOS operační systém verze 1.1.3 nebo novější, stejně jako některá zařízení Android,[39] je možné poskytnout vlastní ikonu, kterou mohou uživatelé zobrazit na svých domovských obrazovkách pomocí Přidat na domácí obrazovku tlačítko v listu sdílení v Safari.[40][41] Tato funkce je povolena zadáním a <link rel="apple-touch-icon" ...> v <head> část dokumentů doručovaných webem. Pokud vlastní ikona není k dispozici, a miniatura webové stránky se místo toho umístí na domovskou obrazovku.[42]

Doporučená základní velikost této ikony je 152 × 152 pixelů.[43]

U iPadu je základní velikost 180x180 pixelů. Tablety Android [přes Chrome] upřednostňují ikonu PNG 192x192.[44]

Soubor ikony, na který odkazuje ikona apple touch je upraven tak, aby přidal zaoblené rohy. Ve verzích iOS starších než iOS 7 by byl přidán vržený stín a reflexní lesk a apple-touch-icon-precomposed může být poskytnuta ikona, která instruuje zařízení, aby na obraz nevyzařovaly reflexní lesk.[41][42]

Se zaoblenými rohy, přidal iOS
<link rel="apple-touch-icon" href="https://example.com/image.png">

Prohlížeče ani mobilní zařízení k načítání těchto ikon nepožadují žádný HTML.[42] Kořen webu je výchozím umístěním souboru apple-touch-icon.png (v pořadí podle priority).[41][42]

Doporučení HTML5 pro ikony v různých velikostech

Aktuální HTML5 Specifikace doporučuje zadat více velikostí ikon pomocí atributů rel = "ikona" velikosti = "seznam rozměrů ikon oddělených mezerami" v rámci <link> štítek.[45] Více formátů ikon, včetně formátů kontejnerů, jako je Microsoft .ico a Macintosh .icns soubory, stejně jako Škálovatelná vektorová grafika může být poskytnuto zahrnutím ikon typ obsahu ve formátu typ = "typ obsahu souboru" v rámci <link> štítek.

Do iOS 5 „Mobilní zařízení Apple ignorují doporučení HTML5 a místo toho používají proprietární ikona apple touch výše popsaná metoda. The Google Chrome webový prohlížeč však vybere nejbližší odpovídající velikost z velikostí uvedených v záhlavích HTML a vytvoří 128 × 128 pixelů ikony aplikací, když si uživatel zvolí Vytvořit zástupce aplikace ... z nabídky „Nástroje“.

Animované favikony

Různé prohlížeče, jako jsou Chrome, Firefox a Opera, podporují animaci faviconů. Zpráva o chybě je pro Firefox otevřena od roku 2001 a požaduje způsob, jak tuto funkci deaktivovat.[46][47]

Omezení a kritika

Kvůli potřebě jej vždy zkontrolovat na pevném místě může favicon vést k uměle pomalému času načítání stránky a zbytečným 404 položkám v protokolu serveru, pokud neexistuje.[6]

W3C nestandardizoval atribut rel, takže existují i ​​další klíčová slova jako ikona zástupce které jsou rovněž přijímány uživatelský agent.[11][24]

Favikony jsou často manipulovány jako součást phishingových nebo odposlechových útoků HTTPS webové stránky. Mnoho webových prohlížečů zobrazuje favikony poblíž oblastí uživatelského rozhraní webového prohlížeče, například adresního řádku, které slouží k vyjádření, zda připojení k webu používá zabezpečený protokol, jako je TLS. Úpravou favikonu na známý obraz visacího zámku se může útočník pokusit přimět uživatele, aby si myslel, že je bezpečně připojen ke správnému webu. Automatizovaný útok man-in-the-middle nástroje jako SSLStrip využij tento trik.[48] Abychom to vyloučili, některé webové prohlížeče[který? ] zobrazit favicon na kartě a zároveň zobrazit stav zabezpečení protokolu použitého k přístupu na web vedle adresy URL.[49]

Vzhledem k tomu, že favicons jsou obvykle umístěny v kořenovém adresáři webu na serveru, lze je s určitou spolehlivostí použít k odhalení, zda je webový klient přihlášen k dané službě. Funguje to tak, že se na mnoha webech využívá funkce přesměrování po přihlášení, dotaz na favicon v adrese URL přesměrování po přihlášení a testování odpovědi serveru, aby se zjistilo, zda je uživateli poskytnut požadovaný zdroj (což znamená, že jsou přihlášeni), nebo místo toho přesměrováni na přihlašovací stránku (což znamená, že nejsou přihlášeni ke službě).[50]

Reference

  1. ^ A b C d Lane, Dave (9. srpna 2008). „Vytvoření Favicon s více rozlišeními včetně průhlednosti pomocí GIMP“. Egressive.com. Archivovány od originál dne 25. prosince 2010. Citováno 25. února 2011.
  2. ^ „Co je s novou ikonou Mini od Googlu?“. BBC. 20. ledna 2009. Citováno 25. února 2011. Ten čtverec 16x16 pixelů je velikost dotyčného favikonu, ne-li rozsah.
  3. ^ A b C Apple, Jennifer. "Favicon - Jak vytvořit Favicon.ico". Photoshopsupport.com. Citováno 25. února 2011.
  4. ^ A b C d E F G h i j k l „Jak přidat ikonu zástupce na webovou stránku“. Microsoft Developer Network. Microsoft. Citováno 15. března 2010.
  5. ^ McGrew, Darin (26. dubna 2007). „Web Authoring FAQ - 8.11. How can I have a custom icon when people bookmark my site?“. htmlhelp.com. Citováno 23. února 2011.
  6. ^ A b C Heng, Christopher (7. září 2008). „Co je Favicon.ico? Personalizujte záložky svého webu“. thesitewizard.com. Citováno 23. února 2011.
  7. ^ „Vytváření faviconů pomocí Adobe Photoshop a GoLive“. Adobe GoLive. Archivovány od originál dne 7. prosince 2003. Citováno 25. února 2011.
  8. ^ „Specifikace HTML 4.01“. World Wide Web Consortium. 24. prosince 1999. Citováno 14. března 2011.
  9. ^ „XHTML ™ 1.0: The Extensible HyperText Markup Language“. World Wide Web Consortium. 26. ledna 2000. Citováno 14. března 2011.
  10. ^ Dubost, Karl (říjen 2005). "Profil metadat webu: favicon, ..." World Wide Web Consortium. Citováno 23. února 2011.
  11. ^ A b Dubost, Karl (24. října 2005). „Jak přidat favicon na vaše stránky“. World Wide Web Consortium. Citováno 25. února 2011.
  12. ^ Butcher, Simon (3. září 2003). „Publikovaná specifikace“. Autorita pro internetová přidělená čísla. Citováno 25. února 2011.
  13. ^ A b „Seznam drobných změn IE9 RC“. IEInternals. Citováno 7. dubna 2016.
  14. ^ Irish, Paul (15. prosince 2010). "spáchat 37b5fec090d00f38de64 na paulirishův html5 -plateb". GitHub. Citováno 25. února 2011.
  15. ^ „Link Relations“. IANA.
  16. ^ Ian Hickson (19. ledna 2011). „HTML je nový HTML5“. Blog WHATWG. WHATWG.
  17. ^ „Revize HTML5 r6404“. Sledovač HTML5.
  18. ^ A b C David (19. července 2003). „Poznámky k verzi Mozilla 0.9.6“. Mozilla. Citováno 23. února 2011.
  19. ^ A b „Chyba 111373: nepovolit animované ikony webů (favicons)“. Citováno 1. června 2014.
  20. ^ Daniel Holbert (12. června 2015). „Chyba 366324 - podpora ikon SVG stránek (favicons, ikony zástupců) - komentář 55“. Bugzilla @ Mozilla. Mozilla. Citováno 12. června 2015.
  21. ^ tracker, chrom. "žádný pohyb ve favicon". chromium.org. Citováno 11. dubna 2016.
  22. ^ tracker, chrom. „Animované favikony nejsou podporovány“. chromium.org. Citováno 8. listopadu 2018.
  23. ^ „Podpora SVG ve faviconech - stav platformy Chrome“. 19. listopadu 2019. Citováno 16. ledna 2020.
  24. ^ A b C d E F Davis, Jeff (27. prosince 2007). "proč se favicon pro můj web neobjeví v IE7?". jeffdav na kódu. Microsoft. Citováno 11. března 2013.
  25. ^ A b C d E F „Fun with Favicons“. Microsoft. 7. září 2013. Citováno 3. listopadu 2013.
  26. ^ "Podpora SVG favicon". Microsoft Connect. 3. května 2013. Citováno 4. září 2014.
  27. ^ A b C d E „Seznam změn Opera 7 pro Windows“. Software pro operu. 28. ledna 2003. Citováno 28. února 2011.
  28. ^ „Co je nového v opeře“. Software pro operu. Citováno 24. června 2017.
  29. ^ „Náhled technologie Safari 58 s funkcemi Safari 12 je nyní k dispozici“. WebKit. 6. června 2018. Citováno 3. března 2019.
  30. ^ "Favicons. Konečně". Iconfactory. 7. června 2018. Citováno 3. března 2019.
  31. ^ A b C d E F G h i j k l m n Ó p q r s t u proti w X y z aa Francis, Lewis (11. prosince 2007). „Graf podpory moderních prohlížečů pro favicon“. informationgift.com. Citováno 23. února 2011.
  32. ^ „Firefox považuje favikony za riskantní, vylučuje je z adresního řádku“. Engadget. Citováno 10. září 2012.
  33. ^ „Jak povolit favikony v Safari, abyste mohli graficky identifikovat webové stránky na kartách“. iDownloadBlog. 14. června 2018. Citováno 14. října 2020.
  34. ^ „Seznam změn Opera 10.0 beta 2 pro Windows“. Software pro operu. 16. července 2009. Citováno 27. února 2011.
  35. ^ "Seznam drobných změn IE9 RC". Microsoft. 11. února 2011. Citováno 16. listopadu 2013.
  36. ^ „Vytváření připnutých ikon na kartě“. Apple Inc. 12. prosince 2016. Citováno 9. dubna 2019.
  37. ^ Jonathan T. Neal (16. ledna 2013). „Pochopte favicon“. Archivovány od originál dne 23. května 2013. Citováno 30. května 2013.
  38. ^ Mathias Bynens (14. dubna 2010). „rel =“ ikona zástupce „považována za škodlivou“. Citováno 15. listopadu 2011.
  39. ^ Mathias Bynens (2. března 2011). „Vše, co jste vždy chtěli vědět o dotykových ikonách“. Citováno 15. listopadu 2011.
  40. ^ „Pokyny pro lidské rozhraní pro iPhone pro webové aplikace: metriky, pokyny pro rozložení a tipy“. Apple Inc.. Citováno 27. května 2010.
  41. ^ A b C „Průvodce webovým obsahem Safari: Určení ikony webové stránky pro webový klip“. Apple Inc. 15. listopadu 2010. Citováno 25. února 2011.
  42. ^ A b C d McLellan, Drew (17. ledna 2008). „Jak nastavit ikonu Apple Touch pro jakýkoli web“. Allinthe head.com. Citováno 11. března 2011.
  43. ^ „Apple-touch-icon“. Apple Inc.. Citováno 9. dubna 2019.
  44. ^ „Android Chrome a jeho favicon“. Citováno 9. září 2014.
  45. ^ Ikona „Životní standard HTML, část 4.6.6.6„ Typ odkazu “'". WHATWG. Citováno 17. listopadu 2015.
  46. ^ „Chyba 111373 - nepovolit animované ikony webů (favicons)“. bugzilla.mozilla.org. 21. listopadu 2001.
  47. ^ „Bug Firefox 111373 - nepovolit ikony animovaných stránek (mozilla.org)“. Hackerské zprávy. 7. července 2015.
  48. ^ Marlinspike, Moxie (21. února 2011). „Porážka SSL pomocí Sslstrip (Marlinspike Blackhat)“. (viz popis videa). SecurityTube. Archivovány od originál dne 13. července 2011. Citováno 9. července 2011.
  49. ^ „Funkce Firefoxu ve verzi 14“. Citováno 18. července 2012.
  50. ^ Linus, Robin. „Váš otisk sociální sítě“. Citováno 14. října 2016.

externí odkazy