Patikima HTML svetainės piktograma nepriklauso nuo vienos stebuklingos žymos. Jai naudojamas nedidelis pasiekiamų failų rinkinys ir head dalyje esančios nuorodos. Ši procedūra apima šiuolaikines korteles, senesnes programas ir mobiliąsias nuorodas nepridedant daugybės istorinių versijų.
Paruoškite failus
Pradėkite nuo kvadratinio simbolio, kuris išlieka įskaitomas labai mažas. Į viešąjį aplanką, pateikiamą domeno šakniniame kataloge, įkelkite favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest ir manifeste nurodytus PNG failus.
Toks kelias kaip /favicon.svg yra absoliutus domeno atžvilgiu. Todėl jis išlieka teisingas puslapiuose /products ar /blog/article, priešingai nei favicon.svg, kurį naršyklė gali laikyti santykiniu dabartinio puslapio atžvilgiu.
Pridėkite elementus į head
Pirmiausia nurodykite SVG su rel icon ir type image/svg+xml, tada ICO su rel icon ir sizes any. Pridėkite rel apple-touch-icon iOS aplinkai ir rel manifest žiniatinklio programos diegimui.
Tipas turi atitikti iš tikrųjų pateikiamą failą. Nepervadinkite PNG į .ico: turinys ir antraštė turi atitikti ICO formatą.
| Paskirtis | Sąsaja | Failas |
|---|---|---|
| Šiuolaikinė naršyklė | icon | /favicon.svg |
| Suderinamumas | icon | /favicon.ico |
| iOS pradžios ekranas | apple-touch-icon | /apple-touch-icon.png |
| Žiniatinklio programa | manifest | /site.webmanifest |
Paskelbkite nepažeisdami kelių
Paskelbę svetainę tiesiogiai atverkite kiekvieno failo URL. Atsakymas turi būti vaizdas ar manifestas su sėkmės būsenos kodu, o ne prisijungimo arba 404 HTML puslapis, grąžintas su klaidinančia būsena.
Jei svetainė veikia pakatalogyje, pakoreguokite kelius ar viešąjį bazinį adresą. Patikrinkite galutinį puslapį kūrėjo įrankiais: naršyklė turi užklausti numatytų URL, neperadresuodama į kitą serverį.
Patikrinkite rezultatą
Išjunkite podėlį, įkelkite iš naujo ir patikrinkite link elementus sukurtame DOM. Tada išbandykite kortelę, žymelę ir, jei aktualu, svetainės pridėjimą į tikro įrenginio pradžios ekraną.
Paieškos rezultato piktogramai taip pat taikomos paieškos sistemos taisyklės ir nuskaitymo tvarkaraštis. Todėl naršyklėje matoma piktograma negarantuoja, kad paieškos rezultatai atsinaujins iškart.
Pirminiai šaltiniai
Dažniausi klausimai
Ar svetainės piktogramos elementas dedamas į body?
Ne. Piktogramas ir manifestą aprašantys link elementai turi būti dokumento head dalyje.
Ar pakanka favicon.ico šakniniame kataloge?
Tai naudingas atsarginis variantas, tačiau jis neaprašo Apple Touch piktogramos ar diegiamų manifesto piktogramų. Šiems tikslams nurodykite atitinkamus formatus.
Kodėl naudoti kelią, prasidedantį /?
Jis prasideda domeno šakniniame kataloge ir neleidžia giliau esančiam puslapiui ieškoti failo savo aplanke.