Favicon hogyan?
Történet
Kezdetek
1999 márciusában a Microsoft az MSIE 5-ben bevezette a Kedvencek ikonokkal való illusztrálását, innen a név is: Favorites icon.
Kezdetben a 16×16 pixeles Windows ICO formátumú képek helye a webszerver gyökérkönyvtára volt, a fájlnév pedig favicon.ico volt (pl.: http://kgyt.hu/favicon.ico).
A böngésző címsorában csak azoknak az oldalaknak az ikonja jelent meg, amelyeket felvettek a könyvjelzők közé, a könyvjelző felvételekor a böngésző letöltötte a fájlt, és a későbbiekben is ezt a már letöltött ikont használta (újratöltés nélkül) ezért például a technológia lehetővé tette, hogy a favicon.ico fájl letöltései alapján következtetni lehessen azoknak a felhasználóknak a számára, akik az oldalt felvették a kedvencek közé.
A modern böngészők esetében ez a funkció nem használható, mivel a favicon.ico megjelenik azoknál az oldalaknál is, amelyek nem lettek könyvjelzőzve.
Szabványosítás
1999 decemberében a W3C HTML 4.01, majd 2000 januárjában az XHTML 1.0 ajánlásába is bekerült a favicon támogatása, de itt már nem feltétlenül a gyökérbe kell tenni az ikont, hanem a megfelelő link elem href attribútuma által meghatározott helyre.
Mindazonáltal még mindig ajánlott a gyökérkönyvtárba helyezni az ikont.
Az alábbi böngészők nem használják a szabványt, de a gyökérkönyvtárban elhelyezett favicon.ico fájlt megjelenítik, ha könyvjelzőt vesznek fel rá (tehát a régi Microsoft ajánlást használják):
- Internet Explorer 5 és 6
- Netscape 7
A legtöbb böngésző ma már a szabványkövetés okán is kezeli a favicon-okat, azonban ezek a gyökérben elhelyezett favicon-t is megjelenítik.
A szabvány megengedi az ICO formátumtól való eltérést is, de az Internet Explorer nem támogatja csak az ICO-t.
Kompatibilitás
Támogatott IANA MIME típusok:
| formátum | kiterjesztés | IANA MIME | MSIE MIME |
|---|---|---|---|
| ICO | .ico | image/vnd.microsoft.icon | image/x-icon |
| PNG | .png | image/png | |
| APNG | .apng | image/png | |
| GIF | .gif | image/gif | |
| JPEG | .jpg .jpeg | image/jpeg | |
| SVG | .svg .svgz | image/svg+xml | |
A modern böngészők közül az alábbiak támogatják a favicon-t szabványosan:
| böngésző | támogatott formátumok | ||||||
|---|---|---|---|---|---|---|---|
| Internet Explorer 5+ | ICO | – | |||||
| Safari, Konqueror, Google Chrome | PNG | GIF | JPEG | – | |||
| Opera 7.0-tól és Firefox 1.0-tól | animált GIF | – | |||||
| Opera 9.5-től és Firefox 3.0-tól | APNG | – | |||||
| Opera 9.6-tól | SVG | ||||||
A favicon fájl jellemző paraméterei
Méretek
- 16×16 (ajánlott, ezt minden olyan böngésző támogatja, amely a favicon-t)
- 32×32
- 48×48
Színmélység
- 16 szín, vagy alatta (ajánlott, a többi bizonyos esetekben nem jelenik meg)
- 8 bit
- 16 bit
- 24 bit (RGB)
- 32 bit (RGBA és nem CMYK!)
(X)HTML-be ágyazás
A szabvány szerint a favicon megadásának formátuma az alábbi:
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
vagy:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
A type attribútum elhagyható, és célszerű is elhagyni, mert a favicon-t támogató böngészők mindegyikében használható ICO fájlokat az Internet Explorer csak a nem szabványos image/x-icon típus megadása esetén jeleníti meg.
A rel attribútum használata esetén nem számít a kis és nagy betűk különbsége, tehát az Icon és az icon, esetleg az ICON ugyan azt jelenti.
Javaslatom szerint az alábbi módon érdemes megadni a favicon-t:
<link rel="shortcut icon" href="http://te.domained.hu/favicon.ico" /> <link rel="icon" href="http://te.domained.hu/favicon.ico" />
vagy:
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
HTML esetén a tegek végén nem teszünk lezárást, tehát:
<link rel="shortcut icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
Az ikont lehetőleg 16×16 pixel méretben, 16 színű indexelt ICO formában, a web felől látható / könyvtárban célszerű elhelyezni.
Egy lehetséges szerkesztési mód (Photoshop)
- Készíts egy 16×16 pixeles PNG formátumú képet!
(ne legyen benne félig átlátszó pixel, legjobb, ha pixelenként rajzolod meg.) - Mentsd el webre, válaszd a 256 színű PNG-t (8 bites), és vedd vissza a színeket 16-ra!
- Nyisd meg az elmentett 16×16 pixel méretű 16 színű PNG-det!
- Mentsd el másként az ICO formátumot választva!
(Plugin telepítése szükséges ehhez. A sima icon formátumot válaszd, ne a Vista icont!) - A fájl neve
favicon.icolegyen!
Plugin Windows-os Photoshopra
Töltsd le a plugint:
ICOFormat.8bi (185344 byte)
Photoshop CS5 esetén másold be ide:
c
rogram FilesAdobeAdobe Photoshop CS5Plug-InsFile Formats
Egyébként értelem szerűen:
A photoshop mappájaPlug-InsFile Formats
Feltöltés
- Töltsd fel a webes gyökérkönyvtáradba a
favicon.icofájlt!
(Ekkor így lesz elérhető:http://te.domained.hu/favicon.ico) -
Helyezd el a weboldalad
<head>és</head>része közé, vagyis a fejrészbe az alábbi kódot:<link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
- Kész!
Hivatkozások
- Favicon (Wikipedia) – angol
- Favicon (Wikipédia)
- Free plugins for Photoshop & Illustrator…and other software (ICO Format) – angol
- ICO (Windows Icon) file format plugin for Photoshop – angol
- Making a favicon (december14.net) – angol
- HOWTO: create a favicon.ico on Mac OS X (somejunkwelike.com) – angol
- Free and easy to use online Favicon Generator (graphicsguru.com) – angol
- FavIcon Generator (dynamicdrive.com) – angol
- FavIcon from Pics (chami.com) – angol
- Ikon a weboldalnak, favicon! (WebPillangó)
- favicon.hu ikonszerkesztő
- Favicon megin… (Weblabor)
- png2ico – PNG to icon converter (Linux, Unix, GNU, Windows, …
- ZylBmp2Ico 2.0
