Hogyan használd?
- Válaszd ki a forrást: betű/monogram, emoji vagy saját kép (PNG, JPG, SVG…).
- Állítsd be a hátteret, a formát (négyzet, lekerekített, kör) és a belső margót.
- Írd be az oldal nevét és a témaszínt a manifesthez.
- Töltsd le a ZIP-et, másold a fájlokat a weboldal gyökerébe, a HTML-kódot pedig a <head> részbe.
Mi van a csomagban?
A 2023 óta ajánlott, minimális, de teljes készlet:
| Fájl | Kinek kell |
|---|---|
| favicon.ico (16, 32, 48 px) | régi böngészők, Google-találat, Windows |
| icon.svg | modern böngészők, minden méretben éles |
| apple-touch-icon.png (180 px) | iPhone, iPad kezdőképernyő |
| icon-192.png, icon-512.png | Android, telepíthető webapp (PWA) |
| icon-mask.png (512 px) | Android adaptív ikon (maszkolható) |
| site.webmanifest | név, színek, ikonlista |
A tucatnyi régi méret (57, 72, 114, 144 px…) ma már fölösleges: a böngészők a fentiekből kicsinyítenek.
Apple és maszkolható ikon: miért külön?
Az Apple az átlátszó részeket feketével tölti ki, ezért a 180 px-es ikonnak mindig van háttere, és kap egy kis margót.
Az Android maszkolható ikonját a telefon körre, négyzetre vagy „kavicsra” vágja. A tartalomnak ezért a középső, 80%-os átmérőjű biztonsági zónába kell férnie; a generátor ezt magától beállítja.
Az SVG betűből és emojiból mindig készül. Képből csak akkor, ha SVG-t töltesz fel, mert egy PNG-t SVG-be csomagolni nem tenné élesebbé.
Miért nem látszik az új favicon?
- A böngésző erősen gyorsítótárazza: nyisd meg az oldalt privát ablakban, vagy töltsd újra Ctrl+F5-tel.
- A Google-találatban napok, néha hetek alatt frissül. Kerek, legalább 48 px-es, négyzetes ikont vár, ami a favicon.ico 48 px-es rétegéből megvan.
- Ellenőrizd, hogy a fájlok tényleg a gyökérben vannak (
https://pelda.hu/favicon.icomegnyílik-e).
A kép a gépeden marad: a feldolgozás a böngészőben történik, semmit nem töltünk fel.
Gyakori kérdések
Mekkora legyen a favicon?
A favicon.ico-ban 16, 32 és 48 px van; mellé 180, 192 és 512 px-es PNG és egy SVG. A csomag ezeket mind tartalmazza.
Hová tegyem a fájlokat?
A weboldal gyökérkönyvtárába (ahol az index.html van), a HTML-kódot pedig a <head> részbe.
Lehet emojiból favicon?
Igen. Az emoji a te géped betűtípusával rajzolódik, ezért a PNG-k úgy néznek ki, ahogy az előnézetben látod.
Kell a site.webmanifest?
Androidon és telepíthető webappnál igen; egyszerű oldalnál sem árt.