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

14 hozzászólás a „Favicon hogyan?” című bejegyzéshez

  1. Szia!

    Nagyszerű az oldalad! Tanácsot kérek, mivel „csak” fotós vagyok, nem programozó. Azt írod:
    „Helyezd el a weboldalad és része közé, vagyis a fejrészbe az alábbi kódot:”
    Hol, hogyan tudom megnyitni az oldalamat? Egy MTML-szerkesztőben? Hogyan csináljam?
    Előre is köszönöm a segítséget! Üdv: Balázs

  2. Már ott elakadtam, hogy feltöltsem a webes gyökérkönyvtárba a favicon.ico fájlt! Az „admin” oldalon csak képformátum feltöltést találok. Most mi a teendő?
    Üdv: Balázs

          1. Win7 (64) az op. rendszerem. Mivel azt olvastam, hogy a PNG formátum is megfelelő, ezért olyanban töltöttem fel az icon-t (Remélem a gyökér-könyvtárba sikerült.) Ez az oldalam:
            http://www.kooszimages.comoj.com/
            Hogyan (mivel) tudom a fejrészt szerkeszteni? Ezt is elég beírni:

            Üdv: Balázs

            1. Sajnos elég nagy a katyvasz a weboldalad kapcsán (php és html kiterjesztésű oldalak keverednek, bár el tudom képzelni, hogy a html kiterjesztésűeket is php generálja) és a gyökérben sem található favicon.png…
              Így elég nehéz lesz segíteni. Nem vagyok Gyurcsók, így a távgyógyítás nem asztalom. Tényleg szívesen segítek, de így évekig fog tartani, főleg, hogy e-mailt sem kaptam.

  3. Kedves Tamás!
    Elnézést a zavarásért. A segítségedet szeretném kérni, mivel jelenleg nem tudom megnyitni az oldalamat. A szolgáltatónak is írtam, és ezt válaszolta:
    „The reason you get the error is because you have deleted your public folder (public_html). To fix this, run ‘Fix File Ownership’ and ‘Fix File Permissions’ which will recreate it. Then upload all files you want visible INTO that folder/directory.

    If this still does not fix the error then please Cleanup/Reload your Account. Please be advised that this will delete all your data so if necessary, make a backup first.”
    Mit kell tennem? Üdv: Balázs

    1. Köszönöm, hogy megtisztelsz bizalmaddal, de azt nem tudom, hogy ez a történet hogyan kapcsolódik a favicon témakörhöz. Az általad rendelkezésre bocsátott információ nem elég a megoldáshoz, kérlek, írd meg levélben, hogy milyen szolgáltatóról van szó és milyen jellegű hozzáféréssel rendelkezel a tárhelyedhez. Ne itt válaszolj, kérlek!

      Update:
      Ha ugyan az a Balázs vagy, akkor értem a kapcsolódást, de még mindig kevés az információm ahhoz, hogy segítsek. Ha budapesti vagy, akkor szívesen találkozom személyesen is, hogy megoldjuk az ügyet.

Hozzászólás a(z) Balázs bejegyzéshez Válasz megszakítása

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük