Töökindel HTML-favicon ei sõltu ühest maagilisest sildist. See kasutab väikest hulka kättesaadavaid faile ja head-ossa paigutatud linke. See lahendus katab moodsad vahekaardid, vanemad kliendid ja mobiilsed otseteed ajaloolisi variante juurde tekitamata.
Valmista failid ette
Alusta ruudukujulisest sümbolist, mis jääb loetavaks ka väga väikesena. Paiguta favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest ja manifestis viidatud PNG-failid avalikku kausta, mida serveeritakse domeeni juurkaustast.
Asukoht nagu /favicon.svg on domeeni suhtes absoluutne. See jääb õigeks nii lehel /products kui ka /blog/article, erinevalt asukohast favicon.svg, mida võidakse lahendada lehe suhtes.
Lisa elemendid head-ossa
Deklareeri esmalt SVG väärtustega rel icon ja type image/svg+xml, seejärel ICO väärtustega rel icon ja sizes any. Lisa iOS-i jaoks rel apple-touch-icon ning veebirakenduse paigaldamiseks rel manifest.
Tüüp peab vastama tegelikult serveeritavale failile. Ära nimeta PNG-d ümber .ico-ks: sisu ja päis peavad kasutama ICO-vormingut.
| Otstarve | Seos | Fail |
|---|---|---|
| Moodne brauser | icon | /favicon.svg |
| Ühilduvus | icon | /favicon.ico |
| iOS-i avakuva | apple-touch-icon | /apple-touch-icon.png |
| Veebirakendus | manifest | /site.webmanifest |
Avalda asukohti rikkumata
Ava iga faili URL kohe pärast avaldamist otse. Vastus peab olema eduka olekukoodiga pilt või manifest, mitte eksitava olekuga tagastatud sisselogimisleht või 404 HTML-leht.
Kui sait asub alamkaustas, kohanda asukohti või avalikku baasaadressi. Uuri arendustööriistades lõplikku lehte: brauser peab küsima oodatud URL-e teisele hostile ümber suunamata.
Kontrolli tulemust
Laadi leht uuesti keelatud vahemäluga ja kontrolli tekkinud DOM-i link-elemente. Seejärel testi vahekaarti, järjehoidjat ning vajaduse korral saidi lisamist päris seadme avakuvale.
Otsingutulemuse favicon järgib ka otsingumootori reegleid ja roomamise ajakava. Brauseris nähtav ikoon ei taga seetõttu otsingutulemuste kohest uuendamist.
Algallikad
Korduma kippuvad küsimused
Kas faviconi element käib body-ossa?
Ei. Ikoone ja manifesti kirjeldavad link-elemendid kuuluvad dokumendi head-ossa.
Kas juurkaustas olevast favicon.ico-failist piisab?
See on kasulik varuvariant, kuid ei kirjelda Apple Touchi ikooni ega paigaldatava rakenduse manifestiikoone. Deklareeri nende otstarvete jaoks eraldi vormingud.
Miks kasutada /-ga algavat asukohta?
See algab domeeni juurkaustast ja takistab sügavamal asuval lehel faili enda kaustast otsida.