Skapa ikoner för alla enheter från en enda bild
När du bygger en webbplats räcker det inte längre med att bara ha en enkel ikon för webbläsarens flikar. Moderna plattformar kräver en mängd olika ikoner i specifika storlekar för att din webbplats ska se professionell ut, oavsett om den besöks via en vanlig dator, en iPhone eller som en installerad progressiv webbapp (PWA).
Denna Favicon-generator är ett verktyg som förenklar hela denna process. Genom att tillhandahålla en enda bildfil i formaten PNG, JPG eller SVG kan du automatiskt generera en komplett samling av ikonfiler anpassade för olika användningsområden. Verktyget paketerar alla nödvändiga filer i en nedladdningsbar ZIP-fil och skapar dessutom det exakta HTML-kodkodavsnittet som krävs för att integrera ikonerna på din webbplats.
Hur verktyget fungerar och vad det skapar
Verktyget tar emot din källbild och bearbetar den direkt för att producera ett komplett ikonpaket. Du kan ladda upp en bild i formatet PNG, JPG eller SVG med en filstorlek på upp till 50 MB. När bearbetningen är klar får du tillgång till följande filer och resurser:
- Ditt ikonpaket (ZIP-fil): En samlad ZIP-fil som innehåller alla genererade ikoner och tillhörande filer.
- favicon.ico: En klassisk ikonfil som innehåller versioner i storlekarna 16, 32 och 48 pixlar. Denna används främst som en klassisk flikikon.
- PNG-ikoner: Ikoner i formatet PNG i storlekarna 16, 32, 180, 192 och 512 pixlar. Dessa täcker behov för allt från vanliga flikikoner till hemskärmar på iPhone och iPad samt Android och installerade webbappar.
- site.webmanifest: En liten textfil som listar de stora ikonerna och talar om för enheter var ikonerna finns.
- Vektorfil (SVG): Om din källbild är en SVG inkluderas själva vektorfilen i ikonpaketet, vilket garanterar perfekt skärpa i alla storlekar.
- Kopiera kod: Ett färdigt HTML-kodavsnitt som du enkelt kan kopiera och klistra in i
<head>-elementet på dina webbsidor.
Under processen visar verktyget även bildens dimensioner i formatet "{w} × {h} px" så att du har full kontroll över källfilens ursprungliga storlek.
Hantering av bildstorlek och rekommendationer
För att uppnå bästa möjliga resultat är valet av källbild viktigt. Om du använder en PNG- eller JPG-bild rekommenderas en storlek på minst 512 × 512 pixlar. Om du använder en mindre bild kommer verktyget att skala upp den för att kunna producera de större ikonerna, vilket kan leda till att de stora ikonerna ser suddiga eller mjuka ut.
Om du laddar upp en bild som är mindre än rekommenderat visas varningsmeddelandet: "Liten källbild ({w} × {h} px): de stora ikonerna kan se suddiga ut. 512 × 512 eller större – eller en SVG – ger bäst resultat.". Att använda en SVG-bild är det absolut bästa alternativet, eftersom vektorn bibehålls i paketet och ritas upp helt skarpt oavsett storlek.
Anpassning av form och bakgrund
Ikoner är till sin natur alltid kvadratiska. Om din källbild inte är kvadratisk erbjuder verktyget två olika metoder för att hantera detta under inställningen Icke-kvadratisk bild:
- Anpassa (utfyllnad): Detta är standardalternativet. Hela din bild förblir synlig och centreras med en utfyllnad runt om för att skapa en kvadrat.
- Fyll (beskär): Bilden fyller ut hela kvadraten, vilket innebär att de överflödiga kanterna som hamnar utanför beskärs.
Du kan också styre över ikonens bakgrund under inställningen Bakgrund:
- Transparent: Detta är standardvalet och innebär att ikonen inte får någon bakgrundsfärg. Detta passar utmärkt för vanliga webbläsarflikar.
- Färg: Du kan själv välja en specifik bakgrundsfärg. Detta är ett säkrare val för hemskärmsikoner på exempelvis iPhone, eftersom transparenta områden på dessa enheter annars färgas svarta.
Integritet och lokal bearbetning
När du använder denna Favicon-generator behöver du inte oroa dig för att dina bilder hamnar i fel händer. Din bild omvandlas till ikoner direkt i din webbläsare, och ingenting laddas upp till BroBroGo. Hela processen sker lokalt på din egen enhet.
Felsökning och felmeddelanden
Om något går fel under uppladdningen eller genereringen kommer verktyget att visa ett tydligt felmeddelande för att hjälpa dig att åtgärda problemet:
- Om du försöker starta utan en bild: "Välj en PNG-, JPG- eller SVG-bild först.".
- Om filen inte stöds: "Endast bilder i formaten PNG, JPG och SVG stöds.".
- Om filen är för stor: "Filen är större än 50 MB. Använd en mindre källbild.".
- Om filen är trasig: "Den här filen kunde inte öppnas som en bild. Den kan vara skadad, tom eller inte en giltig bild.".
- Om en SVG-fil har felaktig struktur: "Denna SVG kunde inte läsas. Kontrollera att filen är ett giltigt SVG-dokument.".
- Om ett generellt fel uppstår vid skapandet: "Genereringen misslyckades. Prova med en annan bild.".
Vanliga frågor
Vilka filer ingår i ikonpaketet?
Ikonpaketet innehåller en favicon.ico med versioner i 16, 32 och 48 pixlar inuti, PNG-ikoner i storlekarna 16, 32, 180, 192 och 512 pixlar samt en site.webmanifest som listar de stora ikonerna. Om du startar från en SVG-bild inkluderas även själva vektorfilen. Allt samlas i en enda ZIP-fil.
Vilken storlek bör min källbild ha?
En SVG-bild är det absolut bästa alternativet eftersom varje ikon ritas direkt från vektorn, vilket gör att även små storlekar som 16 pixlar förblir helt skarpa. Om du använder en PNG eller JPG bör du utgå från en bild som är minst 512 × 512 pixlar. Mindre bilder måste skalas upp, vilket kan göra att de större ikonerna ser suddiga ut.
Bör bakgrunden vara transparent eller ha en färg?
För vanliga flikikoner i webbläsaren fungerar en transparent bakgrund utmärkt. Men om en användare sparar din webbplats på hemskärmen på en iPhone eller iPad kommer transparenta områden att visas som svarta. Om du tror att dina besökare kommer att lägga till din webbplats på sin hemskärm är det därför säkrare att välja en bakgrundsfärg.
Vad händer med en bild som inte är kvadratisk?
Eftersom ikoner alltid måste vara kvadratiska kommer din bild att anpassas, men den kommer aldrig att sträckas ut eller förvrängas. Som standard centreras bilden med en utfyllnad runt om. Du kan också välja alternativet "Fyll (beskär)" för att istället låta bilden fylla ut hela kvadraten och klippa bort de överflödiga kanterna.
Var ska filerna placeras på min webbplats?
Ladda upp alla de genererade filerna till rotmappen på din webbplats så att din favicon.ico blir nåbar direkt på /favicon.ico. Klistra sedan in de genererade HTML-raderna i <head>-elementet på dina sidor. Webbläsare och enheter kommer därefter att automatiskt välja och läsa in rätt ikonstorlek.