A „favicon méret” keresésre még mindig 2014-ből örökölt, tizenöt fájlos listák jelennek meg. Valójában ma hat méret lefedi a böngészőfüleket, a keresési találatokat, az iOS-t, az Androidot és a PWA-kat. Megmutatjuk, melyek ezek és miért szükségesek.
A valóban szükséges méretek
Minden sor az ajánlott csomag egy dokumentált felhasználását jelöli. A táblázat a történelmi változatok halmozása helyett kis, egymással együttműködő készletet javasol.
| Fájl | Méret | Felhasználás |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Fülek, könyvjelzők, régebbi böngészők, keresőrobotok |
| favicon.svg | vektoros, négyzetes | Modern böngészők, minden méretben éles, sötét módot is kezel |
| favicon-96x96.png | 96×96 | Google-találatok mobilon |
| apple-touch-icon.png | 180×180 | iOS- és iPadOS-kezdőképernyő, átlátszóság nélkül |
| web-app-manifest-192x192.png | 192×192 | Android-kezdőképernyő, a webes jegyzékben megadva |
| web-app-manifest-512x512.png | 512×512 | PWA-indítóképernyő, a „maskable” változat |
Miért kerül a 16, 32 és 48 ugyanabba az .ico fájlba?
Az ICO tárolóformátum: egyetlen fájl több képet tartalmazhat, és a böngésző választja ki a megjelenítéshez megfelelőt. Erre szükség is van, hiszen a kért méret a felhasználási környezettől függ.
A 16×16 a hagyományos kijelző böngészőfüléhez való. A 32×32 nagy képpontsűrűségű kijelzőkhöz és más böngészőfelületekhez ad változatot. A 48×48 kiegészíti a készletet, és követi a Google által a keresési faviconokhoz dokumentált, 48-cal osztható méret szabályát is.
A leggyakoribb hiba a kizárólag 16×16-os képet tartalmazó .ico: Retina-kijelzőn a böngésző felnagyítja, így az ikon állandóan elmosódottnak látszik.
180×180 az iOS-hez, 192 és 512 az Androidhoz
Az iOS a kezdőképernyő ikonjához nem a webes jegyzéket olvassa, hanem az apple-touch-icon címkét keresi. Egyetlen, 180×180-as méret elég az újabb iPhone-okhoz és iPadekhez. A régebbi eszközökhöz a rendszer kicsinyíti le.
Az Android ehelyett a webes jegyzéket használja. Két bejegyzés elegendő: 192×192 a kezdőképernyőhöz, 512×512 az alkalmazásként telepített webhely indítóképernyőjéhez. Az 512-es változat purpose értéke legyen „maskable”: úgy kell megrajzolni, hogy a körre vagy lekerekített négyzetre vágást is elviselje.
Maszkolható ikonnál a fontos részek maradjanak a középső 80%-on belül. Az ezen kívüli területet a telefongyártótól függően levághatják.
Milyen forrásképből indulj?
A legjobb kiindulópont az SVG, mert veszteség nélkül méretezhető az összes felsorolt méretre. Ennek hiányában használj legalább 512×512 képpontos, négyzetes PNG-t, hogy még az Android indítóikonja is kicsinyítéssel, ne nagyítással készüljön.
A szöveget tartalmazó vízszintes logó nem működik 16×16-ban: a szó néhány elmosódott képponttá válik. Emeld ki a jelképet, vagy indulj egy-két betűből kontrasztos háttéren.
Végül ellenőrizd a kontrasztot világos és sötét háttéren is: a fekete logó eltűnik a sötét böngészőfülön. Pontosan erre szolgál az SVG-favicon sötét változata.
Méretek, amelyekre már nincs szükség
A régebbi generátorok történelmi integrációkhoz is készítenek fájlokat, például mstile-150x150.png és browserconfig.xml alapú Windows-csempékhez. Csak akkor add hozzá ezeket, ha a támogatott felületeid között kifejezetten szerepelnek.
Az apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 és 152x152 hosszú sorozata abból az időből származik, amikor az iOS nem tudott átméretezni. Egyetlen 180×180-as kép kiváltja őket.
A fölösleges deklarációk eltávolítása egyszerűsíti a kódtárat és a HTML-t. Meglévő integráció törlése előtt ellenőrizd a saját célböngészőidet és platformjaidat.
Elsődleges források
Gyakori kérdések
Szükség van még favicon.ico fájlra?
Igen, de csak a webhely gyökérkönyvtárában. A modern böngészők az SVG-t részesítik előnyben, sok keresőrobot, gyűjtőoldal és levelezőprogram azonban HTML-olvasás nélkül kéri a /favicon.ico címet. Néhány kilobájtos fájl: tartsd meg.
Milyen faviconméretet használ a Google a találatokban?
A Google 48 képpont többszörösének megfelelő oldalhosszúságot kér, és rendszerint 48×48-ban jelenít meg. Egy 96×96-os PNG vagy SVG könnyen lefedi ezt. Az ikon legyen feltérképezhető, a robots.txt ne tiltsa.
Lehet téglalap alakú a favicon?
Technikailag igen, vizuálisan nem célszerű. Minden megjelenítési hely négyzetet tart fenn: a téglalap torzul vagy üres sávok közé kerül. Mindig négyzetből indulj, szükség esetén térközzel a jelkép körül.