Mi az a favicon és hogyan hozd létre?

A favicon nem más, mint az az apró, de annál feltűnőbb kis kép a böngésződ fülein, amelyek egy-egy weboldalt segítenek beazonosítani. Ha a a tekinteted erről a bejegyzésről a böngésződ fentebb található részére viszed, akkor máris láthatod, hogy miről van szó.

A mi esetünkben fehér háttéren egy fekete “F” betűt láthatsz. Más füleken is láthatsz hasonló négyzet alakú kis ikonokat. Általában az adott weboldal mögött álló vállalkozás nevének kezdőbetűi, vagy a vállalkozás logója látható kisebb méretben.

A mai bejegyzésben arról írok, hogy mi is az a favicon és, hogy miért is fontos ez a kisméretű elem a weboldalad és márkád számára. Ha érdekel, hogy miért érdemes a saját ikonodat készítened és hogy, hogyan teheted ezt meg egyszerűen, akkor olvass tovább!

Mi az a favicon és miért fontos?

Kezdjük az elején, honnan is jön a favicon elnevezés? A favicon a “favourite icon”, azaz kedvenc ikon elnevezésből ered. 1999-ben vezette be a Microsoft az Internet Explorer böngészőben, azzal a céllal, hogy segítsen a felhasználóknak megkülönböztetni a könyvjelzők közé tett weboldalakat. Akkoriban a könyvjelzőket kedvenceknek hívták, így adta magát az elnevezés.

Manapság a mindennapos internethasználat részét képezik a faviconok. Szinte minden weboldal rendelkezik ezzel az elemmel, nagyban segítve a könnyebb navigációt.

Azonban nem csak a böngészők lapfülein láthatod a miniatűr ikonokat. Rengeteg egyéb helyen segítik a hatékonyabb internethasználatot.

Megtalálhatod őket a böngészési előzmények listájában.

A könyvjelzősávodban is fellelhetőek.

Mobilon is megjelennek, akár ikonként is, de többek a Google is kísérletezik a megjelenítésükkel időről-időre.

Ezek az apró elemek segítenek a gyorsabb navigációban és könnyen beazonosíthatóvá teszik a weblapodat. Sokan nem gondolnak rá, de a márkaismertséget is növelik, hiszen ha valaki sokat jár a weboldaladon előbb utóbb megjegyzi az ikonodat. Ez segíthet különbözni a versenytársaktól.

Biztosan te is ismersz néhány favicont, amit akár most is fejből le tudnál rajzolni, Facebook, Youtube, vagy a kedvenc híroldalad?

Ezen vállalkozások, mind a logóikat használják ikonként, azonban ez nem jelenti azt, hogy csak a logó használható fel. Nézzük, hogy érdemes választani.

Mi legyen a faviconod?

Alapesetben érdemes a logódból kiindulni. A favicon egy 1:1 méretarányú négyzet, így ha nem túl eltérő a logód méretaránya és kisebb méretben is jól kivehető a logó, akkor érdemes ezzel kezdened. Érdemes nagyon kevés szöveget, maximum 1-2 betűt megjeleníteni, hiszen hosszabb szöveg ennyire kis méretben egyáltalán nem lesz olvasható.

Optimális esetben a márkád arculatának kialakításakor a grafikus erre is gondol és elkészíti számodra. Ha nem ez a helyzet az sem különösebb probléma, viszonylag kevés opció létezik a megfelelő ikon kiválasztására.

A másik gyakori eset, hogy szöveges logód van. Ilyenkor egy, maximum két betűt célszerű kiválasztani, természetesen ezek a kezdőbetűk lesznek. Szóval ezt az 1-2 betűt kell 1:1 méretarányú négyzetbe helyezned.

Formai követelmények

Ha szeretnéd, hogy a faviconod minden készüléken megfelelően jelenjen meg, akkor érdemes figyelembe venned néhány egyszerű iránymutatást. Olyan ez, mint a reszponzivitás kérdése, ahány készülék, annyi szabvány.

Méret

Régebben az elvárt méretarány 16×16 pixel volt, azonban a mai nagyfelbontású kijelzőkön ez már nagyon pixelesedik. Érdemes a kisebb felbontású verziókat is elkészíteni, de javaslom a 512×512 pixeles, nagy felbontás használatát, hogy mindenütt hiba nélkül jelenjen meg az ikonod.

Formátum

Kezdetben az ico formátum volt csak engedélyezett, de manapság a legtöbb böngésző már egész sok kiterjesztést támogat. A legjobban a png fájltípussal fogsz járni, ugyanis a legtöbb modern böngésző ezt támogatja, így ennek a megjelenítésével nem fogsz problémába ütközni.

Favicon elkészítése

Most hogy tudjuk milyen formátumot és felbontást érdemes választanunk, kezdjünk bele a megvalósításba!

Manapság már rengeteg képszerkesztő alkalmazás közül választhatunk. Ha tudod használni a Photoshopot, Illustratort, vagy bármelyik más komolyabb képszerkesztőt, akkor viszonylag könnyen elkészítheted a logód feldolgozásával a faviconodat. Ha ez nem opció, akkor sincs probléma, számtalan ikon készítést segítő program található a neten.

Én két alkalmazást szoktam javasolni az ügyfeleinknek, személyes preferencia, hogy ki melyiket részesíti előnyben. A két szoftver a Real Favicon Generator és a Favicon.cc.

Real Favicon Generator

Ez az alkalmazás meglévő grafikai elemekből dolgozik. A már kész logót kell feltöltened és ebből fog ikonokat készíteni a különböző eszközök számára.

Ne lepődj meg, rengeteg beállítási lehetőséget adhatsz meg miután feltöltötted a logódat. A legtöbb beállításon nem is kell módosítani, akkor érdemes hozzájuk nyúlni, ha áttetsző, vagy épp színes hátteret szeretnél.

Ha készen vagy a beállításokkal, akkor kattints az oldal alján található kék színű gombra. Ezt követően egy tömörített fájlt fogsz kapni, amelyet megnyitva megtalálhatod a faviconodat különböző felbontásokban.

Favicon.cc

Ezt az eszközt akkor javaslom, ha nincs még logód, így szükséged van egy egyedileg előállított ikonra. Ezzel az alkalmazással épp ezt tudod megtenni.

Faék egyszerűségű a kezelőfelület. A négyzetrácsot kell kitöltened négyzetenként az általad kiválasztott színekkel. Majd ha elkészültél, akkor a download gombra kattintva letöltheted az elkészült ikont.

Favicon beállítása WordPress alapú weboldalon

Elérkeztünk a folyamat utolsó lépéséhez. Nincs más hátra, mint beállítani az elkészült ikont.

WordPress weboldal esetén néhány kattintással beállíthatod a kívánt ikont. Ahány sablon, annyiféle beállítással találkozhatsz. A leggyakrabban a “Megjelenés” menü “Testreszabás” menüpontját választva, majd azon belül a “Honlap azonosítása” almenüben találod meg a beállítási lehetőségeket.

Ha Elementort használsz, akkor a webhelybeállítások közt is megtalálhatod a lehetőséget.

Készen is vagyunk. Ha követted az itt leírtakat, akkor a weboldaladat megtekintve már láthatod is az új faviconodat a böngésző aktuális fülén.

Gyakran ismételt kérdések