Favicon-generator — ICO, PNG och Apple Touch Icon
Gör om en bild till en komplett favicon-uppsättning: favicon.ico, PNG-ikoner, en apple-touch-icon och en manifestfil för webbappar.
Apple-touch-icon är alltid ogenomskinlig. När appnamnet är tomt använder manifestet bildens filnamn.
Förhandsvisning
Filer i ZIP-filen
Så skapar du en favicon
- Välj en kvadratisk bild, helst minst 512 gånger 512 pixlar, i formatet PNG, JPG, WebP eller SVG.
- Välj hur icke-kvadratiska bilder ska passa: contain fyller ut dem med bakgrundsfärgen, cover beskär dem från mitten.
- Ställ in bakgrunds- och temafärg, utfyllnaden och om de små ikonerna ska behålla en genomskinlig bakgrund.
- Skriv appnamnet och kortnamnet som manifestfilen ska innehålla, och kontrollera sedan förhandsvisningarna i realtid.
- Ladda ner ZIP-filen med alla filer, eller ta favicon.ico och apple-touch-icon.png separat, och kopiera HTML-koden.
När det hjälper
- Ge en ny webbplats en favicon utan att öppna ett bildredigeringsprogram.
- Ersätta en saknad eller suddig favicon som visas som en tom sidikon i flikarna.
- Lägga till en apple-touch-icon så att en webbplats ser rätt ut när den sparas på en iPhone-hemskärm.
- Förbereda Android-ikoner och en manifestfil för en progressiv webbapp.
- Göra om en logotyp till en prydlig ikonuppsättning med jämn utfyllnad i varje storlek.
Vanliga frågor
Vilka storlekar skapar generatorn?
Den skriver favicon.ico med bilder på 16, 32 och 48 pixlar inuti, separata filer favicon-16x16.png och favicon-32x32.png, en apple-touch-icon.png på 180 gånger 180, och Android-ikoner på 192 och 512 pixlar.
Varför är apple-touch-icon alltid ogenomskinlig?
iOS visar inte genomskinlighet i en hemskärmsikon, så en genomskinlig PNG skulle få en svart eller vit ruta bakom sig. Generatorn fyller den filen med din bakgrundsfärg och lämnar de små favicon-storlekarna genomskinliga om du vill.
Vad ska jag fylla i manifestet?
Använd webbplatsens eller appens fullständiga namn och ett kortnamn på ungefär tolv tecken, eftersom kortnamnet är det som visas under ikonen på en telefon. Temafärgen färgar webbläsarfältet och bakgrundsfärgen fyller startskärmen.
Kan jag använda en SVG-logotyp?
Ja. SVG-filen rastreras vid 512 pixlars bredd och dess bildförhållande hämtas från width- och height-attributen eller från viewBox, så en kvadratisk logotyp förblir kvadratisk.
Var ska filerna ligga på min server?
Lägg dem i webbplatsens rot bredvid index.html, så att sökvägarna i koden som /favicon.ico och /site.webmanifest fungerar. Om du har dem i en undermapp redigerar du href-värdena i koden så att de matchar.
Laddas min bild upp någonstans?
Nej. Bilden avkodas och ritas på en canvas i din webbläsare, och ZIP-filen sätts ihop i minnet, så inget skickas till en server.