Mi az a favicon?

A favicon a “favourite icon” angol szóösszetétel rövidítése, jelentése “kedvenc ikon”. Bár ez egy alig látható, nagyon kis eleme egy weboldalnak, mégis érdemes rá odafigyelni, mert márkázás szempontjából sokat segíthet egy weboldalnak.

A favicon egy 16×16 pixel méretű kis kép a weboldal címe előtt.

Hogy válassz favicont?

Favicont akár az internetről is le tudsz tölteni, de sajátot is készíthetsz akár. A feladat egyik esetben sem bonyolult.

Néhány tanács:

  • ne használj szöveget a Faviconban, mert a 16×16 pixel méretbe nem fog beleférni
  • használj 8 bites depth-et, hogy kicsi legyen a fájl mérete (nincs szükség 32 bitre)
  • érdemes a logó egy részét vagy valami beszédes sziluettet választani, ami jól fog mutatni
  • és maximum 2-3 színt használj benne, különben összefolynak a dolgok
  • figyelj rá, hogy áttetsző legyen a kép háttere, ha nem teli, négyzet alapút gyártassz
  • ajánlott fájlformátum: .ico

Favicon készítése

Akár Photoshopban is el tudod magadnak készíteni, vagy használhatod hozzá a Real Favicon Generátort, ami az egyik legjobb favicon készítő program. Van több favicon maker és favicon creator is, de én ezt szeretem a legjobban.

Első lépés: válaszd ki a képet, amiből favicont akarsz készíteni és töltsd fel.

favicon generator

Második lépés: Töltsd le a program által generált fájlokat.

real favicon program

Itt sok méretet és formátumot fog készíteni. Nekünk csak a 16×16-os képre lesz szükségünk.

Favicon feltöltés

Szinte minden weboldalnál vagy sablonnál máshol lehet beállítani és feltölteni. De a legtöbbször a Setting / “Logo” beállításánál fogod megtalálni. Ha ismertebb témát használsz, akkor próbáld Theme Options / Logo / Favicon Options elérési utat. Vagy valami ehhez hasonlót.

Ha feltöltöd a képet (.ico formátumban például), akkor egy frissítés után már látnod is kell a kis ikont a böngészőben.

Ikon készítő programok listája

Az alábbi online programot javaslom ikon készítésre:

  • Icon Maker 1.4 (link)
  • Chasys Draw (link)
  • Graphics Gale (link)
  • ICO converter (link)

Leave a comment

Your email address will not be published. Required fields are marked *