A favicon nem egyenl\u0151 a c\u00e9ged log\u00f3j\u00e1val, sok esetben ugyanis egy\u00e1ltal\u00e1n nem haszn\u00e1lhat\u00f3 egy log\u00f3 faviconk\u00e9nt. De mi is az a favicon? \u00c9s mire kell figyelned a kialak\u00edt\u00e1s\u00e1n\u00e1l? Elmondjuk. <\/strong><\/p>\n\n\n\n\n\n\n\n

Mivel a favicon m\u00e9rete kicsi, ez\u00e9rt a log\u00f3d nem felt\u00e9tlen\u00fcl alkalmas arra, hogy bet\u00f6ltse a favicon szerep\u00e9t. Lehet hogy azt gondolod, nem igaz\u00e1n sz\u00e1m\u00edt ez az apr\u00f3s\u00e1g, ez\u00e9rt nem is ford\u00edtasz id\u0151t a designj\u00e1nak kialak\u00edt\u00e1s\u00e1ra, pedig egy rosszul kivitelezett favicon rossz f\u00e9nyt vet a c\u00e9ged image-\u00e9re.<\/p>\n\n\n\n

Mi az a favicon?<\/h2>\n\n\n\n

Amikor megny\u00edlik egy weboldal a b\u00f6ng\u00e9sz\u0151dben, akkor a c\u00edmsor mellett l\u00e1tsz egy kis ikont. Ez a favicon. Ugyanez jelenik meg a k\u00f6nyvjelz\u0151k k\u00f6z\u00f6tt, ha elmented az oldalt. A favicon teh\u00e1t az a kicsi, adott esetben r\u00e9szben \u00e1tl\u00e1tsz\u00f3 ikon, mely megjelen\u00edti a weboldalad, a c\u00e9ged, a m\u00e1rk\u00e1d a weben. A favicon seg\u00edt jav\u00edtani a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyen az\u00e1ltal, hogy egy k\u00f6vetkezetes jelz\u00e9st k\u00fcld az embereknek, megmutatva sz\u00e1mukra, hogy hol j\u00e1rnak, illetve, hogy m\u00e9g mindig ugyanazon az oldalon b\u00f6ng\u00e9sznek, ahov\u00e1 meg\u00e9rkeztek.<\/p>\n\n\n\n

A favicon sz\u00f3 egy\u00e9bk\u00e9nt a favorite icon, azaz k\u00f6nyvjelz\u0151 ikon sz\u00f3b\u00f3l sz\u00e1rmazik. A kifejez\u00e9s m\u00e9g az Internet Explorer h\u0151skor\u00e1ban sz\u00fcletett meg, amikor is a k\u00f6nyvjelz\u0151ket \u201cfavorites\u201d-nek h\u00edvt\u00e1k. A favicont 2000 k\u00f6rny\u00e9k\u00e9n adapt\u00e1lta a W3C a HTML 4.0-ba, \u00e9s ekkort\u00f3l kezdett el k\u00f6vetkezetesen megjelenni a b\u00f6ng\u00e9sz\u0151k ablakaiban. <\/p>\n\n\n\n

A favicon teh\u00e1t alkalmas arra, hogy a b\u00f6ng\u00e9sz\u0151f\u00fclekn\u00e9l beazonos\u00edtson egy oldalt, seg\u00edtsen a k\u00f6nyvjelz\u0151kn\u00e9l a megtal\u00e1l\u00e1sukban, de megjelenik az okostelefonokon is elmentett parancsikonk\u00e9nt. <\/p>\n\n\n\n

Hogyan alak\u00edtsd ki?<\/h2>\n\n\n\n

