Favicon och Apple Touch Icon
Lägg till ikoner som visas på webbläsarflikar och startskärmar
Favicon och Apple Touch Icon är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad är en favicon?
En favicon är den lilla ikon som visas i:
- Webbläsarflikar
- Bokmärkeslistor
- Webbläsarhistoriken
- Sökresultat (ibland)
Den hjälper användare att snabbt identifiera webbplatsen bland flera öppna flikar.
Grundläggande favicon-länk
Lägg till en favicon med ett link-element i head:
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>Favicon-format
Rekommenderad strategi för favicon-format:
- SVG — vektorbaserat, skalas perfekt och har liten filstorlek (använd först)
- PNG 32x32 — reservlösning för webbläsare som inte stöder SVG
- ICO — äldre format som innehåller storlekarna 16x16 och 32x32
Placering av ICO-filen
Filen favicon.ico i domänens rot hämtas automatiskt:
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">Attributet sizes
Attributet sizes anger ikonens dimensioner:
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">Apple Touch Icon
Apple Touch Icon visas när användare lägger till webbplatsen på iOS-hemskärmen:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->Maskerbara ikoner för Android
Android-PWA:er använder maskerbara ikoner som fyller ikonens form:
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->Favicon för mörkt läge
Skapa en SVG-favicon som anpassar sig till mörkt läge:
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->Webbappmanifest för PWA-ikoner
Fullständig ikonkonfiguration för Progressive Web Apps:
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->Fullständig favicon-konfiguration
En fullständig modern favicon-konfiguration:
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>Testa favicons
Så verifierar du favicon-konfigurationen:
- Gör en hård omladdning (Ctrl+Shift+R / Cmd+Shift+R) för att rensa den cachade faviconen
- Använd verktyget Favicon Checker (realfavicongenerator.net)
- Testa på en faktisk iOS-enhet för Apple Touch Icon
- Kontrollera PWA-manifestet med Lighthouse → PWA-granskning
Snabbkontroll
Vilken storlek rekommenderas för bilder i Apple Touch Icon?
Sammanfattning: favicons
Det viktigaste om favicons:
- SVG-favicon — modern, skalbar och anpassad för mörkt läge
- PNG 32x32 — reservlösning för webbläsare utan SVG-stöd
- ICO i roten — äldre reservlösning för IE
apple-touch-icon180×180 — iOS-hemskärm- Webbappmanifest — Android-PWA-ikoner (192 px och 512 px)
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Favicon och Apple Touch Icon” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Favicon och Apple Touch Icon”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Favicon och Apple Touch Icon”?
Lägg till ikoner som visas på webbläsarflikar och startskärmar Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Favicon och Apple Touch Icon”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- title och dess betydelse för SEO
- meta charset viewport author och description
- Kanoniska URL:er och robots-meta
- Favicon och Apple Touch Icon