Zanesljiva ikona strani v HTML ni odvisna od ene čarobne oznake. Uporablja majhen nabor dosegljivih datotek in povezav v head. Postopek pokrije sodobne zavihke, starejše odjemalce in mobilne bližnjice brez množice zgodovinskih različic.
Pripravite datoteke
Začnite s kvadratnim simbolom, ki ostane berljiv tudi zelo majhen. Datoteke favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest in PNG-je iz manifesta postavite v javno mapo, dostopno iz korena domene.
Pot, kot je /favicon.svg, je absolutna od korena domene. Zato ostane pravilna na /products ali /blog/article, za razliko od favicon.svg, ki se lahko razreši glede na trenutno stran.
Dodajte elemente v head
Najprej navedite SVG z rel icon in type image/svg+xml, nato ICO z rel icon in sizes any. Dodajte rel apple-touch-icon za iOS in rel manifest za namestitev spletne aplikacije.
Vrsta mora ustrezati dejansko postreženi datoteki. PNG-ja ne preimenujte v .ico: vsebina in glava morata uporabljati obliko ICO.
| Namen | Relacija | Datoteka |
|---|---|---|
| Sodoben brskalnik | icon | /favicon.svg |
| Združljivost | icon | /favicon.ico |
| Začetni zaslon iOS | apple-touch-icon | /apple-touch-icon.png |
| Spletna aplikacija | manifest | /site.webmanifest |
Objavite brez pokvarjenih poti
Po objavi neposredno odprite URL vsake datoteke. Odgovor mora biti slika ali manifest z uspešnim statusom, ne prijavna stran ali stran HTML z napako 404 in zavajajočim statusom.
Če stran živi v podmapi, prilagodite poti ali javno osnovno pot. Končno stran preglejte v razvojnih orodjih: brskalnik mora zahtevati pričakovane URL-je brez preusmerjanja na drugega gostitelja.
Preverite rezultat
Ponovno naložite z izklopljenim predpomnilnikom in preglejte elemente link v ustvarjenem DOM. Nato preizkusite zavihek, zaznamek in po potrebi dodajanje strani na začetni zaslon prave naprave.
Ikona v rezultatih iskanja sledi tudi pravilom iskalnika in njegovemu razporedu obiskov. Ikona, vidna v brskalniku, zato ne zagotavlja takojšnje posodobitve rezultatov iskanja.
Primarni viri
Pogosta vprašanja
Ali element za ikono strani sodi v body?
Ne. Elementi link, ki opisujejo ikone in manifest, sodijo v head dokumenta.
Ali favicon.ico v korenu zadostuje?
Je koristno nadomestilo, vendar ne opisuje ikone Apple Touch ali namestitvenih ikon manifesta. Za te namene navedite ustrezne oblike.
Zakaj uporabiti pot, ki se začne z /?
Začne se v korenu domene in prepreči, da bi podstran datoteko iskala v lastni mapi.