Favicon-formátumok magyarázata: ICO, PNG, SVG és amire a böngészőknek szükségük van

Miért ilyen furcsán bonyolultak még mindig a faviconok

Egy favicon egyetlen kis képnek tűnik, de a böngésző felülete, a könyvjelzők, a fülek, a kitűzött parancsikonok, a keresési találatok, a mobil kezdőképernyők és a progresszív webalkalmazás-telepítések metszéspontjában helyezkedik el. Minden kontextusnak kissé eltérő elvárásai vannak.

Ezért tűnnek gyakran kuszának a faviconokkal kapcsolatos tanácsok. Egyes csapatok csak egyetlen favicon.ico fájlt adnak ki, mert régen ez elég volt. Mások tucatnyi fájlt generálnak anélkül, hogy tudnák, melyiket használják ténylegesen. Az ésszerű középút kisebb: értsük meg, miben jó az ICO, a PNG és az SVG, majd szállítsunk egy kompakt készletet, amely lefedi a mai böngészőket és a gyakori eszközkörnyezeteket.

A favicon nem az a hely, ahol egy képfeldolgozási pipeline-t kell megmutatni. Itt az unalmas, egyértelmű és kompatibilis megoldás a cél.

ICO: a régi formátum, amely nem hajlandó eltűnni

Az ICO a klasszikus Windows ikonkonténer. Több bitmap képet is tartalmazhat különböző méretekben, jellemzően 16×16, 32×32 és 48×48 pixeles változatokat. Ez azért fontos, mert egy favicon nagyon kicsiben jelenhet meg egy böngészőfülön, nagyobban egy könyvjelzőlistában, és megint másként a Windows parancsikonoknál.

A fontos részlet az, hogy az ICO konténer, nem egyszerűen egy kép. Egy jó favicon.ico általában több raszteres méretet tartalmaz, hogy a böngésző vagy az operációs rendszer a legközelebbi megfelelőt választhassa ahelyett, hogy egyetlen apró bitmapet méretezne át.

Az ICO továbbra is három okból hasznos:

• A böngészők automatikusan kérhetik a /favicon.ico fájlt, még akkor is, ha nem hivatkozunk rá a HTML-ben.
• Egyes régebbi böngészők és integrációk elvárják.
• Biztonságos tartalék, amikor az újabb ikondeklarációkat figyelmen kívül hagyják.

Ez nem jelenti azt, hogy az ICO legyen az egyetlen ikon. Körülményes szerkeszteni, nem különösebben barátságos a modern munkafolyamatokhoz, és gyenge választás egy márkajelzés elsődleges forrásaként. Kezeljük kompatibilitási tartalékként.

A gyakorlatban tegyünk egy valódi /favicon.ico fájlt a webhely gyökerébe. Ne szolgáljunk ki ott 404-et, hacsak nem szeretjük a zajos naplókat és a felesleges böngésző-újrapróbálkozásokat.

PNG: a megbízható igásló

A PNG továbbra is a legkiszámíthatóbb raszteres formátum a faviconokhoz és a touch ikonokhoz. Támogatja az átlátszóságot, széles körben támogatott, és következetesen viselkedik a böngészőkben és platformokon.

Faviconoknál a PNG akkor hasznos, ha explicit pixelméretű ikonokat szeretnénk, például 32×32 vagy 48×48 méretben. Mobil kezdőképernyő-ikonoknál a PNG egyes környezetekben gyakorlatilag kötelező. Az Apple touch ikonok például normál éles használatban PNG-alapúak.

Néhány gyakorlati szabály segít:

• Vektoros forrásból exportáljunk, ne egy eleve kicsi bitmapből.
• Tegyük olvashatóvá az ikont 16×16 méretben, mielőtt a nagyobb méretekkel foglalkoznánk.
• Adjunk hozzá elegendő belső margót, hogy a jel ne tűnjön levágottnak lekerekített vagy maszkolt kontextusokban.
• Kerüljük az apró szöveget, a vékony vonalakat és a részletes illusztrációkat.

