Favicon-generator

Hva er en favicongenerator?

Et favicon er det lille ikonet som vises i nettleserfaner, bokmerker, historikk og søkeresultater for et nettsted. Moderne nettlesere og enheter krever mange favicon-størrelser: 16x16 for nettleserfaner, 32x32 for oppgavelinjen, 180x180 for Apple Touch-ikon, og 192x192/512x512 for Android og PWA-er. Denne generatoren lager alle nødvendige størrelser fra ett bilde.

Et godt favicon er gjenkjennelig selv i 16x16 piksler. Enkle former, kontrastfarger og minimalt med detaljer fungerer best. Mange merker bruker sin logobokstav eller et forenklet symbol. SVG-favicons (støttet av moderne nettlesere) skalerer perfekt til alle størrelser og støtter dark mode med CSS media queries.

Hvor favikoner vises

Favikoner dukker opp på flere steder enn de fleste er klar over. Det mest kjente stedet er nettleserfanen – hver åpne side viser sitt favikonikon til venstre for sidetittelen, slik at du kan identifisere en fane med et blikk når du har dusinvis av dem åpne. De vises også i nettleserens bokmerkefelt og bokmerkebehandler, i nettleserloggslisten og i adressefeltet på noen nettlesere når du begynner å skrive en URL.

På mobile enheter, når en besøkende trykker «Legg til på startskjerm» i Safari eller Chrome, bruker operativsystemet apple-touch-icon (180×180 på iOS) eller PWA-manifestikonet (192×192 på Android) som app-snarvei på enhetens startskjerm. På skrivebordet vises progressive webapper installert gjennom Chrome eller Edge i systemets oppgavelinje og Windows Startmeny ved hjelp av 512×512-ikonet fra manifestet. Søkemotorer inkludert Google viser noen ganger et nettsted sitt favikonikon i søkeresultatene ved siden av side-URL-en, noe som gjør et polert ikon til en del av merkevareminntrykket ditt allerede før brukerne klikker.

Slik bruker du dette verktøyet

Last opp et bilde (kvadratisk anbefalt, minst 512x512 piksler). Verktøyet genererer alle nødvendige favicon-størrelser inkludert ICO (for eldre nettlesere), PNG (alle standardstørrelser), Apple Touch Icon og Web App Manifest-ikoner. Last ned en ZIP-fil med alle filene og HTML-koden for å inkludere dem.

Favikonformater forklart

Moderne nettlesere og operativsystemer krever flere ulike favikonformater. Hvert format tjener en spesifikk kontekst, og å utelate ett betyr at noen enheter eller nettlesere vil falle tilbake til et generisk tomt ikon.

• favicon.ico — Det opprinnelige favikonformatet. En ICO-fil er en beholder som kan inneholde flere bildestørrelser (typisk 16×16, 32×32 og 48×48) i én enkelt fil. Plasser den i rotkatalogen til nettstedet ditt som /favicon.ico. Nettlesere henter denne banen automatisk, selv uten en <link>-tagg, noe som sikrer kompatibilitet med gamle nettlesere og feed-lesere.
• PNG-favikoner (32×32) — Moderne nettlesere foretrekker PNG. En 32×32 PNG er standard allsidig favikonikon brukt til nettleserfaner på high-DPI-skjermer. Deklarer det med: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
• apple-touch-icon (180×180) — Apple-enheter bruker dette når en besøkende lagrer nettstedet ditt til iOS- eller iPadOS-startskjermen. Uten det tar iOS et skjermbilde av siden din i stedet. Deklarer det med: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Ikke bruk gjennomsiktig bakgrunn her – Apple legger ikonet over en hvit firkant, noe som gjør gjennomsiktige områder feil.
• PWA-manifestikoner (192×192 og 512×512) — Progressive webapper deklarerer ikoner i en JSON-manifestfil. 192×192-ikonet brukes til snarveier på startskjermen på Android, og 512×512-ikonet brukes til velkomstskjermen som vises mens appen lastes inn. Referer manifestet med: <link rel="manifest" href="/site.webmanifest">
• SVG-favikonikon — Moderne nettlesere (Chrome 80+, Firefox 41+ og Safari 16+) støtter et SVG-favikonikon deklarert med: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG-favikoner er oppløsningsuavhengige og kan inkludere en prefers-color-scheme-mediespørring inne i SVG-en for å bytte automatisk mellom en lys og mørk versjon. List opp SVG-taggen før PNG-fallback slik at kompatible nettlesere bruker vektoren, mens eldre nettlesere faller tilbake til PNG.

HTML link-taggene du trenger

Kopier disse taggene inn i <head> på hver side av nettstedet ditt. Rekkefølgen er litt viktig – sett SVG først, deretter PNG, deretter ICO. Nettlesere velger det første formatet de støtter.

Filen site.webmanifest bør som minimum inneholde name, short_name, icons-array (med 192×192 og 512×512 oppføringer), theme_color, background_color og displaymodus satt til standalone for installerbare PWA-er.

Nødvendige favicon-størrelser

