Favicon UX: milyen egy igazán jó favicon

A jó favicon egy egyszerű, kontrasztos jel, általában a logójeled vagy egy-két betű, amely 16x16 pixelen is olvasható marad világos és sötét böngészőfülön egyaránt, illeszkedik az arculatodhoz, és ritkán változik. Az útmutató minden további pontja (pixelillesztés, szín, margó, átlátszóság, fájlméret) ezeket a célokat szolgálja: hogy az oldalad azonnal megtalálható legyen több tucat nyitott fül között.

A favicon apró, mégis sok helyen megjelenik: böngészőfüleken, könyvjelzősávokban, az előzménylistákban, a fülkereső menüben, a Google mobilos és asztali keresési találataiban, valamint a telefonok kezdőképernyőjén. Ha sok fül van nyitva, a cím gyakran teljesen lecsonkolódik, és a favicon marad az egyetlen támpont. Ezért valódi navigációs elem, nem puszta dekoráció.

1. Olvashatóság 16x16-on

A klasszikus favicon mérete 16x16 CSS-pixel. Egy hagyományos kijelzőn ez szó szerint 256 pixel; egy 2x-es retina kijelzőn a böngésző ugyanarra a helyre általában egy 32x32-es képet választ. Bármit tervezel, át kell vészelnie ezt a kicsinyítést.

Maradj egyszerű

• Egyetlen forma vagy egy-két betű. Működik egy vastag betű, egy kör szimbólummal vagy egy egyszerű geometriai jel. Három betű vagy egy szó zajjá válik.
• Egyetlen fókuszpont. Ha nem tudod leírni az ikont öt szóval, túl bonyolult.
• Ne használj színátmenetet, árnyékot vagy finom textúrát. Kis méretben elmosódott foltokká válnak.

Igazítsd a pixelrácshoz

16x16-on egy fél pixellel a rácstól eltolt vonal két pixelsorra szétmosódik, és szürkének, lágynak látszik. Az éleket egész pixelhatárokra helyezd, szimmetrikus formáknál pedig használj páros szélességeket. Ha vektoros eszközből exportálsz, kapcsold be a pixelhez igazítást, vagy ellenőrizd a lekicsinyített eredményt, és javítsd kézzel.

Kerüld a vékony vonalakat

A 2 pixelnél vékonyabb vonalak 16x16-on (az ikon szélességének körülbelül 12 százaléka) hajlamosak eltűnni vagy méretről méretre vibrálni. Vastagítsd a vonalakat, hagyd el a belső részleteket, és vond össze a kis réseket. Egy vastag, kissé erőteljes jel általában jobban olvasható, mint egy részletgazdag logó hű miniatűrje.

Finomhangolás kézzel

Az ICO és PNG fájloknál nincs betűtípus-szerű hinting, ezért a kézi pixelszerkesztés a megfelelője: egyes pixeleket állítasz, hogy az ívek, átlók és a betűk belső terei (például az "a" vagy az "e" lyukai) élesek maradjanak. Az automatikus kicsinyítés jó első vázlat, de néhány kézzel elhelyezett pixel gyakran döntő különbséget jelent egy folt és egy felismerhető betű között. A MakeFav pixelszerkesztő pont erre készült: nyisd meg a 16x16-os vásznat, javítsd ki a problémás pixeleket, és exportálj.

2. Kontraszt világos és sötét füleken

A böngészők ma már gyakran sötét módban futnak, és sok felhasználónál a fülsáv eltér az oldal témájától. Egy sötétkék, átlátszó hátterű ikon tökéletes lehet egy fehér fülön, és szinte láthatatlan egy sötétszürkén. Mindig teszteld mindkettőt.

Gyakorlati megoldások

• Adj hozzá háttérformát. Egy tömör, lekerekített négyzet vagy kör arculati színben garantálja, hogy a jelnek saját kontrasztja van, a fültől függetlenül.
• Használj vékony körvonalat vagy glóriát. Egy 1 pixeles világosabb szegély egy sötét jel körül (vagy fordítva) mindkét témában láthatóvá teszi a körvonalat, de 16x16-on élesnek kell maradnia, ezért teszteld.
• Válassz közepes tónusú arculati színeket. Az erős kék, narancs, zöld vagy magenta általában fehér és közel fekete felületen is jól működik. A nagyon világos sárga vagy a nagyon sötét sötétkék kockázatos.
• Használj adaptív SVG faviconot. Az SVG tartalmazhat prefers-color-scheme media query-t, így az ikon a rendszertémával együtt változik.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Vedd figyelembe, hogy a media query az operációs rendszer vagy a böngésző témáját tükrözi, amelyet a fülsáv általában követ, de nem mindig. Az SVG faviconok támogatása is eltérő: a Chrome és a Firefox kezeli őket, a Safari történetileg lemaradt, ezért mindig tarts tartalékként PNG vagy ICO fájlokat. A tömör hátterű megoldás a legrobusztusabb, mert semmilyen témalogikát nem igényel.

