Utilia
Kategorier ▾
Sprog: da ▾

Favicon-generator

Lav favicon.ico, PNG-ikoner, apple-touch-icon og site.webmanifest ud fra ét billede eller en emoji, med HTML-tags klar til at indsætte. Download som ZIP.

Kilde

Tilpasning
site.webmanifest

Sådan laver du en favicon

  1. Under Kilde vælger du Billede eller Tekst eller emoji. - Billede: slip en PNG, JPG, WebP eller SVG. Et kvadratisk logo på mindst 512 × 512 px fungerer bedst. Vælg Hele billedet for at få det til at passe inde i ikonet, eller Udfyld og beskær for at dække kvadratet. - Tekst eller emoji: skriv et bogstav, initialer eller en emoji, og vælg derefter Skrifttype, Fed og Tekstfarve.
  2. Angiv Baggrundsfarve, eller sæt kryds ved Gennemsigtig baggrund. Vælg en Form (Kvadrat, Afrundet eller Cirkel) og en Indre margen (%) for at lade der være plads omkring indholdet.
  3. Åbn eventuelt site.webmanifest for at angive Appens navn (web-manifest), Kort navn, Temafarve og Mappe-URL til ikonerne (behold /, hvis filerne ligger i roden af dit websted).
  4. Klik på Generér favicons. Ikonerne vises i faktisk størrelse ved siden af en model af en browserfane. Derefter opdateres de med det samme ved hver ændring.
  5. Klik på Download ZIP, upload filerne til dit websted, og klik derefter på Kopiér tags og indsæt dem i <head> på dine sider.

Hvad der er i ZIP-filen

Fil Størrelse Bruges af
favicon.ico 16, 32 og 48 px Browserfaner, bogmærker, gamle browsere, Windows
favicon-16x16.png 16 × 16 Browserfaner
favicon-32x32.png 32 × 32 Faner på skærme med høj pixeltæthed, genveje på proceslinjen
apple-touch-icon.png 180 × 180 Hjemmeskærmen på iPhone og iPad
android-chrome-192x192.png 192 × 192 Hjemmeskærmen på Android (web-manifest)
android-chrome-512x512.png 512 × 512 Startskærme ved installation (web-manifest)
site.webmanifest — Navn, farver og ikoner for et websted, der kan installeres
favicon-tags.html — HTML-tags, til reference

ICO-filen indeholder tre PNG-billeder, et format som Windows (siden Vista) og alle nuværende browsere kan læse. Apple-touch-icon gemmes altid på en ensfarvet baggrund, fordi iOS viser gennemsigtige pixel som sorte; ved en gennemsigtig baggrund bruges hvid.

HTML-tags

De genererede tags ser sådan ud (med din mappe-URL):

<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Browsere anmoder også automatisk om /favicon.ico i roden af dit domæne, så det hjælper at beholde den dér, selv på sider uden tags.

Designtip

  • Hold det enkelt. Ved 16 × 16 px forsvinder detaljerne. Et enkelt bogstav, et fed symbol eller den enkleste version af dit logo læses bedst.
  • Tjek forhåndsvisningen i faktisk størrelse. Ikonet på 16 px i modelfanen er det, som besøgende rent faktisk ser.
  • Tænk på mørk tilstand. Et mørkt logo på en gennemsigtig baggrund kan forsvinde i mørke browsertemaer; en farvet baggrund eller en lille indre margen hjælper.
  • Emojis ser forskellige ud på hvert system, fordi hver platform tegner emojis i sin egen stil. PNG-filerne bevarer udseendet fra din enhed.

Ofte stillede spørgsmål

Hvilke størrelser har en favicon brug for?

I praksis: en favicon.ico med 16, 32 og 48 px, et apple-touch-icon på 180 px og PNG’er på 192 og 512 px til web-manifestet. Værktøjet laver dem alle ud fra én kilde.

Kan jeg bruge et SVG-logo?

Ja. SVG-filer tegnes i høj opløsning, før ikonerne laves. SVG’en vises som et almindeligt billede, så dens scripts kører aldrig.

Hvordan laver jeg en emoji-favicon?

Vælg Tekst eller emoji, skriv eller indsæt emojien, vælg en baggrund eller behold den gennemsigtige, og generér. Resultatet er en rigtig PNG og ICO, så den virker i alle browsere.

Hvorfor vises min nye favicon ikke?

Browsere gemmer favicons aggressivt i cachen. Genindlæs med ryddet cache, åbn webstedet i et privat vindue, eller tilføj en version til URL’en, f.eks. /favicon.ico?v=2.

Bliver mit billede uploadet?

Nej. Ikonerne, ZIP-filen og manifestet oprettes i din browser; intet forlader din enhed.

Relaterede værktøjer