Favicon-generator — ICO, PNG og Apple Touch Icon
Lav ét billede om til et komplet favicon-sæt: favicon.ico, PNG-ikoner, et apple-touch-icon og et web app-manifest.
Apple-touch-icon er altid uigennemsigtigt. Når appnavnet er tomt, bruger manifestet billedfilens navn.
Forhåndsvisning
Filer i ZIP'en
Sådan laver du et favicon
- Vælg et kvadratisk billede, helst mindst 512 gange 512 pixels, i PNG-, JPG-, WebP- eller SVG-format.
- Vælg, hvordan ikke-kvadratiske billeder skal passe: contain udfylder dem med baggrundsfarven, cover beskærer dem i midten.
- Indstil baggrunds- og temafarverne, afstanden og om de små ikoner skal beholde en gennemsigtig baggrund.
- Skriv appnavnet og det korte navn, som web app-manifestet skal indeholde, og tjek derefter de live forhåndsvisninger.
- Download ZIP'en med alle filer, eller tag favicon.ico og apple-touch-icon.png hver for sig, og kopier HTML-uddraget.
Hvornår det hjælper
- Giv et nyt website et favicon uden at åbne et billedredigeringsprogram.
- Erstat et manglende eller sløret favicon, der vises som et tomt sideikon i faneblade.
- Tilføj et apple-touch-icon, så et website ser rigtigt ud, når det gemmes på en iPhone-hjemmeskærm.
- Forbered Android-ikoner og et manifest til en progressiv webapp.
- Lav et logo om til et pænt ikonsæt med jævn afstand i alle størrelser.
Ofte stillede spørgsmål
Hvilke størrelser producerer generatoren?
Den skriver favicon.ico med 16, 32 og 48 pixels billeder indeni, separate favicon-16x16.png- og favicon-32x32.png-filer, et apple-touch-icon.png på 180 gange 180 og Android-ikoner på 192 og 512 pixels.
Hvorfor er apple-touch-icon altid uigennemsigtigt?
iOS viser ikke gennemsigtighed i et hjemmeskærmsikon, så en gennemsigtig PNG ville få en sort eller hvid blok bag sig. Generatoren udfylder den fil med din baggrundsfarve og lader de små favicon-størrelser være gennemsigtige, hvis du vil.
Hvad skal jeg skrive i manifestet?
Brug det fulde site- eller appnavn og et kort navn på omkring tolv tegn, for det korte navn er det, der vises under ikonet på en telefon. Temafarven farver browserlinjen, og baggrundsfarven udfylder startskærmen.
Kan jeg bruge et SVG-logo?
Ja. SVG'en rasteriseres i 512 pixels bredde, og dens billedformat tages fra width- og height-attributterne eller fra viewBox, så et kvadratisk logo forbliver kvadratisk.
Hvor skal filerne ligge på min server?
Læg dem i webstedets rod ved siden af index.html, så stierne i uddraget som /favicon.ico og /site.webmanifest virker. Hvis du har dem i en undermappe, skal du rette href-værdierne i uddraget, så de passer.
Bliver mit billede uploadet nogen steder?
Nej. Billedet afkodes og tegnes på et canvas inde i din browser, og ZIP'en samles i hukommelsen, så intet sendes til en server.