Hem / Design / Favicon- och appikon-generator
Ikoner och varumärke

Favicon- och appikon-generator

Ladda upp en logotyp, förhandsgranska ikoner i många storlekar, ladda ner PNG och kopiera HTML-snippeten till din webbplats eller PWA.

Ingen fil vald
Använd en kvadratisk PNG eller SVG med tillräcklig upplösning (minst 512×512 rekommenderas).
Används som utfyllnad och som theme-color i den föreslagna HTML-snippeten.
Välj vilka storlekar som ska genereras. Klicka på en ikon eller dess etikett för att ladda ner den PNG:en.

Ikonförhandsgranskning

Klicka på en ikon eller etikett för att ladda ner den storleken som PNG. Spara filerna i ditt projekt (t.ex. /assets/icons).

Denna generator körs helt i webbläsaren. Kom ihåg att ladda upp de nedladdade PNG-filerna och uppdatera sökvägarna i snippeten till din projektstruktur.

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

  1. Ladda upp — Klicka på "Välj fil" och välj din logotyp (PNG eller SVG, kvadratisk, 512×512 eller större).
  2. Bakgrund — Välj bakgrundsfärg om logotypen har transparens; den används också som theme-color i snippeten.
  3. Storlekar — Kryssa i de storlekar du behöver (favicon 16/32, Apple 180, PWA 192/512 osv.).
  4. 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.
  5. 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.

  1. Ladda upp en kvadratisk bild (PNG eller SVG, minst 512×512 rekommenderas).
  2. Välj bakgrundsfärg och vilka ikonstorlekar som ska genereras (favicon, Apple touch, PWA).
  3. Klicka på en förhandsgranskning för att ladda ner varje PNG och kopiera HTML-snippeten till din webbplats <head>.

Vanliga frågor

Använd minst 512×512 pixlar för bästa kvalitet. Kvadratiska bilder fungerar bäst; verktyget skalar och centrerar din logotyp.

Standard-favicons: 16×16 och 32×32. Apple: 180×180. PWA: 192×192 och 512×512. Vår genererade snippet inkluderar dessa.

Nej. Allt körs i webbläsaren. Din logotyp lämnar aldrig din enhet.

Relaterade verktyg

Generator för stilren text Komprimera PDF Länkförhandsgranskare Ladda ner YouTube-miniatyrer

Detta verktyg tillhandahålls endast för personligt och utbildningssyfte. Vi värd eller lagrar inte något användarinnehåll eller mediefiler på våra servrar. All bearbetning sker lokalt i din webbläsare. Vi är inte anslutna till eller godkända av något socialt nätverk, plattform eller företag som nämns. Använd denna tjänst på eget ansvar och i enlighet med respektive plattforms användarvillkor.