Favicon-generator til hjemmesider
Alle de ikoner, din hjemmeside har brug for, lavet ud fra dit logo og klar til upload.
Lav en komplet favicon til din hjemmeside ud fra dit logo: ikonet i browserens fane, ikonerne til hjemmeskærmen på iPhone og Android, manifestet og den HTML-kode, der linker til dem. Upload et PNG-, JPG-, WebP- eller SVG-billede, og download en ZIP-fil med det hele, uden konto og uden vandmærke.
Sådan laver du en favicon
- Vælg dit logo eller ikon i PNG, JPG, WebP eller SVG; helst kvadratisk og mindst 512 pixels.
- Vælg, om billedet skal vises helt eller udfylde kvadratet, og baggrundsfarven til Apple-ikonet.
- Klik på »Lav favicon«, og download ZIP-filen.
- Upload filerne til hjemmesidens rodmappe, og indsæt koden fra head.html i head-tagget på dine sider.
Det indeholder pakken
| Fil | Hvad den bruges til |
|---|---|
favicon.ico |
Det klassiske faneikon med størrelserne 16, 32 og 48 pixels i én fil. Browserne leder efter det, selv om du ikke linker til det. |
favicon-16x16.png og favicon-32x32.png |
Ikonerne til faner og bogmærker i moderne browsere. |
apple-touch-icon.png |
Ikonet på 180 pixels, som iPhone og iPad bruger, når din hjemmeside føjes til hjemmeskærmen. |
android-chrome-192x192.png og android-chrome-512x512.png |
Ikonerne til Android og installerbare webapps. |
site.webmanifest |
Manifestet, der angiver Android-ikonerne og din hjemmesides farve. |
head.html |
De tags, der linker til ikonerne fra dine sider. |
Sådan installerer du den på din hjemmeside
- Pak filen ud, og upload alle filerne, undtagen
head.html, til hjemmesidens rodmappe (hvor forsiden ligger). - Kopier disse tags, som også står i
head.html, ind ihead-tagget på dine sider:
<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">
- Hvis du vil, skriver du hjemmesidens navn i
nameogshort_nameisite.webmanifest.
Browserne gemmer favicons i cachen: ser du ikke den nye med det samme, genindlæser du siden helt eller venter lidt.
Tilpas eller udfyld
Alle ikoner er kvadratiske. Er dit billede ikke det, kan du tilpasse det, så det vises helt med gennemsigtige margener, eller lade det udfylde kvadratet, så det, der er tilovers i siderne, skæres væk. Til et liggende logo med tekst fungerer det som regel bedre kun at bruge logoets symbol, beskåret til et kvadrat.
Apple-ikonet kan ikke være gennemsigtigt: iOS ville fylde baggrunden med sort. Derfor laver vi det med den baggrundsfarve, du vælger, som også bruges som din hjemmesides farve på Android. De andre ikoner bevarer deres gennemsigtighed.
Tips til et godt resultat
- Tag udgangspunkt i et stort billede, mindst 512 × 512 pixels, eller endnu bedre en SVG: de små ikoner beregnes ud fra det.
- Hold det enkelt: ved 16 pixels kan man ikke læse tekst eller se fine detaljer. Et symbol eller et forbogstav i kontrastfarver fungerer meget bedre.
Har du kun brug for .ico-filen, kan du konvertere din PNG til ICO.
Begrænsninger
- Ét billede ad gangen, op til 20 MB og 100 megapixels.
- Vi ændrer ikke din hjemmeside: du skal selv uploade filerne og tilføje tags, eller bede den, der står for den, om det.
Ofte stillede spørgsmål
Hvor stort skal billedet være for at lave en favicon?
Jo større, desto bedre: mindst 512 × 512 pixels eller en SVG. Alle ikoner, fra 512 ned til 16 pixels, beregnes ud fra det.
Hvor uploader jeg favicon-filerne?
Til hjemmesidens rodmappe, den samme mappe som forsiden. Indsæt derefter tags fra head.html i head-tagget på dine sider.
Hvorfor kan jeg ikke se den nye favicon i min browser?
Fordi browserne gemmer favicons i cachen. Genindlæs siden helt, åbn den i et privat vindue, eller vent lidt på, at den opdateres.
Hvorfor har Apple-ikonet en farvet baggrund?
Fordi iOS ikke understøtter gennemsigtighed i ikoner på hjemmeskærmen og ville fylde baggrunden med sort. Vi laver det med den baggrundsfarve, du vælger, så det ser godt ud.
Kan jeg lave min hjemmesides favicon i WordPress?
WordPress har sin egen mulighed, »Webstedsikon« (under Udseende › Tilpas › Webstedsidentitet eller, afhængigt af version og tema, i de generelle indstillinger): du uploader et kvadratisk billede, og størrelserne laves automatisk. Pakken fra dette værktøj er til hjemmesider, hvor du kan uploade filer og redigere koden.