2020-07-220 komment
Mi az a favicon? És hogyan alakítsd ki?
A favicon nem egyenlő a céged logójával, sok esetben ugyanis egyáltalán nem használható egy logó faviconként. De mi is az a favicon? És mire kell figyelned a kialakításánál? Elmondjuk.
Mivel a favicon mérete kicsi, ezért a logód nem feltétlenül alkalmas arra, hogy betöltse a favicon szerepét. Lehet hogy azt gondolod, nem igazán számít ez az apróság, ezért nem is fordítasz időt a designjának kialakítására, pedig egy rosszul kivitelezett favicon rossz fényt vet a céged image-ére.
Mi az a favicon?
Amikor megnyílik egy weboldal a böngésződben, akkor a címsor mellett látsz egy kis ikont. Ez a favicon. Ugyanez jelenik meg a könyvjelzők között, ha elmented az oldalt. A favicon tehát az a kicsi, adott esetben részben átlátszó ikon, mely megjeleníti a weboldalad, a céged, a márkád a weben. A favicon segít javítani a felhasználói élményen azáltal, hogy egy következetes jelzést küld az embereknek, megmutatva számukra, hogy hol járnak, illetve, hogy még mindig ugyanazon az oldalon böngésznek, ahová megérkeztek.
A favicon szó egyébként a favorite icon, azaz könyvjelző ikon szóból származik. A kifejezés még az Internet Explorer hőskorában született meg, amikor is a könyvjelzőket “favorites”-nek hívták. A favicont 2000 környékén adaptálta a W3C a HTML 4.0-ba, és ekkortól kezdett el következetesen megjelenni a böngészők ablakaiban.
A favicon tehát alkalmas arra, hogy a böngészőfüleknél beazonosítson egy oldalt, segítsen a könyvjelzőknél a megtalálásukban, de megjelenik az okostelefonokon is elmentett parancsikonként.
Hogyan alakítsd ki?
Miközben a favicon olyan, mint egy ikon, azt gondolhatod, hogy felesleges még ennek a megtervezésével is plusz köröket futni. Egy favicon azonban kifejezi a céged, a márkád és a weboldalad is azonosítja. Hozzájárul a felhasználói és a márkaélményhez. Ezért az alábbi tényezőkre figyelj a tervezésnél:
A faviconnak kapcsolódnia kell a márkád image-éhez, de 16, illetve 32 pixeles méret túl kicsi ahhoz, hogy a logód egy az egyben elfogadható legyen faviconként. Olyan azonosítható elemet kell használnod, mint mondjuk a cégneved első betűje, vagy a logóból kivett részlet, ami jól beazonosítja a márkát.
Minél kevesebb a betű, annál tisztább a design, vagyis a legjobb megoldás, ha egyetlen betű kerül csak bele. De ha a cégneved két szóból áll, akkor jó megoldás, ha kétbetűs rövidítést használsz. Mindenesetre győződj meg arról, hogy a logód lényegi elemei azért megjelennek benne, azaz világos legyen a designnyelv alapján a felhasználók számára, hogy ugyanarról a cégről van szó. Amit mindenképpen kerülj el, azok a szavak és az egyéb összetett megjelenés, mert abból semmi nem fog látszódni, ha a böngészőfülön jelenik meg.
A másik lehetőség, ha egy ábra a logód, melyen nincs szöveg. Ha egyszerű a grafika, akkor ideális lehet a megjelenése változtatás nélkül is faviconként (gondolj például a Nike logójára). Néha azonban szükség lehet némi egyszerűsítésre, hogy faviconként is működjön a logó. Ilyen például a Puma, ahol a logó része a Puma felirat is, így a favikonjuknál elhagyják a szöveget, és csak a grafika marad.
Azt se felejtsd el, hogy alapértelmezésben egy favicon négyzet alakú. Ha valami más formát akarsz, akkor átlátszó háttérre lesz szükséged. Arra is gondolj, hogy néhány rendszer lekerekíti a sarkokat, ami adott esetben átírhatja az általad elképzelteket.
Fájltípus
A favicon hagyományosan .ico kiterjesztéssel jelenik meg, de ez ma már nem kötelező. Bármilyen transzparens fájltípus megfelel a faviconnal szemben támasztott technikai követelménynek, tehát egy .png is használható, ugyanakkor a Microsoft ico formátumának is vannak előnyei, miközben általában elég jól működik minden böngésző esetében.
Méret
Ami a méretet illeti, régen minden favicon 16 pixeles kis négyzet volt, ez azonban ma már a nagyfelbontású mobilkijelzők esetén nem állja meg a helyét. A HTML 5 olyan szabványokat tartalmaz, melyek a különféle használathoz eltérő méreteket határoznak meg egészen az apró böngészőikontól a mobilos parancsikonokig. Vagyis az már nem elég, ha legyártasz egy 16 pixeles ikont.
Ezért is használ az ico formátum különböző méreteket egyetlen fájlban. A lényeg, hogy mindig lennie kell egy 16×16 pixeles verziónak, valamint legalább egy 32×32-esnek, de felsorakozhat még melléjük egy 128-as is. Ha csak 16 pixeles a faviconod, akkor bizonyos esetekben pixelessé fog válni, amikor a felhasználó nagyobb méretben látja. Az alábbi méretekben és felhasználási helyeken jelenhet meg egy favicon:
32×32: a legtöbb asztali böngésző esetében már ez a szabvány a korábbi 16 pixeles méret helyett
128×128: Chrome áruház és Windows kijelző ikon
152×152: iPad touch
167×167: iPad retina touch
180×180: iPhone retina
192×192: a Google Developer ajánlása
196×196: androidos parancsikon
Szín
Ahogy a formánál, úgy a színeknél is mértéktartásra kell törekedni, szintén a kis méret miatt. A legtöbb favicon éppen ezért mindössze egy háttérszínt és egy másik színt használ, mégpedig úgy, hogy a kettő között elegendő a kontraszt.
Némely design esetében kis méretben jól működik, ha szürkeányalatos színsémában jelenik meg. Azt kell csak megfontolnod, hogy a favicon így is ugyanazt az üzenetet közvetíti-e, mint a megszokott színekkel. Ha nem a színek számítanak a logódnál, akkor érdemes lehet kipróbálni a fekete-fehér verziót.
Egy további probléma, hogy a háttér bármilyen színű lehet, hiszen a böngészők témája változtatható, ezáltal pedig a keret színe változik. Úgy kell tehát kiválasztani a színt, hogy az lehetőleg bármilyen háttér esetében működjön.
Fontos, hogy legyen feltűnő! Ha meg van nyitva a böngészőben egy böngészőlap, akkor a favicon mindvégig látható a felhasználó számára. Még akkor is, ha éppen egy másik tabon jár. A favicon akkor jó, ha fel tudja hívni magára a figyelmet, mert ezzel nő az esélye annak, hogy meg fogja nyitni a lapot. El lehet ezt érni egyszerűen egy erős színnel, de ez nem feltétlenül passzol a logódhoz és a márkád identitásához. Ugyanígy egy szokatlan forma is figyelemfelhívó lehet, de ebben az esetben is figyelembe kell venni a weboldalad designját és a márkád esztétikáját.
Favicont nem feltétlenül Photoshopban érdemes megtervezni, hanem olyan eszközökkel, mint az Illustrator vagy a Sketch, majd innen exportálni a megfelelő méretekbe. Ez biztosítja azt, hogy a kijelzőfelbontás váltása ne érintse hátrányosan a faviconod.
A legfőbb szabály azonban az, hogy legyen a design egyszerű: ne használj túl sok színt, ne használj szöveget. Olyan legyen, hogy 16 pixeles megjelenésnél is értelmezhető maradjon. Ez persze kihívás, hiszen ekkora méretben nem könnyű bármi értelmes dolgot könnyen olvashatóvá tenni.