Blog

Amit a favikonokról tudni érdemes

Mondhatnánk, hogy a favicon (favorites icon) aprócska grafikai mivoltánál fogva jelentéktelen design elem, de ez mégsem igaz, hiszen ez is növelheti weboldalunk felhasználói élményét. Elég csak arra gondolnunk, hogy ha valaki elmenti az oldalunkat a kedvencei közé, vagy feliratkozik az RSS csatornánkra, akkor ott egy impozáns kis ikont is lát az név mellett. Ez a kis ikon egyszerűen elkészíthető, egyszerűen alkalmazható, mégis van néhány szempont és trükk, amelyekről nem árt tudni, ha maximálisan ki akarjuk használni a benne rejlő lehetőségeket. Az alábbi bejegyzésben e-grafikai elemet fogjuk górcső alá venni.

A támogatásukról

Mint a neve is sugallja ez egy ikon, tehát általában .ico kiterjesztéssel rendelkezik és 16×16 pixel méretben készül. Természetesen el lehet térni ettől a formátumtól és használhatunk nagyobb képméretet és más fájltípust is. Viszont kompatibilitási okokból nem biztos, hogy minden böngészőben meg is fognak jelenni.

Egy összefoglaló táblázat a formátumokról és azok támogatottságáról:

ICO PNG GIF Anim
GIF
JPEG SVG
Google Chrome Igen 4.0 4.0 Nem 4.0 Igen
Internet Explorer 5.0 Nem Nem Nem Nem Nem
Firefox 1.0 1.0 1.0 3.0 Igen Nem
Opera 7.0 7.0 7.0 7.0 7.0 9.6
Safari Igen 4.0 4.0 Nem 4.0 Nem

Mint látható, nagyon megoszlanak az egyes formátumok támogatottságai. Szintén megfigyelhető, hogy az általánosan elfogadott fájltípust az ICO, ezért én is ezt preferálom, illetve javaslom másoknak is használatra.

Az elkészítésről

Az alap favicon mérete tehát 16×16 pixel, de mivel néhány böngésző, illetve szolgáltatás nagyobb méretet is képes kezelni, így ajánlatos úgynevezett multi-resolution (több felbontású) ikont készíteni. Ez azt takarja, hogy egy fájlunk több méretben is tartalmazhatja ugyanazt az ikont, így ebben az esetben a böngésző a számára megfelelő méretet fogja használni.

Nem árt azonban figyelembe venni, hogy minél nagyobb a kép, vagy képek mérete, annál hosszabbra nyúlik a letöltési idő. Legtöbb esetben a 48×48-as grafika már jól mutat, ezért felesleges nagyobb méretben is elmenteni az ikonunkat. Szintén ebből az okból, ugyanez igaz a színmélységre is. Használhatunk ugyan akár 32bites palettát is, mégis törekedjünk arra, hogy a lehető legkisebbet válasszuk, amivel még jól mutat az ikonunk.

Ikon készítéshez én a Sib Icon Studiót használom, de igazából bármilyen program alkalmas rá, ami képes több felbontású ikonokat kezelni.
Persze ha mégis PNG, JPEG, vagy egyéb formátumok mellet döntünk, akkor azok mentéséhez kedvenc képszerkesztőnket használhatjuk. Viszont ebben az esetben már nem alkalmazhatjuk a multi-resolution megoldást, ezért érdemes alapból nagyobb ikont készíteni, mondjuk egy 48×48-ast.

A felhasználásról

Bármelyik formátumot is választjuk: standard ikont, vagy kép fájlt, figyelnünk kell arra, hogy más-más kódokat kell használnunk azok alkalmazásához.
Sajnos, hasonlóképpen a formátum támogatottsághoz, itt sem minden böngésző boldogul minden tag-el. Igazából az Internet Explorer a kivétel, ami csak a standard ICO fájlokat képes gond nélkül kezelni.

Az alábbi táblázat jól szemlélteti az alkalmazási módokat, illetve azok támogatásukat az elterjedt böngészőkben.

Google Chrome Internet Explorer Firefox Opera Safari
<link rel=”shortcut icon” href=”/facicon.ico” /> Igen Igen Igen Igen Igen
<link rel=”icon” type=”image/vnd.microsoft.icon”
href=”/favicon.ico” />
Igen Nem Igen Igen Igen
<link rel=”icon” type=”image/png”
href=”/favicon.png” />
Igen Nem Igen Igen Igen
<link rel=”icon” type=”image/gif”
href=”/favicon.gif” />
Igen Nem Igen Igen Igen
favicon.ico fájl elhelyezése a gyökér könyvtárban Igen Igen Igen Igen Igen

A különbség egyik esetben sem számot tevő, apró eltérés csupán a fájltípus meghatározásánál van. Azonban az utolsó sorban említett “favicon.ico fájl elhelyezése a gyökér könyvtárban” szolgál a legegyszerűbb felhasználási móddal. Legyen szó egyszerű, vagy több felbontású ikonról, ha azt a webhelyünk gyökér könyvtárában favicon.ico néven helyezzük el, akkor minden böngésző automatikusan használni fogja, nincs szükség külön HTML kódra.

Eszköz támogatás

Az egyes Apple eszközök (iPhone, iPad, iPod Touch), illetve frissebb verziójú Android operációs rendszerek támogatnak egy speciális “favicont” is (Apple Touch Icon), amely a Home screenen jelenik meg, ha oda készítünk az oldal gyorsabb elérése érdekében egy parancsikont.
Elkészítése és használata hasonló a böngészőknek szánt faviconéhoz, de mivel más szempontok és trükkök érvényesek rájuk, így erről egy következő bejegyzésben fogok kitérni.

Hozzászólások

Szóljon hozzá!

Új generációs játékok