Favicon (az angol FAVorite ICON rövidítése - "ikon a kedvencekhez") - egy webhely vagy weboldal ikonja . Megjeleníti a böngésző az oldal neve előtti fülön , és képként a fül mellett [1] [2] , valamint egyes böngészőkben a címsorban.
1999 márciusában a Microsoft kiadta az Internet Explorer 5 -öt , amely elsőként támogatta az oldal ikonjait [3] . favicon.icoKezdetben ez az ikon egy 16x16 pixeles képpel elnevezett fájl volt ICO formátumban , és a webhely gyökérkönyvtárában volt elhelyezve. Az ikont az Internet Explorer használja a kedvencek listájában és az URL mellett a címsorban, ha az oldal könyvjelzővel van ellátva [4] [5] [6] [3] . A mellékhatás az volt, hogy az oldalt könyvjelzővel megjelölő látogatók számát az ikonfájl elérésének számából lehetett megbecsülni. Ez a technika elavult, mivel minden modern böngésző támogatja a no-tab ikont [5] .
Sokkal később jelent meg 32x32 formátumban, de a régebbi böngészők még mindig 16x16-ra csökkentik [7] .
Az alábbi táblázat a főbb webböngészőket mutatja be, amelyek különféle szolgáltatásokat támogatnak. A számok a böngésző kezdeti verzióját jelzik, amely támogatja a megadott funkciót.
Ez a táblázat azt mutatja be, hogy milyen formátumban lehet létrehozni a webhely faviconját.
| Böngésző | ICO | PNG | gif | Animált GIF | JPEG | APNG | SVG |
|---|---|---|---|---|---|---|---|
| Google Chrome | Igen | 4.0 | 4.0 | Nem | 4.0 | Nem | Nem |
| internet böngésző | 5.0 [8] | 11,0 [9] | 11,0 [10] | Nem [8] | igen [9] | Nem [8] | Nem [8] |
| Firefox | 1.0 [11] | 1.0 [11] | 1.0 [11] | Igen | Igen | 3.0 | igen [9] |
| Opera | 7.0 [12] | 7.0 [12] | 7.0 [12] | 7.0 [12] | 7.0 [12] | 9.5 | Nem [9] |
| szafari | Igen | 4.0 | 4.0 | Nem | 4.0 | Nem | Nem |
Levelezési táblázat, mely böngésző hol használja a favicont. Az Opera böngésző lehetővé teszi a gyorselérési eszköztár faviconjának megváltoztatását is az Opera 10 óta [13] .
| Böngésző | Címsor | Tipp a címsávban | Könyvjelzők sáv | Könyvjelzők | Tabs | asztali ikon |
|---|---|---|---|---|---|---|
| él | Nem | Igen | Igen | Igen | Igen | Igen |
| Firefox | 1,0–12,0: Igen [14] > v13: Nem [15] |
Igen | Igen | igen [14] | igen [14] | igen [14] |
| Google Chrome | Nem [14] | Nem | igen [14] | igen [14] | 1.0 [14] | Nem [14] |
| internet böngésző | 7.0 [14] | Nem | 5.0 [14] | 5.0 [14] | 7.0 [14] | 5.0 [14] |
| Opera | 7,0–12,17: Igen > v14: Nem [14] |
Nem | 7.0 [14] | 7.0 [14] | 7.0 [14] | 7.0 [14] |
| szafari | igen [14] | Igen | Nem [14] | igen [14] | 1,0–8,0: Igen 9,0–11,0: Nem > 12,0: Nem kötelező [16] |
Nem [14] |
Sok modern böngésző nem igényel kifejezett hivatkozást favicon.icoaz oldal kódjában. Ilyen jelzés hiányában a böngésző favicon.icoa webhely gyökeréből próbál betölteni. Lehetőség van azonban explicit módon megadni az ikon pozícióját az ( X ) HTML kódban (az elemen belül <head>), ami lehetővé teszi, hogy ha hiányzik /favicon.ico, minden oldalhoz más ikont használjunk.
A hely kifejezett megadásához a favicon.icokövetkező sort kell beírnia webhelye oldalkódjába a fejrészben :
< link rel = "icon" type = "image/vnd.microsoft.icon" href = "/favicon.ico" />ahol
Ebben az esetben az attribútumnak typetartalmaznia kell a formátum MIME típusát (például PNGimage/png esetén ).
2003-ban az ICO formátumot Simon Butcher regisztrálta az Internet Assigned Numbers Authority ( IANA ) szervezetnél. Ennél a formátumnál az alapértelmezett MIME - típus a image/vnd.microsoft.icon.
Ha az ICO formátumot használja az Internet Explorerhez , akkor annak MIME típusának kell lennie image/vnd.microsoft.icon. A típust image/x-icon2003-ban az ICO típusszabványosítása után elavulttá vált. A megfelelő típust image/vnd.microsoft.iconminden böngésző támogatja . Fontos megjegyezni, hogy az ikon nem jelenik meg a böngészőben, ha a webszerver által visszaadott Tartalom típusa nem egyezik az oldal html kódjában megadottal.
Több képet is megadhat különböző formátumokban – például egy karakterláncot rel="shortcut icon"és ikont ICO formátumban Internet Explorer esetén, és egy karakterláncot rel="icon"és ikont GIF vagy PNG formátumban más böngészőkben.
Az iOS 1.1.3-tól kezdődő Apple - eszközök és egyes Android-eszközök [17] támogatják a speciális nagy ikonokat, amelyek webalkalmazás-ikonként használhatók [18] [19] . <head> <link rel="apple-touch-icon" ...>A webhely a címben a [20] jellel elláthat ilyen ikont . Az ajánlott ikonméret iPhone esetén 60×60 pixel, Retina kijelzős iPhone esetén 120×120 pixel [19] [21] [22] . iPad esetén az ajánlott ikonméret 76×76 pixel, Retina kijelzővel rendelkező iPad esetén (a harmadik generációs iPadtől kezdődően) pedig 152×152 pixel [23] . A Chrome böngészővel rendelkező Android táblagépek esetében az előnyben részesített ikon a PNG formátum és a 192x192 méretű [24] .
A kép, amelyet nek nevezünk, apple-touch-iconárnyékkal, tükröződéssel fedi át, és a kép lekerekített éleket is kap [19] . apple-touch-icon-precomposedNincsenek effektusok a képre [19] [20] .
Az iOS által hozzáadott lekerekített élekkel<link rel="apple-touch-icon" href="somepath/image.png" />
nincsenek tükröződések<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />
A webhely gyökérkönyvtára az alapértelmezett hely az ikonok apple-touch-icon-precomposed.pngés az ikonok kereséséhez apple-touch-icon.png. [19] [20]
| Web és weboldalak | |
|---|---|
| globálisan | |
| Helyileg | |
Webhelyek és szolgáltatások típusai |
|
| Alkotás és karbantartás | |
Elrendezések, oldalak, webhelyek típusai | |
| Műszaki | |
| Marketing | |
| Társadalom és kultúra | |
