Favicon-formater forklaret: ICO, PNG, SVG og hvad browsere har brug for

Hvorfor favicons stadig er mærkeligt komplicerede

Et favicon ligner ét lille billede, men det ligger i krydsfeltet mellem browserens egen brugerflade, bogmærker, faner, fastgjorte genveje, søgeresultater, mobilers hjemmeskærme og installationer af progressive webapps. Hver kontekst har lidt forskellige forventninger.

Derfor føles råd om favicons ofte rodede. Nogle teams leverer kun en enkelt favicon.ico, fordi det engang var nok. Andre genererer et dusin filer uden at vide, hvilke der faktisk bliver brugt. Den fornuftige mellemvej er mindre: forstå, hvad ICO, PNG og SVG hver især gør godt, og lever derefter et kompakt sæt, der dækker aktuelle browsere og almindelige enhedskontekster.

Favicons er ikke stedet at vise en billedpipeline frem. Det er stedet, hvor man skal være kedelig, eksplicit og kompatibel.

ICO: det gamle format, der nægter at dø

ICO er den klassiske Windows-ikoncontainer. Den kan indeholde flere bitmapbilleder i forskellige størrelser, typisk 16×16, 32×32 og 48×48 pixels. Det betyder noget, fordi et favicon kan blive vist meget småt i en browserfane, større i en bogmærkeliste og anderledes igen på Windows-genveje.

Den vigtige detalje er, at ICO er en container, ikke bare ét billede. En god favicon.ico indeholder normalt flere rasterstørrelser, så browseren eller operativsystemet kan vælge det nærmeste match i stedet for at skalere én enkelt lille bitmap.

ICO er stadig nyttigt af tre grunde:

• Browsere kan automatisk anmode om /favicon.ico, selv hvis du ikke linker til den i din HTML.
• Nogle ældre browsere og integrationer forventer den.
• Den er en sikker fallback, når nyere ikonangivelser ignoreres.

Det betyder ikke, at ICO bør være dit eneste ikon. Det er besværligt at redigere, ikke særligt venligt over for moderne workflows og dårligt som den autoritative kilde til et brandmærke. Behandl det som kompatibilitetsfallbacken.

I praksis bør du placere en reel /favicon.ico i sitets rod. Lad være med at servere en 404 dér, medmindre du holder af støjende logs og unødige browserforsøg.

PNG: den pålidelige arbejdshest

PNG er stadig det mest forudsigelige rasterformat til favicons og touch-ikoner. Det understøtter transparens, er bredt understøttet og opfører sig ensartet på tværs af browsere og platforme.

Til favicons er PNG nyttigt, når du vil have eksplicitte ikoner i pixelstørrelser som 32×32 eller 48×48. Til ikoner på mobilers hjemmeskærme er PNG reelt obligatorisk i nogle miljøer. Apple touch icons er for eksempel PNG-baserede ved normal produktionsbrug.

Et par praktiske regler hjælper:

• Eksportér fra en vektorkilde, ikke fra en bitmap, der allerede er lille.
• Sørg for, at ikonet er læseligt ved 16×16, før du bekymrer dig om større størrelser.
• Tilføj nok afstand, så mærket ikke føles afskåret i afrundede eller maskerede kontekster.
• Undgå fin tekst, tynde linjer og detaljerede illustrationer.

PNG-komprimering er normalt ikke værd at besætte sig over for favicons, fordi filerne er bittesmå. Alligevel bør du ikke levere et touch-ikon på 500 KB, bare fordi det kom direkte ud af en designeksport. Hvis du allerede gennemgår bredere billedvalg, gælder den samme disciplinerede tænkning fra beslutninger om billedformater på det moderne web også her: vælg formatet til opgaven, ikke fordi det er moderne.

SVG: den moderne, fleksible mulighed

SVG-favicons er attraktive, fordi de er opløsningsuafhængige. Én enkelt lille fil kan gengives skarpt i mange størrelser, og den kan redigeres direkte i kode eller eksporteres fra designsoftware.

Moderne versioner af Chromium, Firefox og Safari understøtter SVG-favicons. Det gør SVG til et godt primært favicon-format for mange sites, især når ikonet er et simpelt logo, glyf eller geometrisk mærke.

Men SVG-favicons har forbehold.

For det første bør SVG’en være selvstændig. Stol ikke på eksterne skrifttyper, fjernbilleder eller scripts. Browsere lægger begrænsninger på SVG, der bruges som billede, og selv når noget virker i én browser, kan det fejle i en anden.

For det andet skal det holdes visuelt enkelt. SVG løser ikke på magisk vis 16-pixel-problemet. En detaljeret vektorillustration er stadig en sløring, når den presses ned i en fane.