3. Felismerhetőség és arculati egység

A logójelet (a szimbólumot vagy monogramot) használd, ne a teljes logót a szövegrésszel. A 16x16-os ikonban a szöveg olvashatatlan, egy széles vízszintes logó pedig négyzetbe zsugorítva csak egy apró csíkot hagy középen.

• Ha az arculatodnak van szimbóluma, egyszerűsítsd kis méretekhez, ne csak kicsinyítsd le. A kevesebb részletet tartalmazó "favicon-változat" bevett gyakorlat.
• Ha az arculatod csak szövegmárka, vedd az első betűt vagy egy jellegzetes betűpárt, és szedd az arculati betűtípusoddal, vastag vágásban.
• Tartsd a színeket összhangban a logóddal, az alkalmazásikonoddal és a közösségi média avatarjaiddal, hogy a felhasználó mindenhol ugyanarra a márkára ismerjen rá.

A megkülönböztethetőség ugyanolyan fontos, mint a hűség. Nézz meg egy sor fület: ha három másik oldal is kék kört használ, a tiéd nem fog kitűnni. Egy másik forma vagy szín többet ér, mint egy tökéletesen hű kicsinyítés.

4. Szín: korlátozott, telített paletta

Ilyen kevés pixelnél minden további szín zsúfoltságot okoz. Törekedj egy-két színre, legfeljebb még fehérre vagy feketére. A telített színek kis méretben jobban hordoznak, mint a pasztellek, amelyek hajlamosak beleolvadni a fül hátterébe.

Merítsünk egy kicsit a hozzáférhetőségi gondolkodásból. A WCAG legalább 3:1 kontrasztot kér az értelmes grafikus elemeknél (1.4.11 sikerkritérium, Nem szöveges kontraszt). A favicon formálisan nem tartozik ide, mivel böngészőfelület, nem oldaltartalom, de a 3:1 az ikonjel és háttere, valamint az ikon és a fül között megalapozott cél. Kerüld azt is, hogy bármit pusztán árnyalattal közölj: ugyanazon ikon piros és zöld változata sok színtévesztő számára megkülönböztethetetlen, ezért változtass formát, vagy adj hozzá szimbólumot.

5. Forma, margó és biztonságos zónák

Töltsd ki a négyzetet

A böngészőfülek a faviconokat rögzített, kis méretben jelenítik meg, így a plusz margó csak kisebbé teszi a jeledet. A szokásos fülikonoknál használd a vászon nagy részét, csak egy-két pixel levegővel, hogy a jel a lehető legnagyobb legyen.

Lekerekített vagy szögletes?

A böngészők általában nem vágják körbe a füleken lévő faviconokat, tehát amit megrajzolsz, azt látják a felhasználók. Egy enyhén lekerekített sarkú négyzet rendezettnek tűnik, és egységes hátteret ad; egy szabad formájú jel vagy kör átlátszó háttéren könnyedebb és egyedibb lehet. Mindkettő rendben van. Válassz egyet, és tartsd egységesen az egész ikonkészletet.

Apple touch ikonok

Az iOS saját lekerekített sarkokat ad az apple-touch-iconhoz (a szokásos méret 180x180). Teljes felületű négyzetet adj meg előre lekerekített sarkok nélkül, különben látható sötét vagy fehér csíkok maradhatnak a sarkokban.

Maszkolható ikonok Androidra és PWA-khoz

A maszkolható ikonokat az operációs rendszer körré, squircle-lé vagy más alakzattá vágja. Minden fontos tartalmat tarts a biztonságos zónán belül: az ikon közepén lévő körben, amelynek sugara az ikon szélességének 40 százaléka. A háttérszínt vidd ki egészen a szélekig, hogy bármilyen maszk jól nézzen ki. Ne használj fel újra egy szorosan, szélig érő fülfaviconot maszkolható ikonként, mert a maszk levágja.

6. Átlátszóság

Az átlátszóság rendben van a fülfaviconoknál, és ettől ül tisztán egy csak jelből álló ikon bármilyen fülszínen. Az Apple touch ikonoknál viszont gond: az iOS az átlátszó területeket tömör színnel (jellemzően feketével) tölti ki, ami tönkreteheti a dizájnt. Az apple-touch-iconnak mindig adj átlátszatlan hátteret arculati színben. Ugyanez igaz a maszkolható ikonokra és a legtöbb androidos kezdőképernyős felhasználásra, ahol az átlátszatlan háttér kiszámítható eredményt ad.

7. Stabilitás: ne változtasd túl gyakran