Mik\u00f6zben a favicon olyan, mint egy ikon, azt gondolhatod, hogy felesleges m\u00e9g ennek a megtervez\u00e9s\u00e9vel is plusz k\u00f6r\u00f6ket futni. Egy favicon azonban kifejezi a c\u00e9ged, a m\u00e1rk\u00e1d \u00e9s a weboldalad is azonos\u00edtja. Hozz\u00e1j\u00e1rul a felhaszn\u00e1l\u00f3i \u00e9s a m\u00e1rka\u00e9lm\u00e9nyhez. Ez\u00e9rt az al\u00e1bbi t\u00e9nyez\u0151kre figyelj a tervez\u00e9sn\u00e9l:<\/p>\n\n\n\n

A faviconnak kapcsol\u00f3dnia kell a m\u00e1rk\u00e1d image-\u00e9hez, de 16, illetve 32 pixeles m\u00e9ret t\u00fal kicsi ahhoz, hogy a log\u00f3d egy az egyben elfogadhat\u00f3 legyen faviconk\u00e9nt. Olyan azonos\u00edthat\u00f3 elemet kell haszn\u00e1lnod, mint mondjuk a c\u00e9gneved els\u0151 bet\u0171je, vagy a log\u00f3b\u00f3l kivett r\u00e9szlet, ami j\u00f3l beazonos\u00edtja a m\u00e1rk\u00e1t.<\/p>\n\n\n\n

<\/figure>\n\n\n\n

Min\u00e9l kevesebb a bet\u0171, ann\u00e1l tiszt\u00e1bb a design, vagyis a legjobb megold\u00e1s, ha egyetlen bet\u0171 ker\u00fcl csak bele. De ha a c\u00e9gneved k\u00e9t sz\u00f3b\u00f3l \u00e1ll, akkor j\u00f3 megold\u00e1s, ha k\u00e9tbet\u0171s r\u00f6vid\u00edt\u00e9st haszn\u00e1lsz. Mindenesetre gy\u0151z\u0151dj meg arr\u00f3l, hogy a log\u00f3d l\u00e9nyegi elemei az\u00e9rt megjelennek benne, azaz vil\u00e1gos legyen a designnyelv alapj\u00e1n a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, hogy ugyanarr\u00f3l a c\u00e9gr\u0151l van sz\u00f3. Amit mindenk\u00e9ppen ker\u00fclj el, azok a szavak \u00e9s az egy\u00e9b \u00f6sszetett megjelen\u00e9s, mert abb\u00f3l semmi nem fog l\u00e1tsz\u00f3dni, ha a b\u00f6ng\u00e9sz\u0151f\u00fcl\u00f6n jelenik meg.<\/p>\n\n\n\n

A m\u00e1sik lehet\u0151s\u00e9g, ha egy \u00e1bra a log\u00f3d, melyen nincs sz\u00f6veg. Ha egyszer\u0171 a grafika, akkor ide\u00e1lis lehet a megjelen\u00e9se v\u00e1ltoztat\u00e1s n\u00e9lk\u00fcl is faviconk\u00e9nt (gondolj p\u00e9ld\u00e1ul a Nike log\u00f3j\u00e1ra). N\u00e9ha azonban sz\u00fcks\u00e9g lehet n\u00e9mi egyszer\u0171s\u00edt\u00e9sre, hogy faviconk\u00e9nt is m\u0171k\u00f6dj\u00f6n a log\u00f3. Ilyen p\u00e9ld\u00e1ul a Puma, ahol a log\u00f3 r\u00e9sze a Puma felirat is, \u00edgy a favikonjukn\u00e1l elhagyj\u00e1k a sz\u00f6veget, \u00e9s csak a grafika marad.<\/p>\n\n\n\n

Azt se felejtsd el, hogy alap\u00e9rtelmez\u00e9sben egy favicon n\u00e9gyzet alak\u00fa. Ha valami m\u00e1s form\u00e1t akarsz, akkor \u00e1tl\u00e1tsz\u00f3 h\u00e1tt\u00e9rre lesz sz\u00fcks\u00e9ged. Arra is gondolj, hogy n\u00e9h\u00e1ny rendszer lekerek\u00edti a sarkokat, ami adott esetben \u00e1t\u00edrhatja az \u00e1ltalad elk\u00e9pzelteket. <\/p>\n\n\n\n

