Et pålitelig favicon i HTML bygger på et lite sett med tilgjengelige filer og lenker i head. Fremgangsmåten dekker moderne faner, eldre klienter og snarveier på mobil uten en mengde historiske varianter.
Klargjør filene
Begynn med et kvadratisk symbol som er lesbart også i svært liten størrelse. Legg favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest og PNG-filene manifestet viser til, i den offentlige mappen som leveres fra domenets rot.
En sti som /favicon.svg er absolutt fra domenets rot. Den fungerer derfor også på /products og /blog/article, i motsetning til favicon.svg, som kan tolkes relativt til siden.
Legg elementene i head
Angi først SVG med rel icon og type image/svg+xml, deretter ICO med rel icon og sizes any. Legg til rel apple-touch-icon for iOS og rel manifest for installasjon av webapper.
Typen må samsvare med filen som faktisk leveres. Ikke gi en PNG filendelsen .ico: både innholdet og filhodet må bruke ICO-formatet.
| Formål | Relasjon | Fil |
|---|---|---|
| Moderne nettleser | icon | /favicon.svg |
| Kompatibilitet | icon | /favicon.ico |
| iOS-startskjerm | apple-touch-icon | /apple-touch-icon.png |
| Webapp | manifest | /site.webmanifest |
Publiser uten å ødelegge filstier
Åpne hver filadresse direkte etter publisering. Svaret må være et bilde eller manifest med en vellykket statuskode, ikke en innloggingsside eller en HTML-side med 404-feil som returneres med misvisende status.
Hvis nettstedet ligger i en undermappe, må du tilpasse stiene eller den offentlige basisstien. Undersøk den ferdige siden i utviklerverktøyene. Nettleseren skal be om forventede adresser uten å omdirigeres til en annen vert.
Kontroller resultatet
Last inn på nytt med hurtigbufferen deaktivert, og undersøk link-elementene i den genererte DOM-en. Test deretter en fane, et bokmerke og, ved behov, å legge nettstedet til på startskjermen på en fysisk enhet.
Et favicon i søkeresultater følger også søkemotorens regler og tidsplan for gjennomsøking. At ikonet vises i nettleseren, garanterer derfor ikke at søkeresultatene oppdateres umiddelbart.
Primærkilder
Vanlige spørsmål
Skal favicon-elementet ligge i body?
Nei. Link-elementer som beskriver ikoner og manifest, hører hjemme i dokumentets head.
Er favicon.ico i rotmappen nok?
Det er en nyttig reserve, men angir verken et Apple Touch-ikon eller manifestikoner for installasjon. Angi egne formater for disse bruksområdene.
Hvorfor bruke en sti som begynner med /?
Den starter i domenets rotmappe og hindrer at en side i en undermappe leter etter filen i sin egen mappe.