A favicon a webáruházad apró ikonja: ez látszik a böngészőfülön, a könyvjelzők között és a Google találati listájában is. Pár perc alatt beállítható, és onnantól mindenhol a te márkádat mutatja. Megmutatjuk, mire jó, és hogyan töltheted fel.
Mi az a favicon?
A favicon egy kis, négyzet alakú kép, ami a webáruházad nevéhez kapcsolódik. Általában a logó egyszerűsített változata, például a kezdőbetű vagy a logó jele.
Ha nem töltesz fel ikont, a böngésző egy általános helyettesítő ikont mutat a boltod mellett, így a neved mellől hiányzik a márkád.
Miért éri meg beállítani?
- Könnyen megtalálják a boltodat. Ha a vásárlónál sok fül van nyitva, a feliratok lerövidülnek, és sokszor csak az ikon alapján talál vissza hozzád.
- Kitűnsz a Google találatai közül. A favicon a találat mellett is megjelenhet. Nem a helyezésedet javítja, hanem azt, hogy a neved mellé odakerül a márkád.
- Gondozott benyomást kelt. Az általános helyettesítő ikon befejezetlennek hat, a saját ikon viszont azt üzeni, hogy a részletekre is figyelsz.
- Mobilon is a te ikonod látszik. Ha valaki a kezdőképernyőjére teszi a boltodat, az Apple és Android ikon jelenik meg, úgy, mint egy alkalmazásnál.
Hogyan töltsd fel?
- Készíts egy négyzet alakú, nagy felbontású képet a logódból, például 512×512 pixeleset.
- Generáld le belőle az ikonokat, például a realfavicongenerator.net oldalon.
- Az adminban nyisd meg a Grafika → Ikonok menüpontot.
- „A böngészőben megjelenő ikon” részben kattints a „Fájl kiválasztása” gombra, és minden sorhoz a megfelelő formátumú és méretű fájlt válaszd ki.
- Add meg a PWA-színeket hexadecimális kóddal, például #ffffff formában.
- Kattints a „Változtatások mentése” gombra. A sikeres mentést „A beállítások mentése megtörtént.” üzenet jelzi. Ezután nyisd meg a boltodat, és ellenőrizd az ikont a böngészőfülön.
| Mező az adminban | Mire való? |
|---|---|
| Favicon .ico (16/32/48 px) | Régebbi böngészők, általános tartalék |
| Favicon .svg | Modern böngészők, minden méretben éles |
| Favicon .png 16×16 és 32×32 px | Böngészőfül, könyvjelzők |
| Favicon .png 96×96 px | Nagyobb felbontást igénylő megjelenések |
| Apple touch icon .png 180×180 px | iPhone és iPad kezdőképernyő |
| Android/PWA ikon .png 192×192 px | Androidos kezdőképernyő |
| Android/PWA ikon .png 512×512 px | Nagy méretű megjelenés, indulóképernyő |
| PWA: témaszín | A mobil állapotsáv és az asztali alkalmazásablak címsorának színe |
| PWA: háttérszín | Az alkalmazásablak háttere, amíg a tartalom betölt |
Nem kell minden mezőt kitöltened, mert a ki nem töltött ikonokat a rendszer egyszerűen nem használja. Jó alap az .ico, a 96×96-os PNG és az Apple touch icon, vektoros logó esetén az .svg is. Feltöltés után minden sor alatt megjelenik a fájl neve és a „Böngészőikon törlése” jelölőnégyzet, amellyel később eltávolíthatod az ikont.
Mire figyelj?
- Legyen egyszerű. Kis méretben a hosszú logófelirat olvashatatlan, ezért inkább egy betűt vagy jelet használj.
- Legyen négyzetes és elég nagy. A Google útmutatója 1:1-es képarányt kér, és 48×48 pixelnél nagyobb ikont ajánl.
- Hagyj helyet a mobilos ikonokon. Az Apple és Android ikonnál adj a logó köré kis margót és háttérszínt.
- Nézd meg világos és sötét módban is. Egy sötét, átlátszó hátterű ikon elveszhet a sötét böngészőfülön.
- Ne cserélgesd gyakran. A Google-nek idő kell az új ikon feldolgozásához.
Ha feltöltés után még a régi ikont látod, a böngésződ valószínűleg a tárolt változatot mutatja, ezért próbáld ki privát ablakban. A Google találati listájában a csere néhány naptól néhány hétig is tarthat, és a megjelenést a Google nem garantálja.
Hozzászólás írása