Gratis favicon-generator for alle plattformer

En favicon-generator sparer deg for det kjedelige arbeidet med å bygge merkevaren til et nettsted: å eksportere den samme logoen i seks størrelser, navngi hver fil riktig og skrive taggene som forteller hver plattform hvor de finner dem. Favicon-en er liten, men den kommer langt. Den vises i nettleserfaner, bokmerker og historikk, på startskjermen på telefonen og ved siden av nettstedsnavnet ditt i Google-resultatene, der Google ber om et kvadratisk ikon på minst 8x8 piksler og anbefaler ett større enn 48x48 (Google Search Central, favicons i søkeresultater).

Hvordan bruker du favicon-generatoren?

Dra en PNG-, JPG- eller SVG-fil inn i verktøyet, helst på 512x512 piksler eller større. Generatoren tegner bildet ditt på et lerret i hver størrelse med jevning av høy kvalitet og viser de seks resultatene side om side.

1. Forbered en kvadratisk kilde. Verktøyet skalerer bildet ditt til hver kvadratisk størrelse uten å beskjære det, så en rektangulær logo ser strukket ut. Beskjær den til et kvadrat først, med litt luft rundt merket.
2. Dra inn filen eller klikk for å velge den. Forhåndsvisningen vises på et sekund.
3. Last ned pakken med knappen «Last ned alle (.zip)», eller hver PNG for seg.
4. Kopier HTML-koden inn i <head> på hver side, vanligvis i malen for nettstedet ditt.
5. Kopier manifestet, fyll inn feltene name og short_name med merkevaren din, og lagre det som site.webmanifest i roten av nettstedet ditt.
6. Last filene opp til roten av domenet ditt, slik at /favicon-32x32.png og de andre banene i koden fungerer.

Fordi behandlingen skjer i nettleseren din, fungerer generatoren også med ulanserte logoer og kundefiler du ikke har lov til å sende til en tredjepartsserver.

Hvilke favicon-størrelser trenger du i 2026?

Seks PNG-filer dekker nettlesere, iOS, Android og Windows. Tabellen viser hva generatoren lager, hvor hver fil brukes, og taggen eller filen som refererer til den.

Paret 192 og 512 er ikke tilfeldig: for Chromium-nettlesere må et manifest for web-apper ha minst et 192x192-ikon og et 512x512-ikon, og Chrome skalerer dem til de andre stedene det trenger (web.dev, legg til et manifest for web-appen). Størrelsen 180x180 samsvarer med iPhone-ikonet i høy oppløsning i Apples egen eksempelkode for webklipp (Apple, konfigurere webapplikasjoner). Windows-flisen er en eldre fil: den gjør ingen skade, og du kan fjerne taggen hvis du ikke retter deg mot gamle Windows-installasjoner.

Hvilken HTML-kode gir generatoren deg?

Seks linjer for <head>: to rel="icon"-lenker for PNG-favicon-ene, Apple touch-ikonet, lenken til manifestet, Windows-flisen og en theme-color-metatagg. Når en side lister flere ikoner, leser nettleseren attributtene type og sizes for å velge det mest passende, og går videre til neste hvis en fil feiler (MDN, lenketyper).

