A favicon egy kis kép ami a böngésző fülön jelenik meg illetve kedvenceknél, könyvjelzőknél.

 

favicon magyarázata

 

A képen a nyilak jelölik a favicon-okat.

A favicon-nak speciális képformátuma van és favicon.ico a neve. A böngészők számára 16x16px méretű kép szükséges de a .ico formátum egyszerre több méretű képet is képes rétegekben tárolni és azt megjeleníteni amit a böngésző kér tőle. Ez azért fontos mert például az Apple termékek vagy a Windows 10 már nem a 16x16px formátumot szeretnék használni hanem nagyobbat és ezeken a felületeken a 16x16px szétesik, életlen lesz.

Ezt a problémát a böngészők egy új generációja fogja megoldani, ha támogatják majd az .svg formátumú favicont. Az svg tetszőlegesen nagyítható minőségromlás nélkül. Jelenleg csak a Firefox támogatja.

Egyes böngészők megjelenítik a favicont ha az nem a szabványos .ico formátum hanem .png .jpg. Ez azonban nem szabvány szerinti favicon. Nem biztos, hogy mindenhol látszódni fog.

Érdekes tény, hogy egyes cégek úgy tervezik a logójukat, hogy 16x16 pixeles méretben is jól nézzen ki. Ez a kiindulási alapjuk.

A mobileszközök megjelenésével a favicon fogalma kicsit átalakult. Sajnos nincs egységes szabvány, minden gyártó máshogy szeretné könyvjelzőzni a honlapokat, és a gyártók is időnként meggondolják magukat a méret tekintetében.

 

Favicon 2017

Jelenleg egy honlapnak ahhoz, hogy megfelelőlen könyvjelzőzhető legyen a legelterjedtebb eszközökön, a következő faviconokkal kell rendelkeznie

16x16px klasszikus favicon a böngészőknek. Neve: favicon.ico

16x16px png favicon a böngészőknek. Neve: favicon-16x16.png

32x32px png favicon a böngészőknek. Neve: favicon-32x32.png

76x76px png favicon az Apple termékeknek. Neve: apple-touch-icon.png

96x96px Android Chrome részére. Neve: android-chrome-96x96.png

150x150px Microsoft telefonok részére. Neve: mstile-150x150.png

Ezen kívül kell még egy browserconfig.xml, és egy manifest.json fájl. Ezek szöveges állományok, szakemberek értik mire való. A favicon készítő programok elkészítik.

 

A favicon-ról itt egy hasznos cikk:

https://css-tricks.com/favicon-quiz/

 

A favicon elkészítése

A legegyszerűbb rajzoló programok nem támogatják, valami speciálisabb szükséges pl:Gimp, Photoshop. Szerencsére az Interneten van rengeteg online favicon konverter. "Free favicon converter online" szavakra érdemes rákeresni és biztos találsz rá megoldást.

Ez például egy jól használható oldal:

https://realfavicongenerator.net/

 

Ha ilyet látsz egy kész honlapon

(a háromból valamelyiket):

Drupal, Joomla, Wordpress faviconok

az két dolgot jelenthet:

  1. A honlap készítője nem ért hozzá, hogyan cserélhetné ki a favicont
  2. A honlap készítője rettentően lusta

Ezek a tartalomkezelők gyári faviconjai. Sajnos nagyon sok egyébként teljesen jól kinéző honlapon "elfelejtik" kicserélni ezt a kis képecskét. Még 15 percet kellett volna belefektetni a projektbe...