Guider om favicons
Tydliga svar på frågorna som uppstår när du skapar en favicon: vilka storlekar, vilka format och vilken kod du ska klistra in.
Favicon-storlekar: format och användning
En sökning på ”favicon-storlek” ger fortfarande checklistor med femton filer från 2014. I praktiken räcker numera sex dimensioner för webbläsarflikar, sökresultat, iOS, Android och PWA:er. Här är storlekarna och varför de behövs.
Läs guidenKonvertera PNG till ICO gratis
.ico är fortfarande det förväntade formatet i webbplatsens rot, och de flesta nätbaserade konverterare ber dig ladda upp bilden till deras server. Så här skapar du en korrekt favicon.ico i flera storlekar från en PNG, utan att ladda upp något.
Läs guidenapple-touch-icon: storlek, format och kod
Apple Touch-ikonen anger uttryckligen vilken bild som används när en besökare lägger till din webbplats på hemskärmen på en iPhone. Den är separat från faviconen i webbläsarfliken och ikonerna i webbappsmanifestet.
Läs guidenFavicon för mörkt läge med SVG
En svart logotyp på genomskinlig bakgrund ser perfekt ut i en ljus flik och försvinner i en mörk. ICO-formatet kan inte anpassa sig, men det kan en SVG-favicon: den innehåller en CSS-regel som byter färger efter webbläsarens tema.
Läs guidenLägg till en favicon i HTML
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.
Läs guidenFavicon visas inte eller uppdateras inte
När en favicon saknas är det inte alltid filen som är problemet. Webbläsaren, ett CDN, en service worker och en sökmotor kan behålla varsin version. En systematisk felsökning undviker att flera saker ändras samtidigt.
Läs guidenFavicons i Next.js App Router
App Router kan skapa ikonelement från filer med särskilda namn eller från metadata-objektet. Båda metoderna fungerar, men att blanda dem utan en tydlig regel kan lätt ge konkurrerande deklarationer.
Läs guidenGuide till SVG-favicons
SVG håller kanterna skarpa vid alla pixeltätheter och kan anpassa färgerna efter temat. Flexibiliteten har ett krav: filen måste vara fristående, enkel och läsbar på en mycket liten yta.
Läs guiden