Favicon-generator for nettsider
Alle ikonene nettsiden din trenger, laget ut fra logoen din og klare til opplasting.
Lag en komplett favicon til nettsiden din ut fra logoen din: ikonet i fanen i nettleseren, ikonene for hjemskjermen på iPhone og Android, manifestet og HTML-koden som lenker til dem. Last opp et PNG-, JPG-, WebP- eller SVG-bilde, og last ned en ZIP-fil med alt sammen, uten konto og uten vannmerke.
Slik lager du en favicon
- Velg logoen eller ikonet ditt i PNG, JPG, WebP eller SVG; helst kvadratisk og minst 512 piksler.
- Velg om bildet skal vises helt eller fylle ut kvadratet, og bakgrunnsfargen for Apple-ikonet.
- Klikk på «Lag favicon», og last ned ZIP-filen.
- Last opp filene til rotmappen på nettstedet, og lim inn koden fra head.html i head-taggen på sidene dine.
Dette inneholder pakken
| Fil | Hva den brukes til |
|---|---|
favicon.ico |
Det klassiske faneikonet med størrelsene 16, 32 og 48 piksler i én fil. Nettleserne ser etter det selv om du ikke lenker til det. |
favicon-16x16.png og favicon-32x32.png |
Ikonene for faner og bokmerker i moderne nettlesere. |
apple-touch-icon.png |
Ikonet på 180 piksler som iPhone og iPad bruker når nettsiden din legges til på hjemskjermen. |
android-chrome-192x192.png og android-chrome-512x512.png |
Ikonene for Android og installerbare nettapper. |
site.webmanifest |
Manifestet som angir Android-ikonene og fargen på nettsiden din. |
head.html |
Taggene som lenker til ikonene fra sidene dine. |
Slik installerer du den på nettsiden
- Pakk ut filen, og last opp alle filene, unntatt
head.html, til rotmappen på nettstedet (der forsiden ligger). - Kopier disse taggene, som også står i
head.html, inn ihead-taggen på sidene dine:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
- Om du vil, skriver du navnet på nettsiden i
nameogshort_nameisite.webmanifest.
Nettleserne lagrer favikoner i hurtigbufferen: ser du ikke den nye med en gang, laster du siden helt inn på nytt eller venter litt.
Tilpass eller fyll ut
Alle ikoner er kvadratiske. Er ikke bildet ditt det, kan du tilpasse det, så det vises helt med gjennomsiktige marger, eller la det fylle ut kvadratet, så det som er til overs på sidene, skjæres bort. For en liggende logo med tekst fungerer det som regel bedre å bruke bare symbolet i logoen, beskåret til et kvadrat.
Apple-ikonet kan ikke være gjennomsiktig: iOS ville fylt bakgrunnen med svart. Derfor lager vi det med bakgrunnsfargen du velger, som også brukes som fargen på nettsiden din på Android. De andre ikonene beholder gjennomsiktigheten.
Tips for et godt resultat
- Ta utgangspunkt i et stort bilde, minst 512 × 512 piksler, eller enda bedre en SVG: de små ikonene beregnes ut fra det.
- Hold det enkelt: ved 16 piksler kan man ikke lese tekst eller se fine detaljer. Et symbol eller en forbokstav i kontrastfarger fungerer mye bedre.
Trenger du bare .ico-filen, kan du konvertere PNG-filen din til ICO.
Begrensninger
- Ett bilde om gangen, opptil 20 MB og 100 megapiksler.
- Vi endrer ikke nettsiden din: du må selv laste opp filene og legge til taggene, eller be den som har ansvaret for den, om å gjøre det.
Ofte stilte spørsmål
Hvor stort må bildet være for å lage en favicon?
Jo større, desto bedre: minst 512 × 512 piksler eller en SVG. Alle ikonene, fra 512 ned til 16 piksler, beregnes ut fra det.
Hvor laster jeg opp favicon-filene?
Til rotmappen på nettstedet, den samme mappen som forsiden. Lim deretter inn taggene fra head.html i head-taggen på sidene dine.
Hvorfor ser jeg ikke den nye favicon i nettleseren min?
Fordi nettleserne lagrer favikoner i hurtigbufferen. Last siden helt inn på nytt, åpne den i et privat vindu, eller vent litt til den oppdateres.
Hvorfor har Apple-ikonet farget bakgrunn?
Fordi iOS ikke støtter gjennomsiktighet i ikoner på hjemskjermen og ville fylt bakgrunnen med svart. Vi lager det med bakgrunnsfargen du velger, så det ser bra ut.
Kan jeg lage favicon til nettsiden min i WordPress?
WordPress har sitt eget alternativ, «Nettstedsikon» (under Utseende › Tilpass › Nettstedsidentitet eller, avhengig av versjon og tema, i de generelle innstillingene): du laster opp et kvadratisk bilde, og størrelsene lages automatisk. Pakken fra dette verktøyet er for nettsider der du kan laste opp filer og redigere koden.