Videre til indhold 
Et korrekt implementeret favicon forbedrer brandets tilstedeværelse, sikrer et professionelt udseende på forskellige enheder og øger genkendeligheden. For at skabe et Integrer faviconhar du brug for flere formater og passende referencer til iOS, Android og Windows. Hovedformålet er at sikre, at alle browsere og alle operativsystemer tydeligt kan genkende dit ikon, og samtidig at indlæsningstiden for din hjemmeside ikke forlænges unødigt.
Centrale punkter
- Understøttelse af flere formater er afgørende for visning på tværs af platforme.
- Hovedområdet af hjemmesiden skal indeholde passende tags.
- Manifest-fil optimerer opførslen på Android-enheder.
- Apple Touch-ikoner kræver deres egne formater og referencer.
- Tilbagevendende ikon i ICO-format øger kompatibiliteten med ældre systemer.
Disse nøglepunkter giver allerede et første overblik over de vigtigste aspekter af et favicon. Derudover er det vigtigt, at ikonerne er tilpasset forskellige skærmstørrelser og muliggør en konsekvent brandpræsentation. Især brugere, der besøger dit websted ofte, har gavn af en tiltalende og hurtig genkendelse i browserfanen eller på startskærmen.
Grundlæggende om favicon-integration
Et favicon er et lille ikon, der vises i browserfanen, i bogmærker, mobile startskærme og Windows-fliser. For at sikre, at det vises korrekt overalt, skal du bruge ikonet i flere Filformater giver: PNG, ICO, SVG og Apple Touch Icon. Hvert af disse formater bruges i forskellige situationer. Moderne browsere foretrækker PNG, mens ældre systemer falder tilbage på favicon.ico. SVG er særligt velegnet til skærme med høj opløsning, da det kan skaleres uden tab.
Du bør gemme de nødvendige filer direkte i webroden på din side. På den måde undgår du problemer med relative stiangivelser og øger indlæsningshastigheden. En 180×180 PNG anbefales til iOS-startskærme, mens Android typisk bruger 192×192. Reservestrategi med favicon.ico for at få ældre browsere til at fungere og undgå forkerte indlæsningsforsøg.
Du bør også navngive dine favicons tydeligt og notere størrelsen i filnavnet, f.eks. favicon-32×32.png eller apple-touch-icon-180×180.png. På den måde kan du hurtigt identificere, hvilket ikon der er beregnet til hvilket formål, hvis det er nødvendigt. Denne klare struktur i filsystemet hjælper dig, når du opdaterer individuel grafik, og reducerer risikoen for forvirring.
Vær også opmærksom på, at nogle browsere stædigt beholder favicon-filer i deres cache. Når du har foretaget ændringer, kan det være nyttigt at rydde browserens cache eller ændre filnavnene en smule for at sikre, at dine besøgende altid ser det nyeste ikon.
Favicon til iOS, Android og Windows
Hvert operativsystem bruger sine egne mekanismer til at vise ikoner. iOS bruger såkaldte Apple Touch Icons. Disse ikoner vises, når brugerne tilføjer deres hjemmeside til startskærmen. Android arbejder hovedsageligt med webappmanifester og prioriterer 192×192 PNG-standarden. Windows kan derimod justere flisestørrelser og -farver via filen browserconfig.xml. Følgende gælder for alle platforme: Rene referencer og klar filnavngivning skaber velfungerende skærme.
For Apple skal du også angive et maskeikon. Dette ikon bruges i Safari på iOS og macOS - primært i mørk tilstand. Brug SVG med et maske-ikon-tag i hovedområdet, suppleret med attributfarven. Android-enheder kræver en enkel, velstruktureret manifest.json. Denne fil definerer ikoner, korte og lange titler på din webapp samt en startadfærd.
Et vigtigt punkt med iOS og Android er muligheden for at få din webapplikation til at se ud som en indbygget app. Ikonet vises ofte uden en browser-brugergrænseflade og skal derfor designes med særlig omhu. Brug de specifikke størrelser, der anbefales af Apple og Google, for at undgå grimme skaleringer eller kanter. Overvej også de afrundede hjørner på ikonerne på mange Android launchers samt touch-ikonerne på iOS-enheder, som også ofte er afrundede eller maskerede.
HTML-kode til forskellige ikoner
For at sikre, at browsere og operativsystemer indlæser de korrekte filer, skal du vælge den passende -tags i -området på din side. Disse henviser direkte til de respektive filtyper. En fornuftig minimumskonfiguration omfatter:
| Ikontype | filformat | HTML-tag |
|---|---|---|
| Standard favicon | .ico | . |
| Browsere med høj opløsning | PNG (32×32, 192×192) | . |
| Apple Touch-ikon | PNG (180×180) | . |
| Fastgjort fane i Safari | SVG (maske-ikon) | . |
| Manifesto (Android) | manifest.json | . |
Afhængigt af dit layout eller corporate design kan du bruge farve-attributterne eller tema_farve i manifestet. Sørg for, at de viste farver matcher din side, så brugerne får et perfekt, ensartet indtryk. Du kan også tilføje flere ikoner i forskellige størrelser, så browserne automatisk vælger den bedste variant.
Hvis du leverer dit websted på flere sprog eller betjener forskellige landedomæner, skal du huske på, at favicons er uafhængige af indholdet. Global tilgængelighed fra et fælles bibliotek er normalt mere praktisk end at gemme separate ikoner for hver sprogversion. Det sparer plads og undgår uoverensstemmelser under vedligeholdelse.
Manifest-fil: site.webmanifest
Manifestet er en central byggesten for Android-brugere og progressive webapps. Det definerer titlen, baggrundsfarven og ikonerne. Det er vigtigt at levere mindst en 192×192 PNG og ideelt set en 512×512 PNG til app-launcheren. Placer filen i rodmappen, og link den i hovedet med en link rel="manifest".
En simpel struktur af site.webmanifest kan se sådan ud:
{
"navn": "Eksempel på side",
"kort_navn": "eksempel",
"ikoner": [
{
"src": "/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"background_color": "#ffffff",
"theme_color": "#ffffffff",
"display": "standalone"
}
Med hensyn til Progressive Web Apps kan manifestet også indeholde felter som f.eks. omfang eller start_url inkluderet. Den omfang-attribut bestemmer, hvilken del af dit websted webappen er begrænset til. Med start_url definerer du, hvilken side der vises, når appen startes. Et velstruktureret manifest gør administrationen lettere, især for større webprojekter, og sikrer, at brugerne kan bruge din hjemmeside som en næsten indbygget app.
Glem ikke regelmæssigt at tjekke, om ikonerne, farverne og titlerne stadig svarer til dit nuværende corporate design. Manifestet tilpasses hurtigt, men browsercacher kan bruge forældede data i længere tid. Nogle gange hjælper det at bruge et nyt filnavn, f.eks. site-2.webmanifesthvis grundlæggende elementer har ændret sig.
Integrer favicon korrekt med WordPress
Hvis du bruger WordPress, kan du indsætte dit favicon via Customiser. Alternativt kan du uploade dine ikoner via FTP og tilføje alle .-indtastninger manuelt i header.php eller via et tilsvarende plugin. Sørg for at bruge den korrekte Fil-stier og derefter rydde cachen.
Tag også højde for site.webmanifest til Android og den maske-ikon for Safari. Det sikrer, at alle systemer bruger det rigtige skærmformat. Automatisk hjælp kan en favicon-generator der leverer passende formater og kodestykker.
Nogle WordPress-temaer eller sidebyggere kommer allerede med deres egne indstillinger for favicons. Denne konfiguration kan dog blive overskrevet, når du skifter tema eller foretager større opdateringer. Du bør derfor have dine favicon-filer ved hånden og dokumentere, hvilke URL'er du har gemt i temaet eller plugins.
Fokuser også på at levere de rigtige størrelser. WordPress skalerer nogle gange billeder automatisk, hvilket f.eks. resulterer i slørede ikoner. Når du har uploadet, skal du sørge for at tjekke i mediecentret, at filerne er gemt i den oprindelige opløsning. Hvis et plugin styrer favicon-funktionerne, kan det hjælpe at deaktivere plugin'et og genaktivere det for at fremtvinge en genindlæsning.
Undgå fejl under implementeringen
Mange fejlkilder kan undgås ved omhyggelig kontrol. Ofte er visse Størrelsesvarianter eller ikonerne er i forkert indlejrede mapper. Efter integrationen skal du kontrollere, om ikonerne vises korrekt i faner, mobile startskærme og ved fastgørelse. Brug browserudviklingsværktøjer eller online favicon-checkere til at gøre dette.
Fjern gamle versioner af faviconen fra din server for at undgå inkonsekvente visninger. Tjek for udløbne cacher, da browsere gerne gemmer favicons på lang sigt. Før brugerne til dine opdateringer via en ren URL-struktur.
Der kan også opstå forvirring, hvis der bruges et underdomæne, som stadig har et gammelt favicon eller en ældre manifestfil. Du bør derfor teste alle domænevarianter (www, non-www, https) og sørge for, at de samme ikoner er integreret overalt. Senere ændringer kan så foretages hurtigere og på en mere struktureret måde.
Hvis dine ikoner ikke vises, anbefaler vi, at du kigger på browserens DevTools for at opfange eventuelle fejlmeddelelser. Afhængigt af browseren bliver et manglende favicon kun nævnt i konsollen. Mulige fejlkilder er en forkert sti, en manglende filtypenavn eller ikke-eksisterende læse- og skrivetilladelser på webserveren.
Anbefalinger til design af favicons
Et fungerende favicon forbliver enkelt og umiddelbart genkendeligt. Hold fast i designet Rig på kontraster og brug tilstrækkeligt med ledig plads. Arbejd helst med SVG-filer, hvis der er behov for skalerbarhed. Ikoner skal være firkantede og indeholde klart definerede former. Undgå bogstaver eller fine linjer - de er især ulæselige på små formater.
Gitteret på 48 px giver en god orientering. Når du designer, skal du starte med et grafisk format på 512×512 og skalere det ned til de ønskede størrelser. Test derefter visningen på forskellige slutenheder. Retina-skærme kræver også skarpe linjer - det er her, vektorgrafik virkelig brillerer.
For logoer eller bogstaver anbefales det at lave en forenklet version. Fjern alle detaljer, som ikke længere er genkendelige i små pixeldimensioner. Minimalistiske ikoner med stærk kontrast er bedst. En silhuet eller en antydet bogstavform er ofte nok til at opnå genkendelsesværdi.
Valget af farve er lige så vigtigt. Undgå at bruge for mange farver, da favicons, der er for farverige, hurtigt kan se ustyrlige ud. Med henblik på dark mode eller forskelligt farvede browservinduer kan du også overveje, om der er en ensfarvet variant i dit corporate design, som er tydeligt synlig overalt.
Yderligere muligheder for Windows-systemer
For at opnå fuld kompatibilitet under Windows kan du oprette yderligere filer. Den browserconfig.xml definerer f.eks. farve og design af fliser til 'Windows 8'-startmenuer. Denne fil er valgfri, men nyttig til højere brugerfrekvenser på skrivebordet. Tilføj passende Meta tags i toppen af din side:
.
.
Sørg for, at dine PNG-ikoner er tilgængelige i størrelserne 70×70, 150×150, 310×310. Generer disse varianter ved hjælp af en favicon-generator eller almindelige billedredigeringsværktøjer. Din browserconfig.xml henviser derefter til disse ressourcer.
Selv med Windows 10 og Windows 11 er det stadig muligt at placere fliser, der viser favicon, på startskærmen. Afhængigt af, hvordan dine brugere arbejder med Windows, kan denne funktion stadig være nyttig. En klar og konsekvent præsentation på alle Microsoft-platforme sikrer et professionelt udseende, som øger din genkendelsesværdi.
Yderligere praktisk information og avancerede tips
Hvis du driver din hjemmeside som en progressiv webapp, bør du gå et skridt videre. Ud over favicon og manifestfilen spiller servicearbejderen en afgørende rolle. Den sikrer, at ikonerne også fungerer pålideligt i offline-tilstand, og når de føjes til startsiden. I nogle tilfælde kan en velkonfigureret service worker også gøre det muligt at forudindlæse nye ikonvarianter hurtigt, så snart de er tilgængelige på serveren.
Hvis du har flere underdomæner eller tilbyder forskellige mærker under samme hovedparaply, kan du overveje at designe favicons med et separat udseende til hver. Det vil gøre det lettere for dine besøgende at skelne mellem fanerne i browseren. I en professionel sammenhæng kan det give mening at ændre lidt på corporate design for hvert subdomæne, så oprindelsen forbliver tydeligt genkendelig.
Et andet fokus er på performance: Filstørrelsen på dit favicon skal være så lille som muligt for ikke at have en negativ indvirkning på indlæsningstiden. Et PNG-favicon kan ofte komprimeres uden at miste kvalitet. For meget komplekse former er det værd at skifte til SVG på forsøgsbasis, hvis browser- og applikationsscenarierne tillader det. Sørg dog for, at maske-ikon og de gyldige MIME-typer.
Et favicon kan også hjælpe med tilgængeligheden. Selvom favicons ikke bruger alt-tekster, gør en klar, tydelig farvekontrast det lettere for synshandicappede brugere at vide, hvor de er. Klare ikoner er med til at sikre, at ingen ved første øjekast bliver forvirret over, hvilken fane de har åben, eller hvilken PWA der er på startskærmen.
Hvorfor indsatsen er det værd
Et fungerende favicon signalerer kvalitet og professionalisme - både for besøgende og for søgemaskiner. Det forbedrer brugeroplevelsen i browsere, på mobile enheder og i progressive webapps. Gennem omfattende vedligeholdelse får du en Ensartet udseende på tværs af alle platforme. Den involverede indsats kan reduceres betydeligt med værktøjer.
Generer dine favicons helt på forhånd, tjek cache-effekter og test forskellige enheder. Det hjælper dig med at undgå forkerte visninger, forældede ikoner eller tomme fliser. Hvis du vil fremstå professionel, bør du tage emnet favicons alvorligt - og implementere dem omhyggeligt.
