PWA-ikongenerator
Generera de ikoner en installerbar webbapp behöver — PNG-filer på 192 och 512px plus en site.webmanifest — från en enda bild, helt i din webbläsare.
Integritet först: varje bild bearbetas lokalt i din webbläsare. Ingenting laddas upp, lagras eller överförs till någon server.
Ikonerna som gör appen installerbar
En progressiv webbapp bedöms som installerbar delvis utifrån sina ikoner: webbläsare letar efter ett webbmanifest som deklarerar minst en PNG på 192×192 och en på 512×512 innan de erbjuder en installationsprompt eller lägger en anständig ikon på hemskärmen. Den här generatorn renderar båda från din källbild och skriver en site.webmanifest som refererar till dem, tillsammans med den apple-touch-icon som iOS vill ha och en favicon.ico för vanliga flikar.
Forma den för appfönstret
Android-launchers kan maska en ikon till en cirkel eller en rundad kvadrat, så bild som går ända ut i kanten kan bli beskuren. Lägg till utfyllnad och en enfärgad bakgrund här så stannar det viktiga innanför säkerhetsområdet oavsett vilken mask som används; förhandsvisningen i realtid visar resultatet i varje storlek. Allt renderas på din enhet med Canvas API — din logotyp laddas aldrig upp — och hela uppsättningen laddas ner som en zip-fil.
Vanliga frågor
- Laddas min bild upp för att skapa faviconen?
- Nej. Favicon.ico-filen, PNG-ikonerna och manifestet genereras allihop lokalt i din webbläsare med Canvas API. Din bild lämnar aldrig din enhet.
- Vilka storlekar och filer får jag?
- En favicon.ico i flera upplösningar (16, 32 och 48px), PNG-ikoner i 16, 32, 48, 180 (apple-touch-icon), 192 och 512px, en site.webmanifest och ett HTML-utdrag att klistra in i din <head>.
- Kan jag konvertera en PNG eller SVG till en ICO?
- Ja. Släpp in en PNG, JPG, SVG eller WebP och ladda ner en riktig favicon.ico. SVG-logotyper rastreras först lokalt i hög upplösning.
- Vilken bild fungerar bäst?
- En kvadratisk bild med en enkel logotyp med hög kontrast. Bilder som inte är kvadratiska beskärs från mitten så att de passar; använd reglagen för utfyllnad och form för att rama in den som du vill.
- Hur installerar jag faviconen?
- Packa upp paketet i din webbplats rotmapp och klistra in det medföljande HTML-utdraget i <head> på dina sidor. Favicon.ico-filen hittas automatiskt av de flesta webbläsare.