• favicon.ico — 16x16, 32x32 og 48x48 i en fil. For eldre nettlesere.
• apple-touch-icon.png — 180x180. Brukes av iOS når nettstedet legges til startskjermen.
• android-chrome-192x192.png og -512x512.png — for Android og Progressive Web Apps.
• favicon.svg — skalerbart vektorformat for moderne nettlesere. Støtter dark mode.

Tips for favicon-design

Faviconer må være gjenkjennelige i bittesmå størrelser. Bruk dristige former, enkel geometri og høy kontrast. Tekst fungerer sjelden under 32x32. En enkelt bokstav eller et abstrakt symbol for merkevaren din er mest effektivt. Test faviconet ditt i faktisk visningsstørrelse (16x16) — detaljer som ser flotte ut ved 512x512 blir usynlige flekker i faviconstørrelse. Bruk gjennomsiktig bakgrunn for PNG-faviconer.

Bruk høy kontrast

Favikoner vises mot nettleserkrom som varierer fra lys grå til nær-svart avhengig av brukerens systemtema. Et design som ser skarpt ut på hvit bakgrunn, kan forsvinne på en mørk fanebjørnstang. Sikt mot et kontrastforhold på minst 4,5:1 mellom ikonets forgrunn og bakgrunn. Et mørkt ikon på livlig bakgrunn, eller et lyst ikon på mørk bakgrunn, fungerer begge godt.

Design for siliuettgjenkjenning

Ved 16×16 piksler er ikonet ditt bare 256 piksler totalt. Hjernen leser favikoner mer etter form enn etter detaljer. En karakteristisk silhuett – en enkelt bokstav, et geometrisk merke, et gjenkjennelig symbol – fungerer langt bedre enn en detaljert illustrasjon. Logoer som staver ut et firmanavn i sin helhet, er nesten uleselige i favikonsstørrelse. Isoler det mest gjenkjennelige elementet i merkevaren din og sentrér det med romslig innfylling slik at det ikke blir beskjært.

Vanlige favikonifeil

• Bare å gi en 16×16 PNG – dette ser uskarpt ut på retina- og high-DPI-skjermer. Inkluder alltid minst en 32×32 PNG.
• Glemme apple-touch-icon – iOS vil sette inn et skjermbilde i stedet, noe som resulterer i en uleselig liten versjon av hele siden din.
• Gjennomsiktig bakgrunn på apple-touch-icon – Apple gjengir de gjennomsiktige områdene som svarte, noe som ødelegger designet. Bruk en ensfarget bakgrunn for 180×180-ikonet.
• Å bruke en detaljert, travel logo – fine detaljer forsvinner under 64×64 piksler. Stript ned designet til kjernemerket.
• Ikke legge til en cache-buster etter en oppdatering – nettlesere bufrer favikoner aggressivt. Legg til en versjonsspørringsstreng (?v=2) til href-en for å tvinge nettlesere til å hente den nye filen på nytt.

Klientside-generering og personvern

Denne favikonsgeneratoren kjører helt inne i nettleseren din ved hjelp av HTML Canvas API. Teksten, fargene og hjørneavrundingens innstillinger du skriver inn, sendes aldri til en server. Designet ditt forblir på enheten din, og du laster ned de genererte filene direkte til datamaskinen din. Dette betyr at verktøyet fungerer uten nett når siden er lastet inn, og det kreves ingen konto eller registrering.

Ofte stilte spørsmål

Trenger jeg fortsatt en .ico-fil?

For maksimal kompatibilitet, ja. Noen eldre nettlesere, RSS-lesere og verktøy ser fortsatt etter favicon.ico i rotkatalogen. Moderne nettlesere foretrekker PNG eller SVG spesifisert i link-taggen. Den sikreste tilnærmingen er å ha både favicon.ico (for bakoverkompatibilitet) og link-tagger for PNG/SVG (for moderne nettlesere).

Hva er et SVG-favicon?

SVG-favicons er vektorbaserte ikoner som skalerer perfekt til alle størrelser uten pikselering. De støttes av Chrome, Firefox, Edge og Safari 15+. Den store fordelen er støtte for CSS media queries — du kan ha forskjellig farge for lys og mørk modus. Bruk en link-tag med type image/svg+xml for å spesifisere SVG-faviconet.

Trenger jeg fortsatt en favicon.ico-fil?

Ja, foreløpig. Noen eldre nettlesere, e-postklienter, RSS-lesere og nettroboter ser fortsatt etter /favicon.ico i roten til domenet ditt uten å lese noen HTML link-taggar i det hele tatt. Å beholde en 32×32 favicon.ico i rotkatalogen tar ubetydelig plass og dekker disse grensetilfellene. Moderne nettlesere foretrekker SVG- eller PNG-versjonene som er deklarert i <link>-taggene dine fremfor ICO-fallback.

Kan jeg bruke en emoji som favikonikon?

Ja – med SVG-favikoner. Du kan deklarere en innebygd SVG som inneholder et tekstelement med et emoji-tegn, og moderne nettlesere gjengir det perfekt i enhver oppløsning. SVG-tilnærmingen støtter også mørk modus: pakk ulike fyllinger inn i en prefers-color-scheme-mediespørring inne i SVG-filen. Denne generatoren lar deg skrive inn en emoji eller et tegn i tekstfeltet og eksportere det som et SVG-favikonikon klart til bruk.