Favicon og Apple Touch Icon
Legg til ikoner som vises i nettleserfaner og på startskjermer
Favicon og Apple Touch Icon er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva er et favicon?
Et favicon er det lille ikonet som vises i:
- Nettleserfaner
- Bokmerkelister
- Nettleserloggen
- Søkeresultater (av og til)
Det hjelper brukere med å identifisere nettstedet ditt med et blikk blant flere åpne faner.
Grunnleggende favicon-lenke
Legg til et favicon med et 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-formater
Anbefalt strategi for favicon-formater:
- SVG — vektorformat, skaleres perfekt, liten filstørrelse (brukes først)
- PNG 32x32 — reservealternativ for nettlesere som ikke støtter SVG
- ICO — eldre format som inneholder størrelsene 16x16 og 32x32
Plassering av ICO-filen
favicon.ico-filen i roten av domenet hentes automatisk:
<!-- 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">sizes-attributtet
sizes-attributtet angir ikonets dimensjoner:
<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 vises når brukere legger nettstedet ditt til på iOS-startskjermen:
<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 -->Maskerbare ikoner for Android
Android-PWA-er bruker maskerbare ikoner som fyller ikonformen:
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->Favicon for mørk modus
Tilby et SVG-favicon som tar hensyn til mørk modus:
<!-- 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>
-->Web App Manifest for PWA-ikoner
Fullstendig ikonoppsett for 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" }
]
-->Komplett favicon-oppsett
Et komplett, moderne favicon-oppsett:
<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>Testing av favikoner
Slik kontrollerer du favicon-oppsettet:
- Utfør en hard omlasting (Ctrl+Shift+R / Cmd+Shift+R) for å tømme bufret favicon
- Bruk verktøyet Favicon Checker (realfavicongenerator.net)
- Test på en faktisk iOS-enhet for Apple Touch Icon
- Kontroller PWA-manifestet med Lighthouse → PWA-revisjon
Hurtigsjekk
Hva er den anbefalte størrelsen på bilder for Apple Touch Icon?
Oppsummering: favikoner
Det viktigste om favicon:
- SVG-favicon — moderne, skalerbart og tilpasset mørk modus
- PNG 32x32 — reservealternativ for nettlesere uten SVG-støtte
- ICO i roten — eldre reservealternativ for IE
apple-touch-icon180×180 — iOS-startskjerm- Web app-manifest — Android-PWA-ikoner (192px og 512px)
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Favicon og Apple Touch Icon» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Favicon og Apple Touch Icon», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Favicon og Apple Touch Icon»?
Legg til ikoner som vises i nettleserfaner og på startskjermer Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Favicon og Apple Touch Icon»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- title og rollen i SEO
- meta charset viewport author og description
- Kanoniske URL-er og robots-meta
- Favicon og Apple Touch Icon