Áreiðanleg táknmynd í HTML byggist ekki á einu töfratagi. Hún notar lítið safn aðgengilegra skráa og tengla í head. Þessi aðferð nær yfir nýja flipa, eldri forrit og flýtileiðir í símum án þess að fjölga sögulegum afbrigðum.
Undirbúa skrárnar
Byrjaðu á ferningslaga tákni sem helst læsilegt í mjög lítilli stærð. Settu favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest og PNG-skrárnar sem birtingarskráin vísar í í opinberu möppuna sem birtist í rót lénsins.
Slóð eins og /favicon.svg byrjar í rót lénsins. Hún helst því rétt á /products eða /blog/article, ólíkt favicon.svg sem gæti verið túlkuð út frá slóð síðunnar sjálfrar.
Bæta einingunum við head
Tilgreindu SVG fyrst með rel icon og type image/svg+xml og síðan ICO með rel icon og sizes any. Bættu við rel apple-touch-icon fyrir iOS og rel manifest fyrir uppsetningu vefforrits.
Gerðin verður að samsvara skránni sem er í raun afhent. Ekki endurnefna PNG sem .ico: innihald og haus verða að nota ICO-sniðið.
| Tilgangur | Tengsl | Skrá |
|---|---|---|
| Nýr vafri | icon | /favicon.svg |
| Samhæfni | icon | /favicon.ico |
| Heimaskjár iOS | apple-touch-icon | /apple-touch-icon.png |
| Vefforrit | manifest | /site.webmanifest |
Setja í loftið án þess að brjóta slóðir
Opnaðu hverja skráarslóð beint eftir útgáfu. Svarið verður að vera mynd eða birtingarskrá með árangurskóða en ekki innskráningar- eða 404-síða á HTML-sniði með villandi stöðukóða.
Ef vefurinn er í undirmöppu skaltu laga slóðirnar eða opinberu grunnslóðina. Skoðaðu fullbúna síðu í þróunarverkfærunum: vafrinn á að biðja um væntar slóðir án þess að vera vísað á annan hýsil.
Staðfesta niðurstöðuna
Endurhladdu með skyndiminni óvirkt og skoðaðu link-einingarnar í DOM-skjalinu sem varð til. Prófaðu síðan flipa og bókamerki og, þegar við á, að bæta vefnum við heimaskjá raunverulegs tækis.
Táknmynd í leitarniðurstöðum fylgir líka reglum leitarvélarinnar og skriðáætlun hennar. Tákn sem sést í vafranum tryggir því ekki tafarlausa uppfærslu í leitarniðurstöðum.
Frumheimildir
Algengar spurningar
Á táknmyndaeiningin að vera í body?
Nei. Link-einingar sem lýsa táknum og birtingarskrá eiga heima í head skjalsins.
Dugar favicon.ico í rótinni?
Hún er gagnleg til vara en lýsir hvorki Apple Touch-tákni né uppsetjanlegum táknum í birtingarskrá. Tilgreindu sniðin sem þjóna þeim tilgangi.
Af hverju að nota slóð sem byrjar á /?
Hún byrjar í rót lénsins og kemur í veg fyrir að undirsíða leiti að skránni í eigin möppu.