F\u00e1jlt\u00edpus<\/h2>\n\n\n\n

A favicon hagyom\u00e1nyosan .ico kiterjeszt\u00e9ssel jelenik meg, de ez ma m\u00e1r nem k\u00f6telez\u0151. B\u00e1rmilyen transzparens f\u00e1jlt\u00edpus megfelel a faviconnal szemben t\u00e1masztott technikai k\u00f6vetelm\u00e9nynek, teh\u00e1t egy .png is haszn\u00e1lhat\u00f3, ugyanakkor a Microsoft ico form\u00e1tum\u00e1nak is vannak el\u0151nyei, mik\u00f6zben \u00e1ltal\u00e1ban el\u00e9g j\u00f3l m\u0171k\u00f6dik minden b\u00f6ng\u00e9sz\u0151 eset\u00e9ben.<\/p>\n\n\n\n

M\u00e9ret<\/h2>\n\n\n\n

Ami a m\u00e9retet illeti, r\u00e9gen minden favicon 16 pixeles kis n\u00e9gyzet volt, ez azonban ma m\u00e1r a nagyfelbont\u00e1s\u00fa mobilkijelz\u0151k eset\u00e9n nem \u00e1llja meg a hely\u00e9t. A HTML 5 olyan szabv\u00e1nyokat tartalmaz, melyek a k\u00fcl\u00f6nf\u00e9le haszn\u00e1lathoz elt\u00e9r\u0151 m\u00e9reteket hat\u00e1roznak meg eg\u00e9szen az apr\u00f3 b\u00f6ng\u00e9sz\u0151ikont\u00f3l a mobilos parancsikonokig. Vagyis az m\u00e1r nem el\u00e9g, ha legy\u00e1rtasz egy 16 pixeles ikont. <\/p>\n\n\n\n

Ez\u00e9rt is haszn\u00e1l az ico form\u00e1tum k\u00fcl\u00f6nb\u00f6z\u0151 m\u00e9reteket egyetlen f\u00e1jlban. A l\u00e9nyeg, hogy mindig lennie kell egy 16\u00d716 pixeles verzi\u00f3nak, valamint legal\u00e1bb egy 32\u00d732-esnek, de felsorakozhat m\u00e9g mell\u00e9j\u00fck egy 128-as is. Ha csak 16 pixeles a faviconod, akkor bizonyos esetekben pixeless\u00e9 fog v\u00e1lni, amikor a felhaszn\u00e1l\u00f3 nagyobb m\u00e9retben l\u00e1tja. Az al\u00e1bbi m\u00e9retekben \u00e9s felhaszn\u00e1l\u00e1si helyeken jelenhet meg egy favicon:<\/p>\n\n\n\n

32×32: a legt\u00f6bb asztali b\u00f6ng\u00e9sz\u0151 eset\u00e9ben m\u00e1r ez a szabv\u00e1ny a kor\u00e1bbi 16 pixeles m\u00e9ret helyett
\n128×128: Chrome \u00e1ruh\u00e1z \u00e9s Windows kijelz\u0151 ikon
\n152×152: iPad touch
\n167×167: iPad retina touch
\n180×180: iPhone retina
\n192×192: a Google Developer aj\u00e1nl\u00e1sa
\n196×196: androidos parancsikon<\/p>\n\n\n\n

Sz\u00edn<\/h2>\n\n\n\n

Ahogy a form\u00e1n\u00e1l, \u00fagy a sz\u00ednekn\u00e9l is m\u00e9rt\u00e9ktart\u00e1sra kell t\u00f6rekedni, szint\u00e9n a kis m\u00e9ret miatt. A legt\u00f6bb favicon \u00e9ppen ez\u00e9rt mind\u00f6ssze egy h\u00e1tt\u00e9rsz\u00ednt \u00e9s egy m\u00e1sik sz\u00ednt haszn\u00e1l, m\u00e9gpedig \u00fagy, hogy a kett\u0151 k\u00f6z\u00f6tt elegend\u0151 a kontraszt.<\/p>\n\n\n\n