A PNG-tömörítésen általában nem érdemes túl sokat rágódni faviconok esetén, mert a fájlok aprók. Ennek ellenére ne szállítsunk 500 KB-os touch ikont csak azért, mert közvetlenül egy dizájnexportból jött. Ha már amúgy is átnézzük a tágabb képhasználati döntéseket, a képformátumokról szóló döntések a modern weben mögötti fegyelmezett gondolkodás itt is érvényes: a feladathoz válasszunk formátumot, ne azért, mert divatos.

SVG: a modern, rugalmas lehetőség

Az SVG faviconok vonzóak, mert felbontásfüggetlenek. Egyetlen kis fájl sok méretben tisztán renderelhető, és közvetlenül kódban is szerkeszthető, vagy dizájnszoftverből exportálható.

A modern Chromium, Firefox és Safari verziók támogatják az SVG faviconokat. Ez sok webhely számára jó elsődleges favicon-formátummá teszi az SVG-t, különösen akkor, ha az ikon egyszerű logó, jel vagy geometrikus márkajel.

Az SVG faviconoknak azonban vannak korlátaik.

Először is az SVG legyen önálló. Ne támaszkodjon külső betűkészletekre, távoli képekre vagy szkriptekre. A böngészők korlátozásokat alkalmaznak a képként használt SVG-re, és még ha valami működik is az egyik böngészőben, egy másikban meghiúsulhat.

Másodszor, maradjon vizuálisan egyszerű. Az SVG nem oldja meg varázsütésre a 16 pixeles problémát. Egy részletes vektoros illusztráció továbbra is elmosódott lesz, ha egy fülbe zsugorítjuk.

Harmadszor, óvatosan bánjunk a dinamikus stílusozással. Egyes csapatok prefers-color-scheme használatával alakítják az SVG favicont a sötét és világos böngészőtémákhoz. Ez működhet, de a böngészők viselkedése és a gyorsítótárazás egyenetlen lehet. Ha fontos a márkafelismerés, egyetlen robusztus ikon gyakran jobb, mint egy okos adaptív megoldás.

Az SVG jó forrás és jó modern szállítási formátum. De nem ok arra, hogy kihagyjuk a tartalék fájlokat.

Mit keresnek valójában a böngészők

A böngészők két fő módon fedezik fel a faviconokat: explicit HTML-hivatkozásokkal és implicit gyökérkérésekkel.

Az implicit viselkedés a régi módszer: ha a böngésző ikont szeretne, és még nem talált egyet, kérheti a /favicon.ico fájlt. Ezért marad hasznos a gyökérben lévő ICO fájl még modern webhelyeken is.

Az explicit viselkedés a dokumentum head részében lévő <link> elemeket használja. Egy kompakt modern beállítás így néz ki:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

A manifest ezután nagyobb PNG ikonokra mutathat, amelyeket telepíthető webalkalmazások használnak:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Ez nem az egyetlen érvényes beállítás, de jó kiindulási alap. SVG-t ad a modern böngészőknek, hagyományos ICO tartalékot biztosít, lefedi az iOS kezdőképernyőre mentést, és támogatja az alkalmazástelepítési kontextusokat.

A favicon-készlet, amelyet a legtöbb webhelynek érdemes szállítania

Egy átlagos marketingoldalhoz, dokumentációs oldalhoz, SaaS alkalmazáshoz vagy kiadványhoz ez a készlet elegendő:

• /favicon.ico, amely 16×16 és 32×32 méretet tartalmaz, opcionálisan 48×48-at is.
• /icon.svg mint modern, skálázható favicon.
• /apple-touch-icon.png 180×180 méretben.
• /icon-192.png és /icon-512.png, ha van web app manifest.

