Uzticams HTML favicon nebalstās uz vienu maģisku tagu. Tas izmanto nelielu sasniedzamu failu komplektu un saites sadaļā head. Šī procedūra aptver modernās cilnes, vecākus klientus un mobilo ierīču saīsnes bez daudziem vēsturiskiem variantiem.
Sagatavojiet failus
Sāciet ar kvadrātveida simbolu, kas paliek salasāms ļoti mazā izmērā. Ievietojiet favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest un manifestā norādītos PNG failus publiskajā mapē, kas tiek pasniegta domēna saknē.
Ceļš /favicon.svg ir absolūts attiecībā pret domēnu. Tādēļ tas paliek pareizs gan /products, gan /blog/article lapā, atšķirībā no favicon.svg, kuru var atrisināt relatīvi pret pašreizējo lapu.
Pievienojiet elementus sadaļai head
Vispirms norādiet SVG ar rel icon un type image/svg+xml, pēc tam ICO ar rel icon un sizes any. Pievienojiet rel apple-touch-icon iOS vajadzībām un rel manifest tīmekļa lietotnes uzstādīšanai.
Tipam jāatbilst failam, kas patiešām tiek pasniegts. Nepārdēvējiet PNG par .ico: saturam un galvenei jāizmanto ICO formāts.
| Mērķis | Saistība | Fails |
|---|---|---|
| Moderns pārlūks | icon | /favicon.svg |
| Saderība | icon | /favicon.ico |
| iOS sākuma ekrāns | apple-touch-icon | /apple-touch-icon.png |
| Tīmekļa lietotne | manifest | /site.webmanifest |
Publicējiet, nesabojājot ceļus
Pēc izvietošanas atveriet katra faila URL tieši. Atbildei jābūt attēlam vai manifestam ar veiksmīgu statusu, nevis pieteikšanās vai 404 HTML lapai, kas atgriezta ar maldinošu statusu.
Ja vietne atrodas apakšmapē, pielāgojiet ceļus vai publisko pamatceļu. Pārbaudiet galīgo lapu izstrādātāja rīkos: pārlūkam jāpieprasa paredzētie URL bez pāradresācijas uz citu serveri.
Pārbaudiet rezultātu
Pārlādējiet lapu ar atspējotu kešatmiņu un pārbaudiet link elementus izveidotajā DOM. Pēc tam izmēģiniet cilni, grāmatzīmi un, ja nepieciešams, vietnes pievienošanu īstas ierīces sākuma ekrānam.
Meklēšanas rezultātu favicon ievēro arī meklētāja noteikumus un pārmeklēšanas grafiku. Tādēļ pārlūkā redzama ikona negarantē tūlītēju atjauninājumu meklēšanas rezultātos.
Pirmavoti
Bieži uzdotie jautājumi
Vai favicon elements jāievieto body sadaļā?
Nē. Link elementi, kas apraksta ikonas un manifestu, pieder dokumenta head sadaļai.
Vai pietiek ar favicon.ico saknē?
Tas ir noderīgs rezerves variants, taču neapraksta Apple Touch ikonu vai uzstādāmās manifesta ikonas. Norādiet šiem mērķiem paredzētos formātus.
Kāpēc izmantot ceļu, kas sākas ar /?
Tas sākas domēna saknē un neļauj dziļākai lapai meklēt failu savā mapē.