Favicon-formater forklart: ICO, PNG, SVG og hva nettlesere trenger

Hvorfor favikoner fortsatt er merkelig kompliserte

Et favicon ser ut som ett lite bilde, men det befinner seg i skjæringspunktet mellom nettlesergrensesnitt, bokmerker, faner, festede snarveier, søkeresultater, mobilstartsider og installasjoner av progressive webapper. Hver kontekst har litt forskjellige forventninger.

Derfor føles råd om favikoner ofte rotete. Noen team leverer bare én favicon.ico, fordi det pleide å være nok. Andre genererer et dusin filer uten å vite hvilke som faktisk brukes. Den fornuftige mellomveien er mindre: forstå hva ICO, PNG og SVG hver for seg er gode til, og lever deretter et kompakt sett som dekker dagens nettlesere og vanlige enhetskontekster.

Favikoner er ikke stedet for å vise frem en bilde-pipeline. De er stedet for å være kjedelig, eksplisitt og kompatibel.

ICO: det gamle formatet som nekter å dø

ICO er den klassiske Windows-ikonbeholderen. Den kan inneholde flere punktgrafikkbilder i ulike størrelser, vanligvis 16×16, 32×32 og 48×48 piksler. Det er viktig fordi et favicon kan gjengis svært lite i en nettleserfane, større i en bokmerkeliste og annerledes igjen på Windows-snarveier.

Den viktige detaljen er at ICO er en beholder, ikke bare ett bilde. En god favicon.ico inneholder vanligvis flere rasterstørrelser, slik at nettleseren eller operativsystemet kan velge nærmeste treff i stedet for å skalere én eneste liten punktgrafikk.

ICO er fortsatt nyttig av tre grunner:

• Nettlesere kan be om /favicon.ico automatisk, selv om du ikke lenker til den i HTML-en din.
• Noen eldre nettlesere og integrasjoner forventer den.
• Den er en trygg reserve når nyere ikondeklarasjoner ignoreres.

Det betyr ikke at ICO bør være det eneste ikonet ditt. Det er tungvint å redigere, ikke spesielt vennlig for moderne arbeidsflyter og dårlig som sannhetskilde for et varemerke. Behandle det som kompatibilitetsreserven.

I praksis bør du plassere en reell /favicon.ico i nettstedets rot. Ikke server en 404 der med mindre du liker støyende logger og unødvendige nye nettleserforsøk.

PNG: den pålitelige arbeidshesten

PNG er fortsatt det mest forutsigbare rasterformatet for favikoner og touch-ikoner. Det støtter gjennomsiktighet, har bred støtte og oppfører seg konsistent på tvers av nettlesere og plattformer.

For favikoner er PNG nyttig når du vil ha eksplisitte ikoner i pikselstørrelser, som 32×32 eller 48×48. For ikoner på mobilens startskjerm er PNG i praksis obligatorisk i noen miljøer. Apple touch-ikoner er for eksempel PNG-baserte i vanlig produksjonsbruk.

Noen praktiske regler hjelper:

• Eksporter fra en vektorkilde, ikke fra et punktgrafikkbilde som allerede er lite.
• Sørg for at ikonet er lesbart i 16×16 før du bryr deg om større størrelser.
• Legg til nok luft slik at merket ikke føles avkuttet i avrundede eller maskerte kontekster.
• Unngå liten tekst, tynne linjer og detaljerte illustrasjoner.

PNG-komprimering er vanligvis ikke verdt å gruble over for favikoner, fordi filene er små. Likevel bør du ikke levere et 500 KB touch-ikon bare fordi det kom rett ut av en designeksport. Hvis du allerede vurderer bredere bildevalg, gjelder den samme disiplinerte tenkningen fra valg av bildeformater på det moderne nettet også her: velg formatet for jobben, ikke fordi det er moderne.

SVG: det moderne, fleksible alternativet

SVG-favikoner er attraktive fordi de er oppløsningsuavhengige. Én liten fil kan gjengis skarpt i mange størrelser, og den kan redigeres direkte i kode eller eksporteres fra designprogramvare.

Moderne versjoner av Chromium, Firefox og Safari støtter SVG-favikoner. Det gjør SVG til et godt primært favicon-format for mange nettsteder, spesielt når ikonet er en enkel logo, glyf eller geometrisk form.

Men SVG-favikoner har forbehold.

For det første bør SVG-en være selvstendig. Ikke baser deg på eksterne skrifter, eksterne bilder eller skript. Nettlesere legger begrensninger på SVG brukt som bilde, og selv når noe fungerer i én nettleser, kan det feile i en annen.

For det andre må du holde det visuelt enkelt. SVG løser ikke 16-pikselproblemet på magisk vis. En detaljert vektorillustrasjon er fortsatt en uklar flekk når den presses inn i en fane.

