1. Ladda upp bild
Dra och släpp filen i det markerade området eller välj den från din enhet. En kvadratisk bild fungerar bäst.
Skapa favicon.ico för din webbplats från en enda bild
Ladda upp en bild och verktyget genererar favicon.ico och en komplett uppsättning PNG-ikoner som behövs för webbläsare, mobila enheter och Lighthouse.
Loading tool editor...
Detta verktyg fungerar på en större skärm
För att använda detta verktyg bekvämt, öppna det på en bärbar dator, stationär dator eller surfplatta i liggande läge.
Tips
Om du använder en surfplatta, byt till liggande läge - när fönsterbredden är tillräcklig laddas verktyget automatiskt.
Vad är en favicon och varför är den viktig?
En favicon är en liten ikon som visas i webbläsarfliken, i bokmärkeslistan och på telefonens startskärm. Det är ett av de första elementen som användaren ser – redan innan sidan laddats klart.
En professionell favicon bygger varumärkesigenkänning och gör det enklare för användaren att hitta din sida bland många öppna flikar. Avsaknad av favicon kan ge ett oprofessionellt intryck och minska besökarnas förtroende.
Hur man använder favicon-generatorn
Att generera favicon tar bara några minuter:
2. Beskär och justera
Justera beskärningsområdet för att välja lämplig del av bilden. Se hur den ser ut i olika storlekar.3. Ladda ner ikoner
Ladda ner favicon.ico och den kompletta uppsättningen PNG-ikoner i en ZIP-fil. Alla ikoner är redo att användas.
Vilka ikoner skapar generatorn?
Varje storlek har sitt användningsområde:
favicon.ico (32×32)
Klassiskt format som stöds av alla webbläsare. Visas i webbläsarfliken.
16×16 och 32×32 PNG
Standardstorlekar för moderna webbläsare. Visas i flikar och bokmärken.
180×180 PNG (apple-touch-icon)
Ikon för Apple-enheter (iPhone, iPad). Visas när någon lägger till sidan på startskärmen.
192×192 och 512×512 PNG
Ikoner för webbappar (PWA). Krävs av manifestet och används i appbutiker.
Om du inte bygger en PWA räcker det med: favicon.ico, 32×32 PNG och 180×180 PNG. Dessa tre filer täcker de flesta användningsfall.
Vad gör denna favicon-generator speciell?
Lokal bearbetning i webbläsaren
Bilden laddas inte upp till någon server. All bearbetning sker på din enhet.Uppfyller Lighthouse-krav
Genererade ikoner uppfyller Google Lighthouse-kraven för storlek och format.Ikoner för alla enheter
En uppsättning filer täcker alla webbläsare, iOS, Android och Windows.Utan begränsningar, utan registrering
Generera så många faviconer du behöver. Utan registrering, utan avgifter.
Hur använder du favicon-generatorn?
Generatorn guidar dig genom hela processen steg för steg:
1. Lägg till källbild
Dra en fil till det markerade fältet eller välj en bild från datorn.
Format som stöds: PNG, JPG, SVG. En enkel logotyp eller ikon på minst 512×512 pixlar fungerar bäst.
2. Välj ikonstorlekar
Kryssa i de ikonstorlekar du behöver.
Du kan välja alla eller bara några. För en vanlig webbplats räcker: favicon.ico, 32×32 och 180×180.
3. Ställ in genereringsalternativ
Ställ in ytterligare alternativ:
- Bakgrund – transparent eller vald färg
- Manifest – konfigurationsfil för PWA
- Automatisk nedladdning – filer laddas ned direkt efter generering
4. Generera och ladda ned filer
Efter generering bearbetar verktyget bilden lokalt – inget skickas till en server.
Ladda ned alla filer som ZIP-arkiv eller ladda ned enskilda ikoner separat.
PNG-storlekar
16x1632x32180x180
Transparent bakgrund (PNG/ICO)
Bakgrundsfärg:
Genereringsalternativ – vad gör vart och ett?
Bakgrund (transparent eller färg)
Som standard bevarar generatorn transparens. Du kan även välja en specifik bakgrundsfärg.
Generera manifest (site.webmanifest)
En JSON-konfigurationsfil för webbappar (PWA). Om du inte skapar en PWA behövs inte detta alternativ.
Hur laddar du ned de genererade filerna?
Efter generering av ikoner har du flera nedladdningsalternativ:
Ladda ned allt som ZIP
Knappen Ladda ned allt paketerar alla genererade filer i ett ZIP-arkiv. Det är det smidigaste alternativet när du behöver det kompletta ikonuppsättningen.Ladda ned enskilda filer
Varje genererad ikon har sin egen nedladdningsknapp – du kan ladda ned en enskild fil utan att ladda ned hela uppsättningen. Praktiskt vid uppdatering av bara en storlek.
Var och hur laddar man upp favicon?
WordPress
De flesta WordPress-teman har en inbyggd möjlighet att ställa in webbplatsikonen. Du hittar den i adminpanelen:
Utseende → Anpassa → Webbplatsidentitet → Webbplatsikon
Ladda upp 512×512-filen – WordPress genererar automatiskt mindre storlekar. För full kontroll kan du också ladda upp filerna direkt till rotmappen via FTP.
Vilken källbild fungerar bäst?
Favicon är en väldigt liten grafik – ner till 16×16 pixlar. Därför är inte alla bilder lämpliga som källa:
Enkla former och läsbara symboler
Enkla logotyper, enskilda bokstäver eller symboler fungerar bäst. Undvik komplex grafik med många detaljer.Kvadratiskt format
Favicon är kvadratisk. Om källbilden har andra proportioner än 1:1 kommer den att beskäras eller sträckas.Tillräcklig storlek
Vi rekommenderar en källbild på minst 512×512 pixlar. Mindre bilder kommer att skalas upp.SVG som idealisk källa
SVG skaleras utan kvalitetsförlust, så ikoner blir skarpa i alla storlekar.
Favicon i Googles sökresultat
Google visar favicons bredvid webbplatsens URL i sökresultaten. Mobila sökresultat har visat favicons sedan 2019. Skrivbordsresultat följde i januari 2020. Favicon är därmed ett synligt varumärkeselement i varje Google-sökning.
Google ställer specifika krav på visning av favicons. Ikonen måste vara minst 48×48 pixlar. Den måste vara kvadratisk. Bilden måste vara tydligt synlig mot vit bakgrund. Google avvisar ikoner med olämpligt eller tomt innehåll.
Googlebot crawlar och indexerar favicons oberoende av sidinnehållet. Uppdatering av favicon i sökresultaten kan ta flera dagar till veckor. Favicon-filen får inte vara blockerad i robots.txt - annars kan Google inte hämta den nya versionen.
Bing visar också favicons i sina sökresultat. DuckDuckGo visar webbplatsikoner bredvid varje resultatlänk. En komplett uppsättning favicons säkerställer ett enhetligt varumärkesutseende i alla stora sökmotorer. Användare känner igen bekanta favicons snabbare, vilket bidrar till högre klickfrekvens.
Favicon och varumärkesidentitet i Sverige
Skandinavisk designminimalism präglar svenska webbplatser. Ett rent och enkelt favicon passar denna estetik och stärker igenkänningen i webbläsarflikar, bokmärken och på mobilens startskärm. När en användare har tio eller fler flikar öppna förblir favicon det enda synliga element som identifierar webbplatsen.
Visuell konsistens mellan favicon och logotyp förbättrar varumärkeserinran. En förenklad version av logotypen eller dess första bokstav fungerar bäst vid små pixelstorlekar. Färgerna i favicon bör matcha företagets grafiska profil.
Svenska e-handelsplattformar som Quickbutik och WooCommerce möjliggör favicon-konfiguration i temainställningarna. Webbutiker med ett professionellt favicon signalerar trovärdighet och sticker ut på prisjämförelsesajter.
DOS-lagen (Lagen om tillgänglighet till digital offentlig service) kräver tillräcklig kontrast för visuella element på offentliga webbplatser. Favicon måste vara läsbart i både ljust och mörkt läge. Kontrastrika färger och enkla former uppfyller detta krav på ett tillförlitligt sätt.
Favicon för PWA och mobila enheter
Progressive Web Apps kräver ytterligare ikoner utöver standardfavicon. Filen manifest.json måste innehålla en ikonarray med storlekarna 192×192 och 512×512 pixlar i PNG-format.
Maskable icons är en speciell ikontyp för Android-enheter. Operativsystemet beskär maskable icons till olika former - cirklar, rundade kvadrater eller droppar. Den säkra zonen täcker de inre 80 procenten av bildytan. Alla väsentliga grafiska element måste ligga inom denna zon för att undvika beskärning.
Apple kräver en separat apple-touch-icon-fil på 180×180 pixlar. Denna fil måste deklareras i HTML-headern - iOS läser den inte från manifestfilen.
Sverige har en av Europas högsta smartphonepenetrationer. Svenska banker som Swedbank och SEB erbjuder app-liknande upplevelser via webbläsaren. PWA-tekniken möjliggör snabb åtkomst från telefonens startskärm utan installation via en appbutik.
Lighthouse-granskningen i Chrome DevTools kontrollerar förekomsten och giltigheten av favicon och PWA-ikoner. Ett saknat eller ogiltigt favicon genererar en varning i PWA-kategorin i granskningen.
Vanliga frågor om favicon-generatorn
Vilken bild är bäst för favicon?
En kvadratisk bild (minst 512×512 px) med enkel bakgrund är bäst. Logotyper, initialer eller enkla ikoner ger bäst resultat. Bilder med många detaljer kan se dåliga ut i liten storlek (16×16 px).
Vad är skillnaden mellan favicon.ico och PNG?
ICO-filen kan innehålla flera storlekar i en fil och stöds av alla webbläsare, inklusive äldre. PNG-filer har högre kvalitet men kräver en separat HTML-tagg för varje storlek. Det rekommenderas att använda båda.
Skickas bilden till en server?
Nej. All bearbetning sker i din webbläsare. Bilden sparas inte och skickas ingenstans.
Hur lägger man till favicon på webbplatsen?
Placera ikonfilerna i webbplatsens rotmapp och lägg till lämpliga HTML-taggar i sidans <head>-sektion. Den nedladdade ZIP-filen innehåller implementeringsinstruktioner.
Hjälp oss att förbättra våra verktyg
Har du en idé för en ny funktion, hittat en bugg eller vill föreslå ett annat verktyg som skulle göra ditt arbete enklare? Skriv till oss – vi svarar inom 24 timmar.