To innstillinger i den genererte koden er verdt å redigere. theme-color og fargene i manifestet står som hvite (#ffffff) som standard: bytt dem ut med merkefargen din hvis nettleserlinjen og oppstartsskjermen til en installert app skal samsvare med nettstedet ditt. Og manifestet lar name og short_name stå tomme med vilje: web.dev forklarer at minst ett av de to er påkrevd, og at short_name brukes på startskjermen der plassen er begrenset.

Hjelper favicon-en SEO?

Ikke som rangeringsfaktor, men den påvirker hvordan resultatet ditt ser ut. Google kan vise favicon-en din ved siden av nettstedsnavnet øverst i hvert resultat, så et tydelig ikon hjelper søkere å kjenne igjen merkevaren din, og kan løfte klikkraten din mot resultater med en generisk jordklode.

Google viser vilkårene for å være med, og et manglende vilkår er vanligvis grunnen til at favicon-en ikke vises:

• En lenke-tagg på hjemmesiden. Google leser rel="icon", shortcut icon, apple-touch-icon og apple-touch-icon-precomposed.
• Tilgang til gjennomsøking. Googlebot må nå hjemmesiden, og Googlebot-Image må nå ikonfilen. En regel i robots.txt som blokkerer bildemappen din, kan skjule favicon-en.
• En kvadratisk fil på minst 8x8 piksler, helst større enn 48x48, i et støttet format: BMP, GIF, ICO, PNG, JPEG, PPM eller TIFF. De genererte PNG-filene oppfyller kravet.
• En favicon per vertsnavn. Et subdomene kan ha sitt eget ikon; en undermappe som /blog kan ikke det.
• En stabil URL som du ikke endrer ofte.

Etter en endring må Google gjennomsøke hjemmesiden på nytt, og det kan ta fra noen dager til flere uker ifølge den samme dokumentasjonen. Å be om indeksering av hjemmesiden i Search Console fremskynder prosessen.

Hvordan designer du en favicon som er lesbar på 16 piksler?

Design for den minste størrelsen først. På 16x16 har hele ikonet 256 piksler, så en full logo med slagord blir til en uskarp flekk. Disse reglene holder ikonet lesbart:

• Bruk logomerket, ikke hele logoen. Et symbol eller en enkelt fet bokstav tåler å bli redusert; et ord gjør ikke det.
• Fyll kvadratet. La det være en tynn margin, men unngå store tomme kanter som gjør merket lite i fanen.
• Velg sterk kontrast og to eller tre flate farger. Tynne linjer og gradienter forsvinner i små størrelser.
• Sjekk lyse og mørke temaer. Et gjennomsiktig PNG-bilde med et mørkt merke forsvinner på en mørk fanelinje; en solid bakgrunn eller en lys kontur løser det.
• Tenk på masker for Android. Android kan beskjære appikoner til en sirkel. MDN anbefaler et maskerbart ikon med den viktige delen innenfor en sikker sone og en ugjennomsiktig bakgrunn (MDN, definer app-ikoner). Hvis merket ditt berører kantene, eksporter en versjon med margin til filene på 192 og 512.

Hvilke feil med favicon er de vanligste?

De fleste ødelagte favicon-er skyldes en bane eller en cache, ikke selve bildet.

• Filer lastet opp i feil mappe. Den genererte koden peker til roten (/favicon-32x32.png). Hvis du legger filene i /assets, må du oppdatere hver bane.
• Ingen fil på /favicon.ico. Når en side ikke oppgir noe ikon, lar HTML-standarden nettlesere be om /favicon.ico som standard (WHATWG HTML-standarden, lenketyper). Sider uten taggene, for eksempel PDF-filer eller feilsider, gir da en 404 i loggene dine. Generatoren lager bare PNG-filer, så hvis du vil ha reserveløsningen, eksporter 32x32-PNG-en din som ICO-fil med et hvilket som helst bildeprogram.
• Et gammelt ikon som ikke forsvinner. Nettlesere cacher favicon-er svært aggressivt. Gi filen nytt navn, eller legg til en versjonsparameter (?v=2) etter en redesign.
• Tagger bare på forsiden. Nettlesere leser ikonet side for side, så legg koden i den delte malen.
• En strukket logo. Beskjær kilden til et kvadrat før du genererer, som beskrevet over.

Når filene er på nett, kjør favicon-uttrekkeren på domenet ditt for å se hvilke ikoner en søkerobot faktisk finner, og deretter SEO-revisjonen på siden for å sjekke resten av head-taggene dine.

Hvordan passer favicon-en inn i merkevaren din i AI-svar?

AI-assistenter som ChatGPT og Perplexity viser ofte ikonet til hvert nettsted de siterer, ved siden av kildelenken. Et konsistent favicon gjør merkevaren din gjenkjennelig der også, men det er bare rammen: å bli sitert avhenger av innholdet og autoriteten din. For å se om nettstedet ditt i det hele tatt dukker opp i disse svarene, måler sporing av AI-omtaler merkevareomtalene dine hver måned, spørsmål for spørsmål og modell for modell, og GEO- og SEO-dashbordet setter dem ved siden av Google-klikkene og -posisjonene dine.

Et komplett sett med favicon-er tar ett kvadratisk bilde og to minutter. Generer ikonene dine ovenfor, lim inn koden i malen din, og se deretter Sorank-abonnementene for å øke trafikken som skal se dem, på autopilot.