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+, Safari	ICO	–
Google Chrome		PNG	–
Internet Explorer 11+			GIF	–
Safari 4+, Konqueror				JPEG	–
Opera 7+, Firefox 1+, Google Chrome 4+					animált GIF	–
Opera 9.5+, Firefox 3+						APNG	–
Opera 9.6+							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)

1. 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.)
2. Mentsd el webre, válaszd a 256 színű PNG-t (8 bites), és vedd vissza a színeket 16-ra!
3. Nyisd meg az elmentett 16×16 pixel méretű 16 színű PNG-det!
4. 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!)
5. A fájl neve favicon.ico legyen!

Plugin Windows-os Photoshopra

Töltsd le a plugint:
ICOFormat.8bi (185344 byte)

Photoshop CS5 esetén másold be ide:
c:\Program Files\Adobe\Adobe Photoshop CS5\Plug-Ins\File Formats

Egyébként értelem szerűen:
A photoshop mappája\Plug-Ins\File Formats

Feltöltés

1. Töltsd fel a webes gyökérkönyvtáradba a favicon.ico fájlt!
   (Ekkor így lesz elérhető: http://te.domained.hu/favicon.ico)

2. 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" />

3. 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