Favicon-generatorAlle størrelser, og head-blokken der hører til.
Slip et logo ind og få en rigtig favicon.ico med flere opløsninger, de PNG-størrelser browserne beder om, et apple touch icon, Androids maskable ikon og en udfyldt site.webmanifest. Det hele bliver lavet i denne fane, dit billede bliver aldrig uploadet.
Slip dit logo her
Eller tryk for at vælge en fil. Et kvadratisk billede på 512 px eller mere virker bedst.
PNG, JPG, WebP, SVG, ICO eller GIF
Dit billede bliver læst, skaleret og pakket inde i denne fane. Det bliver aldrig uploadet, og der er ingen server involveret på noget tidspunkt.
Hvilke faviconstørrelser har du faktisk brug for i 2026?
Langt færre end de pakker med tyve filer, de fleste generatorer stadig deler ud. Fem flader dækker enhver browser og ethvert styresystem, der betyder noget, og alt derudover er vægt i din <head> uden gevinst.
favicon.ico, 16 og 32 og 48
Stadig den fil, en browser leder efter i roden af dit domæne, før den har læst en eneste linje HTML. Én beholder rummer alle tre størrelser, og derfor bygger denne faviconkonverter en rigtig .ico i stedet for at omdøbe en PNG. 16 px er fanen, 32 px er retinafanen og bogmærkelinjen, 48 px er genveje i Windows.
favicon.svg, når du har en vektor
En vektorfavicon er skarp i enhver størrelse og kan endda reagere på systemets mørke tilstand via en media query inde i filen. Browsere, der forstår den, foretrækker den frem for .ico. Uploader du en SVG her, forbliver den vektor, den bliver aldrig rasteriseret og leveret tilbage som en efterligning.
apple-touch-icon.png, 180×180
Ikonet iOS bruger, når nogen lægger dit site på hjemmeskærmen. Én fil er nok: iOS har skaleret et enkelt ikon på 180 px ned siden iOS 8, så den gamle bunke fra apple-touch-icon-57x57 til 152x152 er dødvægt. Denne apple touch icon-generator skriver ét, og gør det uigennemsigtigt.
android-chrome 192 og 512, plus maskable
Bliver refereret fra site.webmanifest og ikke fra et link-tag. 192 px er hjemmeskærmen, 512 px er splashskærmen og installationsprompten. Den maskable variant er den, Android beskærer til den form, launcheren nu bruger, så dens motiv har brug for rigtig margen.
mstile-150x150.png, billig at beholde
Fastgjorte sites i Windows læser den stadig. Den koster én lille PNG og to metatags, så den er med, men der går ikke noget i stykker, hvis du sletter den. Det er det ærlige svar, og derfor står den sidst på listen i stedet for at blive solgt som nødvendig.
Hvorfor indeholder en .ico-fil flere billeder?
Fordi .ico er et beholderformat og ikke et billedformat. At forstå det er forskellen på en favicon, der vises overalt, og en, der stille fejler i Windows og i feedlæsere.
Først et katalog, så billederne
Filen åbner med et hoved på seks byte, der siger, hvor mange billeder der følger, derefter én post på seksten byte per billede med bredde, højde, længde i byte og placering i filen, og først derefter selve billeddataene. Alt er little-endian. Den struktur er grunden til, at en PNG, du omdøber til .ico, ikke er en .ico.
Den, der læser, vælger størrelsen
En browser, der tegner en fane på 16 px, læser kataloget, finder posten på 16 px og afkoder kun den. Giver du den ét billede på 512 px, skalerer den ned under tegningen, med billig sampling og et sløret resultat. Giver du den en 16 px lavet til formålet, bruger den den.
Indholdet må gerne være PNG
Det oprindelige format indlejrede BMP med omvendt pixelrækkefølge og en separat transparensmaske på én bit. Alle browsere og alle Windows siden Vista accepterer også PNG inde i beholderen, og det er, hvad denne ico-konverter skriver: mindre filer, rigtig alfa, ingen forældet encoder.
Ved 16 px viser kvaliteten sig
At skalere et logo på 1024 px direkte ned til 16 px sampler for få kildepixels og giver en grå klat. Dette værktøj halverer billedet på mellemliggende canvas, 1024 til 512 til 256 og så videre, så hver pixel bidrager. Det er den eneste grund til, at en lille favicon forbliver læsbar.
Har jeg stadig brug for et apple-touch-icon?
Ja, og det er den ene fil, hvor reglerne er anderledes end for alle andre ikoner i pakken. To ting at vide, begge klaret for dig ovenfor.
iOS smider din gennemsigtighed væk
Safari lægger hjemmeskærmsikonet på sort i stedet for på baggrundsbilledet, så et logo, du omhyggeligt har eksporteret med gennemsigtig baggrund, ankommer som en form, der svæver på en sort flise. Derfor skriver dette værktøj altid apple-touch-icon med uigennemsigtig baggrund, hvid som standard, også når du har valgt gennemsigtig til alt andet. iOS lægger heller ikke sin egen glans på længere siden iOS 7, så det, du leverer, er det, folk ser.
Android beskærer, det udfylder ikke
En Android-launcher tager et maskable ikon og klipper det til sin egen form, en cirkel, en squircle eller et afrundet kvadrat alt efter telefonen. Kun de midterste 80 % er garanteret at overleve, så et logo, der fylder fladen fra kant til kant, mister sine yderpunkter. Her holder den maskable fil 20 % margen, uanset hvad du sætter skyderen til, og den runde forhåndsvisning viser præcis, hvad launcheren beholder.
Hvordan lægger jeg en favicon på mit site?
To trin, og det er i det andet, de fleste fejl sker. Kopiér den blok, værktøjet genererer, i stedet for at skrive den efter hukommelsen.
Læg filerne i roden
Placer favicon.ico og resten ved siden af din index.html, så de svarer på dinside.dk/favicon.ico. Browsere beder om præcis den sti af sig selv, uden at nogen fortæller dem det, og derfor betyder placeringen mere end link-tagget.
Sæt head-blokken ind på hver side
Ikke kun på forsiden. Den, der lander på en dyb side og gemmer den som bogmærke, skal have det rigtige ikon. Kører dit site på en skabelon eller et framework, hører blokken hjemme i det fælles layout.
Erklær .ico uden størrelse
Brug rel="icon" href="/favicon.ico" sizes="any". Størrelserne ligger allerede i beholderen, og at hardkode én i markuppen forhindrer browseren i at hente de andre. SVG-linjen står først, så browsere, der forstår vektor, tager den.
Og så hård genindlæsning, to gange
Favicons bliver cachet aggressivt og adskilt fra siden, så dit gamle ikon kan overleve en almindelig genindlæsning i dagevis. Åbn filen direkte på dinside.dk/favicon.ico for at bekræfte, at den nye faktisk bliver leveret, før du konkluderer, at noget er i stykker.
Vil du tjekke, hvor en eksisterende QR-kode eller kort link i virkeligheden fører hen? Afkod det med QR-kode-resolveren
Mangler du et kort link til det nye site? Lav et med den gratis linkforkorter
Ikonet er den lille halvdel af et førstehåndsindtryk.
En favicon er det, folk ser, når de allerede er på dit site. Det hårdere arbejde laver linket, der bragte dem derhen, og det er som regel den del, ingen måler. Hvis det siger dig noget, er LinkScale det, vi bygger.
Se, hvor besøget kom fra
Klik, lande, enheder og hvad der skete bagefter, for hvert link du deler ud, i stedet for et tal i en andens dashboard.
Skift destinationen senere
Send et trykt eller opslået link et andet sted hen bagefter, uden at bede nogen om at opdatere det, de har gemt.
Én side til det hele
En link in bio-side med shoppen, bookingformularen og de sociale profiler, så det ene link, du må lægge, rækker længere.
Spørgsmål om favicon-generatoren
Har du flere spørgsmål?
OnlineRigtige mennesker, svarer typisk inden for få minutter.
Den er gratis, uden konto, uden vandmærke og uden grænse for, hvor mange filer du laver. Dit billede bliver aldrig uploadet: det bliver læst med browserens egen FileReader, tegnet på et canvas og pakket i Blobs, alt sammen inde i siden. Der er ingen endpoint bag værktøjet, så der er intet sted at sende det hen. Du kan bekræfte det ved at åbne browserens netværksfane, mens du bruger det, eller ved at afbryde internetforbindelsen, når siden er indlæst.
Kom videre med LinkScale
Faviconen er på plads. Linket, der henter folk ind, er den anden halvdel.
LinkScale er en platform til linkstyring for dig, der vil vide, hvad der sker efter klikket, og skifte destination uden at trykke noget om.
Free 14-day trial on every plan