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.

The post Mi az a favicon? És hogyan alakítsd ki? appeared first on Webshark Blog.