Generera favicon och appikoner för din webbplats

Publicerad 2026-02-27 · 2 min lästid

#Favicon #PWA #Design

Varje seriöst projekt behöver en tydlig favicon i webbläsarfliken, en Apple touch-ikon för iOS och appikoner för Android och PWA. Detta verktyg hjälper dig generera dem från en bild: ladda upp en kvadratisk logotyp, välj storlekar, ladda ner PNG-filer och kopiera HTML-snippeten till din webbplats.

Varför favicon och appikoner spelar roll

Favicon — den lilla ikonen i webbläsarfliken och bokmärkena. Utan den ser fliken generisk ut och ditt varumärke blir mindre igenkännbart.
Apple touch-ikon — används när användaren lägger till din webbplats på hemskärmen på iPhone och iPad. Rätt storlek (t.ex. 180×180) ger en skarp ikon.
PWA-/Android-ikoner — krävs för "Lägg till på hemskärmen" och installation. Vanliga storlekar: 192×192 och 512×512.

En enda kvadratisk källbild kan täcka allt. Generatoren körs helt i webbläsaren; din logotyp lämnar aldrig din enhet.

Rekommenderad källbild

Använd en kvadratisk bild (PNG eller SVG) på minst 512×512 pixlar. Högre upplösning går bra; verktyget skalar ner. Undvik för små eller töjda bilder så att ikonerna förblir skarpa på skärmar med hög pixeltäthet.

Snabbstart med verktyget

Ladda upp — Klicka på "Välj fil" och välj din logotyp (PNG eller SVG, kvadratisk, 512×512 eller större).
Bakgrund — Välj bakgrundsfärg om logotypen har transparens; den används också som theme-color i snippeten.
Storlekar — Kryssa i de storlekar du behöver (favicon 16/32, Apple 180, PWA 192/512 osv.).
Ladda ner — Klicka på en förhandsgranskning för att ladda ner den storleken som PNG, eller "Ladda ner allt som ZIP" för att få allt på en gång.
Snippet — Kopiera HTML-blocket och klistra in det i din webbplats <head>. Ladda upp PNG-filerna till servern (t.ex. /assets/icons/) och justera sökvägarna i snippeten vid behov.

Var filerna ska ligga

En vanlig uppsättning:

Lägg favicon- och ikon-PNG-filer i en mapp som /assets/icons/ eller i root.
Uppdatera snippeten så att href pekar på dessa sökvägar (t.ex. /assets/icons/favicon-32x32.png).
Lägg till site.webmanifest för PWA med samma sökvägar till 192×192- och 512×512-ikonerna.

Sammanfattning

Favicon- och appikon-generatorn låter dig gå från en logotyp till alla nödvändiga storlekar och en färdig snippet för <head>. Använd en kvadratisk bild i bra upplösning, ladda ner PNG-filerna och sätt in snippeten i ditt projekt.