A favicon az ismétlés révén építi az ismertséget. A gyakori változtatás arra kényszeríti a felhasználókat, hogy újra megtanulják, melyik a te füled, és technikai fejfájást is okoz. A böngészők agresszíven gyorsítótárazzák a faviconokat, a Google pedig az oldalaidtól külön tölti le és tárolja őket, így egy új ikon megjelenése a keresési találatokban napokig vagy hetekig is eltarthat. A Google stabil favicon-URL-t, 48 pixel többszörösét kitevő méretű ikont (48x48, 96x96 stb.), valamint bejárható fájlt kér (amelyet a robots.txt nem blokkol). A favicon cseréjét kezeld újraarculati döntésként, ne szezonális díszítésként.

8. Értesítési állapotok és dinamikus faviconok

Egyes webalkalmazások megváltoztatják a faviconot olvasatlan üzenetek, felvételi állapot vagy hiba jelzésére. Jól csinálva hasznos; túlzásba víve idegesítő.

• Használj kis jelvényt (pontot vagy rövid számot) a sarokban, ne teljes átrajzolást. Az alapikonnak felismerhetőnek kell maradnia.
• Légy takarékos. A jelvényeket olyan eseményekre tartogasd, amelyek felhasználói beavatkozást igényelnek. Ne animáld folyamatosan az ikont.
• Korlátozd a számokat. 16x16-on csak egy-két számjegy olvasható; "137" helyett mutass "9+" feliratot vagy egyszerű pontot.
• Állítsd vissza gyorsan, amint a felhasználó elintézte a tételt, és állítsd vissza az alapértelmezett ikont.
• Ne támaszkodj csak a színre. A piros pontot az oldal címe is támassza alá, például "(3) Beérkezett", hogy az információ mindenki számára elérhető legyen.

A dinamikus faviconokat általában vászonra rajzolják, és az ikon link elem href attribútumának frissítésével cserélik be. Korlátozd a frissítések gyakoriságát, mert a folyamatosan változó favicon CPU-t használhat, és elvonhatja a felhasználók figyelmét.

9. Teljesítmény

A faviconok kicsik, de ezek is kérések, amelyeket el lehet rontani.

• Tartsd kicsin a fájlokat. Egy PNG favicon jellemzően néhány száz bájt és néhány kilobájt között van. Egy egyszerű SVG 1 KB alatt is maradhat.
• Kerüld a felfújt ICO fájlokat. Egy 16, 32 és 48 pixeles képeket tartalmazó, többméretű ICO elég. Egy 256x256-os kép beágyazása többszörösére növeli a fájlméretet anélkül, hogy a böngészőfüleken látható előnye lenne.
• Állíts be gyorsítótár-fejléceket. Az ikonokat hosszú Cache-Control élettartammal szolgáld ki, például public, max-age=31536000, immutable, és módosításkor használj verziózott vagy hash-elt fájlnevet.
• Deklaráld egyértelműen az ikonokat. A böngészők alapértelmezés szerint a /favicon.ico fájlt kérik le, ezért akkor is adj meg egyet, ha más ikonokat is deklarálsz, hogy elkerüld a 404-es zajt a naplóidban.
• Tömörítsd. Futtasd a PNG-ket veszteségmentes optimalizálón, az SVG-ket pedig minifikáld.

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

Ha mindezeket a fájlokat egyetlen forrásképből szeretnéd előállítani, a MakeFav favicon generátor létrehozza a szabványos készletet, a fejlesztői oldal pedig az integrációs lehetőségeket mutatja be.

10. Hozzáférhetőség

A faviconnak nincs alternatív szövege, és a képernyőolvasók nem jelentik be, ezért a hagyományos hozzáférhetőségi eszközök, például az alt attribútumok nem alkalmazhatók. Ami számít:

• Az oldalcím hordozza a jelentést. Írj egyedi, leíró <title> elemeket. Soha ne az ikonra hagyatkozz az állapot közlésében; minden jelvényt tükrözz a címben.
• Láthatóság gyengénlátóknak. A magas kontraszt, a vastag forma és a nagy jel segít azoknak, akik vizuálisan pásztázzák a füleket.
• Színfüggetlenség. Gondoskodj róla, hogy az állapotokat formák vagy betűk különböztessék meg, ne csak az árnyalat.
• Kevesebb zavaró tényező. Kerüld a villogó vagy animált faviconokat, amelyek problémát jelenthetnek a mozgásra érzékeny felhasználóknak.

Favicon UX ellenőrzőlista

Tesztelési ellenőrzőlista

Ne bízz a tervezőeszközöd nagy előnézetében. A valódi ikont teszteld valódi körülmények között:

1. Több böngésző. Ellenőrizd a Chrome-ot, a Firefoxot, a Safarit és az Edge-et, mert mindegyik kicsit másképp választ ikonokat és méreteket.
2. Világos és sötét mód. Válts az operációs rendszer és a böngésző témáján, és minden alkalommal nézd meg a fülsávot.
3. Retina és hagyományos kijelzők. Ellenőrizd 1x-es monitoron és 2x vagy 3x-os képernyőn, és nagyíts a böngészőben.
4. Könyvjelzősáv. Tedd könyvjelzőbe az oldalt, és nézd meg, olvasható-e még az ikon más oldalak mellett.
5. Sok fül. Nyiss meg 20 fület, és nézd meg, első pillantásra megtalálod-e a sajátodat.
6. Google keresési találat előnézete. Nézz meg egy mobilos keresési találatot, miután az ikont újra bejárták. Ne feledd, hogy a frissülés időbe telhet.
7. Kezdőképernyő. Add hozzá az oldalt az iOS és az Android kezdőképernyőjéhez, és ellenőrizd, hogy az ikon nincs levágva, nincsenek fekete sarkai, és nem túl kicsi a maszkján belül.
8. Technikai ellenőrzés. Futtasd át a domainedet a MakeFav favicon-ellenőrzőn, hogy megbizonyosodj róla: a fájlok léteznek, 200-as státuszt adnak vissza, megfelelő méretűek, és helyesen vannak deklarálva a HTML-ben.

Gyakorlati munkafolyamat

1. Indulj a logójeledből, és egyszerűsítsd egyetlen formára vagy betűre.
2. Hozz létre négyzetes vásznat tömör vagy formázott háttérrel, amely mindkét témában működik.
3. Exportáld a 32x32-es és a 16x16-os méretet, és finomítsd a kis változatot kézzel a pixelszerkesztőben.
4. Generáld le a teljes készletet (ICO, PNG, apple-touch-icon, manifest ikonok) a generátorral.
5. Add hozzá a link címkéket, állítsd be a gyorsítótár-fejléceket, telepítsd, és ellenőrizd az ellenőrzővel.

A favicon az oldalad egyik legkisebb, mégis leggyakrabban látott eleme. Néhány átgondolt döntés a kontraszt, az egyszerűség és az egység terén elérheti, hogy minden fülön, témában és eszközön jól működjön.

Gyakran ismételt kérdések

Mekkora legyen a favicon?

Tervezz 16x16-ra és 32x32-re a böngészőfülekhez (a böngésző nagy sűrűségű kijelzőkön a 32x32-est használja), adj meg egy 180x180-as apple-touch-icont iOS-hez, valamint 192x192 és 512x512-es PNG-ket Androidhoz és PWA-khoz. A Google keresési találataihoz használj négyzetes ikont, amelynek mérete 48 pixel többszöröse, például 48x48 vagy 96x96. Egy SVG forrás mindegyikre skálázható.

Használjam a teljes logómat faviconként?

Általában nem. A szövegrészt is tartalmazó teljes logók túl részletesek és túl szélesek egy négyzetes 16x16-os ikonhoz. Használd a logójelet vagy egy egy-két betűs monogramot, és egyszerűsítsd úgy, hogy aprón is felismerhető maradjon.

Hogyan működtessem a faviconomat sötét módban?

A legbiztonságosabb megoldás, ha az ikon saját tömör háttérformát vagy kontrasztos körvonalat kap, így nem függ a fül színétől. Alternatívaként használhatsz SVG faviconot prefers-color-scheme media query-vel a színek cseréjéhez, és tarts PNG vagy ICO tartalékot azoknak a böngészőknek, amelyek nem támogatják az SVG ikonokat. Mindig teszteld világos és sötét témában is.

Miért nem jelenik meg az új faviconom?

A böngészők hosszú ideig gyorsítótárazzák a faviconokat, a Google pedig saját másolatot tárol, amelyet a saját ütemezése szerint frissít, ami gyakran napokat vagy heteket vesz igénybe. Frissítsd az oldalt kényszerítve, töröld a böngésző gyorsítótárát, használj új, verziózott fájlnevet, és győződj meg róla, hogy a link címkék és a gyökérben lévő /favicon.ico a megfelelő fájlra mutatnak. A beállítást ellenőrizheted a MakeFav ellenőrzővel.

Jó ötlet értesítési jelvényeket megjeleníteni a favicon on?

Igen, ha takarékosan teszed. Egy kis pont vagy egy-két számjegyű szám segít a felhasználóknak észrevenni, hogy valami beavatkozást igényel, de a folyamatos animáció vagy a nagy számok rontják az olvashatóságot és a figyelmet. Az állapotot mindig tükrözd az oldalcímben, állítsd vissza az alapikont, amint a tétel el van intézve, és ne támaszkodj csak a színre.