Hogyan készíts faviconot
A méretek, formátumok és a kód, amelyek kellenek ahhoz, hogy a favicon mindenhol megjelenjen.
A favicon az a kis ikon, amely a böngészőlapon, a könyvjelzőkben és a Google mobilos találatai között az oldalad neve mellett látható. Ha hiányzik, az oldal befejezetlennek tűnik, ha elmosódott, az még rosszabb. Egy jó favicon elkészítése néhány perc.
Kezdd a megfelelő grafikával
A favicon akár 16 × 16 pixeles méretben is megjelenik, ezért egy feliratos teljes logó olvashatatlan lesz. Használj egyszerű jelet: a logód szimbólumát, egyetlen kezdőbetűt vagy egy markáns formát a márkád színében. Úgy teszteld, hogy a képernyőn negyedakkorára kicsinyíted: ha még mindig felismerhető, működni fog.
Indulj egy legalább 512 × 512 pixeles négyzetes képből, ideális esetben átlátszó hátterű PNG-ből. Ha a logód nem négyzetes, vágd négyzetesre, az arányt 1:1-re rögzítve.
A szükséges fájlok
| Fájl | Méret | Ki használja |
|---|---|---|
| favicon.ico | 16, 32 és 48 pixeles változatokat tartalmaz | Böngészők, régebbi rendszerek, az alapértelmezett /favicon.ico kérés |
| Egy PNG ikon | 32 × 32 és 192 × 192 | Modern böngészők, androidos kezdőképernyők |
| apple-touch-icon.png | 180 × 180 | Kezdőképernyős könyvjelzők iPhone-on és iPaden |
A Google Kereső a találatok között is használja a faviconodat. Legalább 48 × 48 pixeles négyzetnek kell lennie, és a feltérképezőrobotnak el kell tudnia érni az oldaladon.
Az ICO fájl elkészítése
Húzd be a négyzetes PNG-det a PNG-ből ICO konverterbe. Valódi .ico fájlt készít, amely tartalmazza a böngészők által kért kis méreteket. A PNG változatokhoz méretezd át ugyanazt a négyzetes képet 180, 192 és 32 pixelre.
Hozzáadás az oldaladhoz
Töltsd fel a favicon.ico fájlt az oldalad gyökérkönyvtárába, hogy elérhető legyen a weboldalad.hu/favicon.ico címen, és add hozzá ezeket a sorokat az oldalaid head részébe:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/hu/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/hu/apple-touch-icon.png">
WordPressben menj az Appearance, Customize, Site Identity részhez, és tölts fel egy négyzetes képet Site Iconként; a méreteket a WordPress elkészíti helyetted. A Shopify, a Wix és a Squarespace mindegyikében van favicon-beállítás a webhely vagy a sablon beállításai között.
Ha az új favicon nem jelenik meg
A böngészők makacsul gyorsítótárazzák a faviconokat. Nyisd meg az oldalt privát ablakban, vagy nyisd meg közvetlenül a weboldalad.hu/favicon.ico címet, és frissítsd. A Google-nek napokba vagy hetekbe is telhet, mire a keresési találatokban frissíti az ikont, miután újra feltérképezte a kezdőlapodat.
Gyakori hibák
- A teljes logó használata apró szöveggel, amely 16 pixelen elmosódott folttá válik.
- Fehér ikon átlátszó háttéren, amely eltűnik a világos böngészőlapokon.
- Csak egy apró, 16 pixeles fájl biztosítása, amely a nagy felbontású kijelzőkön elmosódottnak tűnik.
- A /favicon.ico címen lévő fájl elfelejtése, pedig egyes böngészők és feltérképezőrobotok ezt kérik le, bármit is mondjon az oldal.