N\u00e9mely design eset\u00e9ben kis m\u00e9retben j\u00f3l m\u0171k\u00f6dik, ha sz\u00fcrke\u00e1nyalatos sz\u00edns\u00e9m\u00e1ban jelenik meg. Azt kell csak megfontolnod, hogy a favicon \u00edgy is ugyanazt az \u00fczenetet k\u00f6zvet\u00edti-e, mint a megszokott sz\u00ednekkel. Ha nem a sz\u00ednek sz\u00e1m\u00edtanak a log\u00f3dn\u00e1l, akkor \u00e9rdemes lehet kipr\u00f3b\u00e1lni a fekete-feh\u00e9r verzi\u00f3t.<\/p>\n\n\n\n

Egy tov\u00e1bbi probl\u00e9ma, hogy a h\u00e1tt\u00e9r b\u00e1rmilyen sz\u00edn\u0171 lehet, hiszen a b\u00f6ng\u00e9sz\u0151k t\u00e9m\u00e1ja v\u00e1ltoztathat\u00f3, ez\u00e1ltal pedig a keret sz\u00edne v\u00e1ltozik. \u00dagy kell teh\u00e1t kiv\u00e1lasztani a sz\u00ednt, hogy az lehet\u0151leg b\u00e1rmilyen h\u00e1tt\u00e9r eset\u00e9ben m\u0171k\u00f6dj\u00f6n. <\/p>\n\n\n\n

Fontos, hogy legyen felt\u0171n\u0151! Ha meg van nyitva a b\u00f6ng\u00e9sz\u0151ben egy b\u00f6ng\u00e9sz\u0151lap, akkor a favicon mindv\u00e9gig l\u00e1that\u00f3 a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra. M\u00e9g akkor is, ha \u00e9ppen egy m\u00e1sik tabon j\u00e1r. A favicon akkor j\u00f3, ha fel tudja h\u00edvni mag\u00e1ra a figyelmet, mert ezzel n\u0151 az es\u00e9lye annak, hogy meg fogja nyitni a lapot. El lehet ezt \u00e9rni egyszer\u0171en egy er\u0151s sz\u00ednnel, de ez nem felt\u00e9tlen\u00fcl passzol a log\u00f3dhoz \u00e9s a m\u00e1rk\u00e1d identit\u00e1s\u00e1hoz. Ugyan\u00edgy egy szokatlan forma is figyelemfelh\u00edv\u00f3 lehet, de ebben az esetben is figyelembe kell venni a weboldalad designj\u00e1t \u00e9s a m\u00e1rk\u00e1d eszt\u00e9tik\u00e1j\u00e1t.<\/p>\n\n\n\n

Favicont nem felt\u00e9tlen\u00fcl Photoshopban \u00e9rdemes megtervezni, hanem olyan eszk\u00f6z\u00f6kkel, mint az Illustrator vagy a Sketch, majd innen export\u00e1lni a megfelel\u0151 m\u00e9retekbe. Ez biztos\u00edtja azt, hogy a kijelz\u0151felbont\u00e1s v\u00e1lt\u00e1sa ne \u00e9rintse h\u00e1tr\u00e1nyosan a faviconod. <\/p>\n\n\n\n

A legf\u0151bb szab\u00e1ly azonban az, hogy legyen a design egyszer\u0171: ne haszn\u00e1lj t\u00fal sok sz\u00ednt, ne haszn\u00e1lj sz\u00f6veget. Olyan legyen, hogy 16 pixeles megjelen\u00e9sn\u00e9l is \u00e9rtelmezhet\u0151 maradjon. Ez persze kih\u00edv\u00e1s, hiszen ekkora m\u00e9retben nem k\u00f6nny\u0171 b\u00e1rmi \u00e9rtelmes dolgot k\u00f6nnyen olvashat\u00f3v\u00e1 tenni.<\/p>\n\r\n