Figyeltél már valaha azokra az apró ikonokra a böngészőfülek tetején? Mi a helyzet akkor, amikor elment egy parancsikont egy weboldalra vagy oldalra az interneten? Ezeket az apró képeket, vagy favikonokat kifejezetten erre a célra tervezték.

Meglehetősen éles különbség van aközött, hogy mitől lesz jó vagy rossz egy apró ikon. Megbocsátható lenne, ha azt gondolnád, hogy a tervezési döntések apró méretarányban kevésbé számítanak. De egy rosszul megtervezett favicon rossz fényt vethet a márkádra.

Most megnézzük, mik ezek az ikonok, alapvető tervezési technikák velük kapcsolatban, és milyen előírásokat kell követned.

Mi az a favicon?

Egyszerűen szólva, a favicon egy kicsi, átlátszó ikon, amelyet egy weboldal, márka vagy vállalkozás megjelenítésére használnak. A faviconok segítenek javítani a felhasználói élményt azáltal, hogy következetes jelölést biztosítanak, amely a weboldal látogatóinak azt üzeni, hogy a navigáció során ugyanazon az oldalon tartózkodnak, köszönhetően az egységes vizuális megjelenítésnek.

A favicon kifejezés a “kedvenc ikon” szóból származik. Ez a terminológia az Internet Explorer idejéből származik, amikor a könyvjelzővel ellátott oldalakat “kedvenceknek” nevezték. A favicont először a World Wide Web Consortium (W3C) fogadta el a HTML 4.0-hoz, 2000 körül, és a következő évben kezdett következetesebben megjelenni a böngészőablakokban.

A faviconokat a böngésző lapjai közötti gyors váltásra, egy könyvjelző azonosítására, vagy egy elmentett alkalmazás vagy parancsikon keresésére használhatja a telefonján. A vizuális azonosító az, amit a legtöbb ember arra használ, hogy ezeket a linkeket és oldalakat összekapcsolja az elérésükhöz szükséges megfelelő gombbal.

Tradicionálisan a favikonok .ico fájlformátumot használtak, de ez ma már kevésbé probléma. A legtöbb esetben bármilyen átlátszó fájltípus működik; gyakran a .png formátumot választják.

Technikai megfontolások

Egy időben minden favikon szuper kicsi, 16 pixeles négyzet volt. Ez ma már nem így van, mivel egyre több nagy felbontású retina képernyőt és gyorsbillentyű ikonokat kell figyelembe venni.

A HTML 5 szabványokat tartalmaz a favikonok számára, többféle méretben, mindenféle felhasználásra, az apró böngésző ikonoktól a számítógép dokkolóállomás ikonokon át a kezdőképernyő ikonokig. Már nincs is igazán szükséged arra a 16 pixeles négyzetre.

Modern favicon méretek és használat:

• 32×32: A legtöbb asztali böngésző szabványa (a 16×16 helyett)
• 128×128: Chrome áruház és a Windows 8 kis csillagképe
• 152×152: iPad touch ikon
• 167×167: iPad Retina touch ikon
• 180×180: iPhone Retina ikon
• 192×192: Google Developer webes alkalmazásajánló
• 196×196: Android kezdőképernyő ikon

Best Practices

Míg úgy tűnik, hogy egy ilyen ikon talán jelentéktelen a teljes design szempontjából, ez messze nem igaz.

A favicon sokat elmond a márkáról és a weboldalról. A felhasználók elvárják őket, ha nem is tudják név szerint beazonosítani. Ezek az apró elemek hozzájárulnak az általános felhasználói élményhez és a márkához.

Hogyan hozhatja ki a legtöbbet a faviconból?

Tartsa szem előtt ezeket a legjobb gyakorlatokat:

