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):
az két dolgot jelenthet:
- A honlap készítője nem ért hozzá, hogyan cserélhetné ki a favicont
- 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...
