En tillförlitlig favicon i HTML bygger på mer än en enda magisk tagg. Det behövs en liten uppsättning åtkomliga filer och länkar i head. Metoden täcker moderna flikar, äldre klienter och mobila genvägar utan mängder av historiska varianter.
Förbered filerna
Börja med en kvadratisk symbol som är läsbar även i mycket liten storlek. Lägg favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest och de PNG-filer som manifestet hänvisar till i den publika mapp som exponeras i domänens rot.
En sökväg som /favicon.svg är absolut från domänens rot. Den fungerar därför även på /products eller /blog/article, till skillnad från favicon.svg som kan tolkas relativt sidan.
Lägg till elementen i head
Deklarera först SVG med rel icon och type image/svg+xml, därefter ICO med rel icon och sizes any. Lägg till rel apple-touch-icon för iOS och rel manifest för installation av webbappen.
Typen måste motsvara filen som faktiskt levereras. Döp inte om en PNG till .ico: innehållet och filhuvudet måste följa ICO-formatet.
| Syfte | Relation | Fil |
|---|---|---|
| Modern webbläsare | icon | /favicon.svg |
| Kompatibilitet | icon | /favicon.ico |
| Hemskärm i iOS | apple-touch-icon | /apple-touch-icon.png |
| Webbapp | manifest | /site.webmanifest |
Driftsätt utan att bryta sökvägar
Öppna varje filadress direkt efter driftsättningen. Svaret måste vara en bild eller ett manifest med en lyckad statuskod, inte en inloggningssida eller en HTML-felsida för 404 med missvisande status.
Om webbplatsen ligger i en underkatalog behöver sökvägarna eller den publika basadressen anpassas. Inspektera den färdiga sidan i utvecklarverktygen: webbläsaren ska begära de förväntade adresserna utan omdirigering till en annan värd.
Kontrollera resultatet
Ladda om med cache avstängd och granska link-elementen i den genererade DOM:en. Testa sedan en flik, ett bokmärke och, när det är relevant, att lägga till webbplatsen på en riktig enhets hemskärm.
En favicon i sökresultat följer också sökmotorns regler och genomsökningsschema. Att ikonen syns i webbläsaren garanterar därför inte en omedelbar uppdatering i sökresultaten.
Primärkällor
Vanliga frågor
Ska favicon-elementet ligga i body?
Nej. Link-element som beskriver ikoner och manifest hör hemma i dokumentets head.
Räcker favicon.ico i roten?
Den är en användbar reserv, men beskriver varken en Apple Touch-ikon eller manifestikoner för installation. Deklarera de format som behövs för dessa användningsområden.
Varför använda en sökväg som börjar med /?
Den utgår från domänens rot och hindrar en underordnad sida från att leta efter filen i sin egen mapp.