Et pålideligt favicon i HTML afhænger ikke af ét magisk tag. Det bruger et lille sæt tilgængelige filer og links placeret i head. Denne fremgangsmåde dækker moderne faner, ældre klienter og mobilgenveje uden et væld af historiske varianter.
Klargør filerne
Begynd med et kvadratisk symbol, der stadig er læsbart i meget lille størrelse. Læg favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest og de PNG-filer, som manifestet henviser til, i den offentlige mappe, der vises fra domænets rod.
En sti som /favicon.svg er absolut fra domænet. Den er derfor stadig korrekt på /products eller /blog/article, modsat favicon.svg, som kan blive fortolket relativt til siden.
Tilføj elementerne i head
Angiv først SVG med rel icon og type image/svg+xml, derefter ICO med rel icon og sizes any. Tilføj rel apple-touch-icon til iOS og rel manifest til installation af webappen.
Typen skal svare til den fil, der faktisk leveres. Omdøb ikke en PNG til .ico: indholdet og headeren skal bruge ICO-formatet.
| Formål | Relation | Fil |
|---|---|---|
| Moderne browser | icon | /favicon.svg |
| Kompatibilitet | icon | /favicon.ico |
| iOS-hjemmeskærm | apple-touch-icon | /apple-touch-icon.png |
| Webapp | manifest | /site.webmanifest |
Udgiv uden at ødelægge stierne
Åbn hver fil-URL direkte efter udgivelsen. Svaret skal være et billede eller manifest med en successtatus, ikke en login- eller 404-side i HTML, der leveres med en misvisende status.
Hvis websitet ligger i en undermappe, skal du tilpasse stierne eller den offentlige basissti. Undersøg den endelige side i udviklerværktøjerne: browseren skal hente de forventede URL'er uden at omdirigere til en anden vært.
Kontrollér resultatet
Genindlæs med cachen deaktiveret, og undersøg link-elementerne i den genererede DOM. Test derefter en fane, et bogmærke og, når det er relevant, tilføjelse af websitet til en rigtig enheds hjemmeskærm.
Et favicon i søgeresultater følger også søgemaskinens regler og crawlplan. Et synligt ikon i browseren garanterer derfor ikke en øjeblikkelig opdatering i søgeresultaterne.
Primære kilder
Ofte stillede spørgsmål
Skal favicon-elementet placeres i body?
Nej. Link-elementer, der beskriver ikoner og manifestet, hører hjemme i dokumentets head.
Er en favicon.ico i roden nok?
Den er en nyttig reserve, men beskriver hverken et Apple Touch-ikon eller manifestikoner til installation. Angiv de relevante formater til disse formål.
Hvorfor bruge en sti, der begynder med /?
Den begynder i domænets rod og forhindrer, at en side i en undermappe leder efter filen i sin egen mappe.