• A faviconnak kapcsolódnia kell a márkaidentitásához, de gyakran túl kicsi ahhoz, hogy egy teljes logót tartalmazzon. Használjon egy azonosítható elemet, például a márkanév első betűjét vagy egy apró jelet, amelyet a márkával együtt használ.
• Gondoljon a formára. A faviconok helye alapértelmezés szerint négyzet alakú. Ha mást szeretne, átlátszó háttérre van szükség. Egyes rendszerek lekerekíthetik a széleket is, így ezt a szempontot is szem előtt kell tartanod.
• Gondoskodj arról, hogy a fájl kicsi legyen, de ne túl kicsi. Töltsön fel olyan méretű favicont, amely a legtöbb eszközön megfelelően megjelenik, de nem akadályozza a teljes webhelyet.
• Kerülje a szavakat vagy összetett elemeket a favicon kialakításában.
• Ragaszkodjon egy egyszerű, áramvonalas színpalettához a favicon esetében. Túl kicsi ahhoz, hogy megőrülj a színekkel. Ezért a legtöbb ilyen apró ikon alig használ mást, mint egy háttér- és egy előtérszínt, a kettő közötti nagy kontraszttal.

Tervezési technikák

Mivel a favicon kicsi, hajlamos lehet arra, hogy szeszélyből tervezze meg a Photoshopban. Ez nem a hosszú élettartam szempontjából ajánlott út.

A faviconját egy vektoros eszközben, például az Illustratorban vagy a Sketchben készítse el, majd exportálja a tervet a szükséges méretekre. Ez biztosítja, hogy a képernyőfelbontások változásával olyan faviconod lesz, amely kiállja az idő próbáját. (Mindössze annyit kell tennie, hogy új méretben újraexportálja.)

A faviconok legfőbb vizuális tervezési szabálya, hogy a design egyszerű legyen. Ne vidd túlzásba a színeket, a szöveget vagy a márkaelemeket. Ha megnézed a példákat ebben a bejegyzésben, látni fogod, hogy szinte minden ilyen apró elem olvasható 16 x 16 pixeles méretben.

Kerüld az olyan trükköket, mint az animáció; ezek itt csak útban vannak.

Fogd fel tervezési kihívásnak. Elég nehéz lehet olyasmit létrehozni, ami olyan kicsi, hogy könnyen olvasható legyen.

Mentsd el a fájlt átlátszó png-ként. Ez egy jó szokás, amely biztosítja, hogy ne legyenek furcsa élek vagy határok a faviconon. (Semmi sem néz ki rosszabbul, mint az ikont körülvevő szaggatott fehér szél.)

A jó tervezés elveit alkalmazza. Soha nem tudhatod, hogy a favicont mikor használják valami nagyobb, jobban látható méretben. Egy weboldal könyvjelzőjének mentése például használhatja a favicon nagyméretű változatát. Ugyanez igaz a dokkolásra és még a keresőmotorok találati előnézeteiben is.

Még ha kicsi is, ez az ikon képviseli a márkáját. Tervezze meg jól.

Ha már kész a fájl, néhány sor kóddal hozzáadhatja a weboldalához. (Sok WordPress téma és weboldalépítő már tartalmazza a favicon elemet, így erre a lépésre nem is kell gondolnia.)

A képfájl feltöltése után illessze be a következő kódot a webhelye fejlécébe, megjegyezve, hogy az “iconpath” és az “iconname” az adott fájlelemre utal:

Példák

Az alábbi példák néhány márkaelemet tartalmaznak kapcsolódó faviconokkal. (Mindenképpen kattintson át, és mutasson egy kis szeretetet a tervezőknek a Dribbble-oldalukon.)

Prodigi.team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

Favicon sablon

TEC Logo lehetőség 2

Következtetés

Ami a faviconok méretéből hiányzik, a felhasználói élményben pótolják. Ezek az ikonok navigációs eszközként szolgálnak az Ön webhelyének látogatói és azok számára, akik hajlamosak túl sok böngészőfület nyitva hagyni.

Általánosságban a favicon egy gyors vizuális azonosító, amely összeköti a felhasználót az Ön digitális jelenlétével. Gondoskodjon róla, hogy a márkáját a lehető legjobban és legpontosabban képviselje.