Hozzáadhatunk több méretet, ha egy platformnak konkrét követelménye van, de ne generáljunk tíz fájlt megszokásból. Minden extra fájl egy újabb dolog, amit gyorsítótárazni, elfelejteni, rosszul elnevezni vagy egy rebrand után elavultan hagyni lehet.

Ha a webhely nem telepíthető, és nincs manifestje, lehet, hogy nincs szükség a 192 és 512 pixeles ikonokra. Ha a webhely alkalmazásként viselkedik, valószínűleg szükség van rájuk.

Gyakori hibamódok

A leggyakoribb faviconhibák nem művészeti problémák. Kézbesítési problémák.

Az egyik az agresszív gyorsítótárazás. A böngészők makacsul ragaszkodnak a faviconokhoz. Tesztelés közben előfordulhat, hogy egy módosított ikon csak akkor jelenik meg, ha teljes frissítést végzünk, töröljük a webhelyadatokat, új fájlnevet használunk, vagy friss profilban tesztelünk. Éles rebrandeknél a /icon.svg?v=2 módosítása segíthet a HTML-ben, de a gyökérben lévő /favicon.ico nehezebb ügy, mert a böngészők közvetlenül kérik. A fájl cseréje és a gyorsítótárak kivárása gyakran a munka része.

Egy másik gyakori probléma a rossz MIME-típus. Az SVG-t image/svg+xml, a PNG-t image/png, az ICO-t pedig jellemzően image/x-icon vagy image/vnd.microsoft.icon típusként kell kiszolgálni. Sok böngésző elnéző, de nem minden kontextus az. Ha valami csak egy böngészőben hibázik, először vizsgáljuk meg a hálózati választ, mielőtt újrarajzolnánk az ikont. Ugyanazok a szokások érvényesek itt is, mint amikor átirányításokat és HTTP-fejléceket hibakeresünk éles környezetben: a tényleges választ nézzük, ne azt, amit a CMS állítása szerint kiszolgál.

A harmadik gond a dizájn sűrűsége. Azok a logók, amelyek gyönyörűen működnek egy webhely fejlécében, gyakran elbuknak faviconként. A fül ikonja kegyetlen teszt. Távolítsuk el a szavakat, egyszerűsítsük az alakzatokat, növeljük a kontrasztot, és teszteljünk valós méretekben. Ha az ikon jelentéssel bíró tartalom az oldalon belül, akkor az akadálymentességi szempontok, például az alt szöveg számítanak; magára a faviconra azonban böngészőfelületi díszítésként kell tekinteni, nem oldaltartalomként. A különbségről lásd gyakorlati útmutatónkat a képek alt szövegéhez.

<!-- tool-cta:start -->

💡 Próbáld ki ezt: Hozd létre egy menetben a modern böngészők által elvárt ICO-, PNG- és SVG-változatokat az Ultimate Favicon Generator segítségével.

<!-- tool-cta:end -->

Egyszerű megvalósítási ellenőrzőlista

Ezt az ellenőrzőlistát használjuk kiadás előtt:

1. Induljunk tiszta vektoros mesterfájlból.
2. Teszteljük a jelet 16×16 és 32×32 méretben.
3. Exportáljunk önálló SVG favicont.
4. Generáljunk többméretű ICO tartalékot.
5. Exportáljunk 180×180-as Apple touch ikont.
6. Adjunk hozzá 192×192 és 512×512 PNG-ket, ha manifestet használunk.
7. Tegyük a /favicon.ico fájlt a webhely gyökerébe.
8. Ellenőrizzük az állapotkódokat, MIME-típusokat és gyorsítótárazási fejléceket.
9. Teszteljünk legalább egy Chromium böngészőben, Firefoxban és Safariban, ha a közönség Apple eszközöket is használ.

A faviconok kicsik, de nagyon láthatók. Egy hibás favicon befejezetlennek láttatja a webhelyet. Egy jól elkészített favicon belesimul a felületbe, és pontosan ez a lényeg.