A megbízható HTML-favicon nem egyetlen varázslatos címkén múlik. Kevés, elérhető fájlt és a head részbe tett hivatkozásokat használ. Ez az eljárás modern füleket, régebbi klienseket és mobilos parancsikonokat is lefed történelmi változatok halmozása nélkül.
Fájlok előkészítése
Olyan négyzetes jelképből indulj, amely nagyon kis méretben is felismerhető. Tedd a favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest és a jegyzékben hivatkozott PNG-fájlokat a domain gyökeréből kiszolgált nyilvános mappába.
A /favicon.svg útvonal a domain gyökerétől abszolút. Ezért a /products vagy /blog/article oldalakon is helyes marad, szemben a favicon.svg útvonallal, amelyet a böngésző az oldalhoz viszonyítva oldhat fel.
Az elemek hozzáadása a head részhez
Először az SVG-t add meg rel icon és type image/svg+xml értékekkel, utána az ICO-t rel icon és sizes any használatával. Az iOS-hez rel apple-touch-icon, a webalkalmazás telepítéséhez rel manifest is kell.
A type feleljen meg a ténylegesen kiszolgált fájlnak. Ne nevezz át PNG-t .ico-ra: a tartalomnak és a fejlécnek is ICO-formátumúnak kell lennie.
| Cél | Reláció | Fájl |
|---|---|---|
| Modern böngésző | icon | /favicon.svg |
| Kompatibilitás | icon | /favicon.ico |
| iOS-kezdőképernyő | apple-touch-icon | /apple-touch-icon.png |
| Webalkalmazás | manifest | /site.webmanifest |
Telepítés hibás útvonalak nélkül
Élesítés után nyisd meg közvetlenül az összes fájl URL-jét. A válasz sikeres állapotú kép vagy jegyzék legyen, ne bejelentkezési vagy 404-es HTML-oldal megtévesztő állapotkóddal.
Ha a webhely alkönyvtárban él, igazítsd hozzá az útvonalakat vagy a nyilvános alapútvonalat. Vizsgáld meg a kész oldalt a fejlesztői eszközökben: a böngésző a várt URL-eket kérje, másik kiszolgálóra irányítás nélkül.
Az eredmény ellenőrzése
Töltsd újra az oldalt kikapcsolt gyorsítótárral, és ellenőrizd a létrejött DOM link elemeit. Ezután próbálj ki böngészőfület, könyvjelzőt, és szükség esetén valódi eszköz kezdőképernyőjére hozzáadást is.
A keresési találatok faviconja a kereső saját szabályait és feltérképezési ütemét is követi. A böngészőben megjelenő ikon ezért nem garantál azonnali frissülést a keresési találatokban.
Elsődleges források
Gyakori kérdések
A favicon eleme a body részbe kerül?
Nem. Az ikonokat és a jegyzéket leíró link elemek a dokumentum head részébe tartoznak.
Elég a gyökérben lévő favicon.ico?
Hasznos tartalék, de nem adja meg az Apple Touch ikont vagy a telepíthető jegyzékikonokat. Ezek céljára külön add meg a formátumokat.
Miért / jellel kezdődő útvonalat használjak?
Ez a domain gyökerétől indul, így egy mélyebben fekvő oldal nem a saját mappájában keresi a fájlt.