For det tredje skal du være forsigtig med dynamisk styling. Nogle teams bruger prefers-color-scheme inde i et SVG-favicon, så ikonet tilpasser sig mørke og lyse browser-temaer. Det kan fungere, men browseradfærd og caching kan være ujævn. Hvis brandgenkendelse betyder noget, slår ét robust ikon ofte et smart adaptivt ikon.

SVG er en god kilde og et godt moderne leveringsformat. Det er ikke en grund til at springe fallback-filer over.

Hvad browsere faktisk leder efter

Browsere finder favicons på to hovedmåder: eksplicitte HTML-links og implicitte rodanmodninger.

Den implicitte adfærd er den gamle: Hvis browseren vil have et ikon og ikke har fundet et, kan den anmode om /favicon.ico. Derfor er ICO-filen i roden stadig nyttig, selv på moderne sites.

Den eksplicitte adfærd bruger <link>-elementer i dokumentets head. En kompakt moderne opsætning ser sådan ud:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Manifestet kan derefter pege på større PNG-ikoner, der bruges til installerbare webapps:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Dette er ikke den eneste gyldige opsætning, men det er et godt udgangspunkt. Det giver moderne browsere en SVG, leverer en konventionel ICO-fallback, dækker gemning på iOS-hjemmeskærmen og understøtter appinstallationskontekster.

Favicon-sættet, som de fleste sites bør levere

For et almindeligt marketingsite, dokumentationssite, SaaS-app eller publikation er dette sæt nok:

• /favicon.ico, der indeholder 16×16 og 32×32, eventuelt 48×48.
• /icon.svg som det moderne skalerbare favicon.
• /apple-touch-icon.png i 180×180.
• /icon-192.png og /icon-512.png, hvis du har et webapp-manifest.

Du kan tilføje flere størrelser, hvis en platform har et specifikt krav, men generér ikke ti filer af gammel vane. Hver ekstra fil er endnu en ting, der skal caches, glemmes, navngives forkert eller efterlades forældet efter en rebranding.

Hvis dit site ikke kan installeres og ikke har noget manifest, har du måske ikke brug for ikonerne på 192 og 512 pixels. Hvis dit site opfører sig som en app, har du sandsynligvis.

Almindelige fejltyper

De mest almindelige favicon-fejl er ikke kunstneriske. De er leveringsproblemer.

Ét problem er aggressiv caching. Browsere holder stædigt fast i favicons. Under test vises et ændret ikon måske ikke, før du laver en hård opdatering, rydder sitedata, bruger et nyt filnavn eller tester i en frisk profil. Ved rebranding i produktion kan det hjælpe at ændre /icon.svg?v=2 i HTML, men rodens /favicon.ico er sværere, fordi browsere anmoder direkte om den. At erstatte filen og vente på, at caches udløber, er ofte en del af arbejdet.

Et andet almindeligt problem er den forkerte MIME-type. SVG bør serveres som image/svg+xml, PNG som image/png, og ICO typisk som image/x-icon eller image/vnd.microsoft.icon. Mange browsere er tilgivende, men det gælder ikke alle kontekster. Hvis noget kun fejler i én browser, så inspicér netværkssvaret, før du tegner ikonet om. De samme vaner, der bruges ved debugging af redirects og HTTP-headers i produktion, gælder her: Se på det faktiske svar, ikke på hvad CMS’et hævder, det serverer.

Et tredje problem er designtæthed. Logoer, der fungerer smukt i et website-header, fejler ofte som favicons. Faneikonet er en brutal test. Fjern ord, forenkl former, øg kontrasten, og test i reelle størrelser. Hvis ikonet er meningsbærende indhold inde på siden, er tilgængelighedshensyn som alt-tekst relevante; for selve faviconet er det dekoration i browserens brugerflade, ikke sideindhold. Se forskellen i vores pragmatiske guide til alt-tekst for billeder.

<!-- tool-cta:start -->

💡 Prøv dette: Generér de ICO-, PNG- og SVG-varianter, som moderne browsere forventer, på én gang med Ultimate Favicon Generator.

<!-- tool-cta:end -->

En enkel implementeringstjekliste

Brug denne tjekliste før lancering:

1. Start med en ren vektormaster.
2. Test mærket ved 16×16 og 32×32.
3. Eksportér et selvstændigt SVG-favicon.
4. Generér en ICO-fallback med flere størrelser.
5. Eksportér et Apple touch-ikon på 180×180.
6. Tilføj PNG’er på 192×192 og 512×512, hvis du bruger et manifest.
7. Placer /favicon.ico i sitets rod.
8. Verificér statuskoder, MIME-typer og caching-headers.
9. Test i mindst én Chromium-browser, Firefox og Safari, hvis din målgruppe omfatter Apple-enheder.

Favicons er små, men de er også meget synlige. Et ødelagt favicon får et site til at føles ufærdigt. Et veludført favicon forsvinder ind i brugerfladen, og det er netop pointen.