favicon
Szűcs Máté
Szűcs Máté

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

Tartalomjegyzék

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.

features favicon
A Features.hu szöveg alapú faviconja, mellette a Twitter logó alapú ikonja

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.

böngésző előzmények
Az előzmények listája Chrome böngészőben

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

böngésző könyvjelzők
A könyvjelzősáv a Google jól ismert ikonjaival

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.

A Github faviconja

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.

ikon generátor

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.

favicon beállítások
favicon generátor

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 letöltés

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.

favicon.cc

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.

wordpress testreszabás menü
Ezt a menüpontot kell keresned
wordpress favicon
Majd ezt a beállítást

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

elementor favicon
Az Elementor globális beállításai

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

Mi az a favicon?

A favicon a “favourite icon” kifejezés rövidítése és a honlapodat azonosító kis ikon elnevezése.

Mekkora felbontású favicont érdemes készítenem?

Javasolt az 512×512 pixeles méret használata.

Milyen kiterjesztésű favicont érdemes készítenem?

A legtöbb böngésző támogatja a PNG formátum használatát, így ez a javasolt kiterjesztés.

Tetszett a cikk?
Iratkozz fel hírlevelünkre és olvass még több hasonló tartalmat!

Olvass tovább, ezek a cikkek is érdekelhetnek:

Megosztás itt: facebook
Megosztás itt: twitter
Megosztás itt: linkedin
Megosztás itt: email
Megosztás itt: pocket
small_c_popup.png

200+ Ingyenes marketing eszköz​

Emeld magasabb szintre vállalkozásod teljesítményét teljesen ingyenes marketing eszköztárunkkal. Több, mint 200 eszköz havidíj nélkül.

A weboldalon cookie-kat használunk, hogy minél jobb élményt tudjunk nyújtani