Mi is az a favicon?

Faviconnak hívjuk azokat a pici ikonokat, melyeket a böngésző ablakainak fülén látsz. Ilyen például a WebSuli oldalán a képen látható kis fogaskerék: favicon

Miért használunk faviconokat?

A favicon arra például nagyon jó, hogy megkülönböztesse az oldalad a többi épp nyitva lévő oldaltól. Biztosan te is szoktál úgy böngészni, hogy bizonyos dolgokat “új fülön” vagy “új lapon” nyitsz meg, ahogy azt a böngészők hívják. Egy idő után ezek már szinte kezelhetetlenül sokan vannak, és ilyenkor bizony egy jellegzetes favicon sokat segít a tájékozódásban. Így a felhasználó tudja, hogy melyik is a te oldalad. Igen, ez azért még messze van a márkaépítéstől, de ezzel is tudod magad azonosítani a felhasználó szemében, és ez a lényeg.

Milyen lehet egy favicon kinézete?

Kinézetre bármilyen formát ölthet, de általában valamilyen jellemző alakja van. Mondjuk a logó egy részlete, vagy a weboldal funkciójának szimbóluma (például a gmail postafióknak a boríték a faviconja). De ez csak egy opció, tetszőleges alakzat választható faviconnak.

Favicon mérete

Fontos, hogy a favicon mérete pusztán 16 x 16px lehet. Ez fér el szépen azon a pici helyen. Ha kisebbet töltesz fel, akkor nagyítani fogja a böngésző, ha nem egyforma oldalarányút, akkor pedig egyenlővé alakítja, mindkét esetben torzul a kép, ami feltűnően csúnyává tudja varázsolni a megjelenést.

Favicon fájlformátuma

Alapértelmezésben a .ico kiterjesztés az elfogadott, régen a böngészők ezt a verziót jelenítették meg helyesen. Manapság azonban a szabvány kicsit kiterjedt, és más formátumú képek is szépen megjelennek a böngészőkben.

Gyakori az olyan alakzat, ami nem teljesen fedi be a 16 x 16px területet, hanem néhol “kilátszik a háttér”. Például a fenti fogaskerekes példánál is láthatod, hogy a kerék közepe, és a körülötte lévő rész nincs kitöltve. Ezen okból kifolyólag, mivel nem néz ki túl jól, ha ezek a területek mondjuk fehérek, és az alakzatunk egy fehér négyzetben van benne, szokás olyan formátumot használni, ami támogatja az áttetszőséget. Ilyen például a .png, vagy a .gif kiterjesztés.

Hogyan készíts favicont?

Ha rajzolod: bármilyen képszerkesztővel. Akár paint-ben is tudsz rajzolni egy ilyen pici ábrát.

Ha van hozzá képed: ha van valamilyen jellegzetes rajzod, elemed, amit használnál, akkor csak méretezd át a képet 16 x 16px-re.

Ha online terveznéd: van számos weboldal, ahol lehet ilyen ikonokat készíteni, sőt meglévők közül is lehet válogatni.

Néhány favicon készítő weboldal: 

http://www.favicon.cc/

http://www.favicon.hu/

http://www.favicon-generator.org/

 

Ezek is érdekelhetnek, nézd csak!