For det tredje må du være forsiktig med dynamisk styling. Noen team bruker prefers-color-scheme inne i et SVG-favicon slik at ikonet tilpasser seg mørke og lyse nettlesertemaer. Dette kan fungere, men nettleseratferd og mellomlagring kan være ujevn. Hvis merkevaregjenkjenning betyr noe, slår ett robust ikon ofte et smart adaptivt ikon.

SVG er en god kilde og et godt moderne leveringsformat. Det er ikke en grunn til å droppe reservefiler.

Hva nettlesere faktisk ser etter

Nettlesere oppdager favikoner på to hovedmåter: eksplisitte HTML-lenker og implisitte forespørsler til roten.

Den implisitte oppførselen er den gamle: Hvis nettleseren vil ha et ikon og ikke har funnet et, kan den be om /favicon.ico. Derfor er ICO-filen i roten fortsatt nyttig, også på moderne nettsteder.

Den eksplisitte oppførselen bruker <link>-elementer i dokumentets head. Et kompakt moderne oppsett ser slik ut:

<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 deretter peke til større PNG-ikoner som brukes for installerbare webapper:

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

Dette er ikke det eneste gyldige oppsettet, men det er et godt utgangspunkt. Det gir moderne nettlesere en SVG, gir en konvensjonell ICO-reserve, dekker lagring på iOS-startskjermen og støtter installasjonskontekster for apper.

Favicon-settet de fleste nettsteder bør levere

For et vanlig markedsføringsnettsted, dokumentasjonsnettsted, SaaS-app eller en publikasjon er dette settet nok:

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

Du kan legge til flere størrelser hvis en plattform har et spesifikt krav, men ikke generer ti filer av gammel vane. Hver ekstra fil er enda en ting som må mellomlagres, huskes, navngis riktig eller oppdateres etter en rebranding.

Hvis nettstedet ditt ikke er installerbart og ikke har noe manifest, trenger du kanskje ikke ikonene på 192 og 512 piksler. Hvis nettstedet ditt oppfører seg som en app, trenger du dem sannsynligvis.

Vanlige feilmoduser

De vanligste favicon-feilene er ikke kunstneriske. De er leveringsproblemer.

Én er aggressiv mellomlagring. Nettlesere holder hardnakket fast ved favikoner. Under testing kan det hende at et endret ikon ikke vises før du tvinger en oppdatering, tømmer nettstedsdata, bruker et nytt filnavn eller tester i en fersk profil. Ved produksjonsmessige rebrandinger kan det hjelpe å endre /icon.svg?v=2 i HTML, men rotfilen /favicon.ico er vanskeligere fordi nettlesere ber om den direkte. Å erstatte filen og vente ut mellomlagrene er ofte en del av jobben.

Et annet vanlig problem er feil MIME-type. SVG bør serveres som image/svg+xml, PNG som image/png, og ICO vanligvis som image/x-icon eller image/vnd.microsoft.icon. Mange nettlesere er tilgivende, men ikke alle kontekster er det. Hvis noe bare feiler i én nettleser, bør du inspisere nettverksresponsen før du tegner ikonet på nytt. De samme vanene som brukes ved feilsøking av omdirigeringer og HTTP-headere i produksjon, gjelder her: se på den faktiske responsen, ikke hva CMS-et hevder at det serverer.

Et tredje problem er designtetthet. Logoer som fungerer vakkert i en nettstedstopp, feiler ofte som favikoner. Faneikonet er en brutal test. Fjern ord, forenkle former, øk kontrasten og test i reelle størrelser. Hvis ikonet er meningsbærende innhold inne på siden, er tilgjengelighetshensyn som alt-tekst viktige; for selve favikonet er det dekorasjon i nettlesergrensesnittet, ikke sideinnhold. For skillet, se vår pragmatiske guide til alt-tekst for bilder.

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

💡 Prøv dette: Generer ICO-, PNG- og SVG-variantene som moderne nettlesere forventer, i én omgang med Ultimate Favicon Generator.

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

En enkel implementeringssjekkliste

Bruk denne sjekklisten før lansering:

1. Start med en ren vektormaster.
2. Test merket i 16×16 og 32×32.
3. Eksporter et selvstendig SVG-favicon.
4. Generer en ICO-reserve med flere størrelser.
5. Eksporter et 180×180 Apple touch-ikon.
6. Legg til 192×192 og 512×512 PNG-er hvis du bruker et manifest.
7. Legg /favicon.ico i nettstedets rot.
8. Verifiser statuskoder, MIME-typer og mellomlagringsheadere.
9. Test i minst én Chromium-nettleser, Firefox og Safari hvis målgruppen din inkluderer Apple-enheter.

Favikoner er små, men de er også svært synlige. Et ødelagt et får et nettsted til å føles uferdig. Et vellaget et forsvinner inn i grensesnittet, og det er nettopp poenget.