Ingen uppladdning, 100% lokalt, inget konto

Favicon-generator

Ladda upp din logotyp eller ikon och ladda ner alla standardfavikon-storlekar som PNG. Inkluderar Apple Touch Icon och PWA-ikoner. Ingenting lämnar din enhet.

Så fungerar Favicon-generator

Favoritionsgenerator tar vilken bild du tillhandahåller och ändrar storleken till standardmåtten för favoritioner med Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (Apple touch-ikon), 192x192 (Android Chrome) och 512x512 (PWA-manifest). Alla sex storlekar genereras i din webbläsare, tillsammans med en favicon.ico i flera storlekar som samlar 16x16-, 32x32- och 48x48-bilderna i en enda äldre fil. Din källbild lämnar aldrig din enhet.

En komplett favoritionsuppsättning täcker hela spektret av ikonerna för webbläsarflikar, bokmärken, hemskärmsgenvägar och PWA-startskärmar. Att använda en högupplöst källbild (minst 512x512 pixlar) ger nedskalerinsgalgoritmen mest detaljer att arbeta med. HTML link-taggarna som du behöver för att referera till varje genererad fil visas i ett utdrag som du kan kopiera direkt till din sidas head-element.

Skrivet av Bastien Sulyan

Så här använder du Favicon-generator, steg för steg

  1. Släpp din källbild i uppladdningsområdet. Använd en kvadratisk bild på 512 px eller större för bästa resultat.
  2. Förhandsgranska de sex genererade storlekarna i resultatpanelen.
  3. Ladda ned de sex PNG-filerna och favicon.ico-filen från resultatpanelen.
  4. Kopiera HTML-utdraget som visar link-taggarna för alla storlekar.
  5. Placera PNG-filerna i din webbplatsrot och klistra in link-taggarna i sidans head.

Vanliga användningsområden

  • En utvecklare sätter upp en ny webbplats och behöver alla favoritionsstorlekar genererade från varumärkeslogotypen utan en designverktygsabonnemang.
  • En PWA-författare genererar 192x192 och 512x512 ikoner som krävs i webbappmanifestet för installation på hemskärmen.
  • En bloggare uppdaterar sin webbplatsidentitet och ersätter standardfavoritionen med en anpassad ikon byggd från sin logotyp.
  • En frilansare producerar snabbt hela favoritionsuppsättningen för ett kundprojekt utan att vänta på att installera offline-designprogramvara.

Vanliga frågor

Vilka bildformat kan jag använda som källa?

Vilket format som helst som webbläsaren kan avkoda fungerar som indata: JPEG, PNG, WebP, GIF och SVG. För SVG-källor rasteriserar webbläsaren vektorn till ett Canvas före storleksändring, så utdata-PNG:erna är rasterbilder oavsett.

Varför är min favorition suddig i webbläsarfliken?

Storlekarna 16x16 och 32x32 är mycket små. Om källbilden innehåller fina detaljer eller tunna linjer överlever de inte nedskalningen. En enkel, tydlig design med klara former fungerar mycket bättre i små storlekar än en komplex illustration.

Genererar verktyget ICO-filer?

Ja. Utöver de sex PNG-filerna sätter verktyget ihop en favicon.ico som innehåller bilderna i 16x16, 32x32 och 48x48 i en enda fil, vilket är vad äldre Windows-webbläsare och vissa sökrobotar fortfarande letar efter i webbplatsens rot. Moderna webbläsare är nöjda med PNG-länkarna, så att publicera båda kostar ingenting och låter varje klient välja.

Bearbetas källbilden på en server?

Nej. Canvas drawImage-anropen som producerar varje storlek körs i din webbläsarflik. Källbilden läses från din lokala disk och de sex PNG-utdatorna skapas i minnet och erbjuds som nedladdningar. Ingen fildata passerar genom en server.

Vilken storlek ska jag använda för Apple touch-ikonen?

iOS och iPadOS använder 180x180 pixel PNG refererad av apple-touch-icon link-taggen. Den här storleken används när en användare lägger till din webbplats på hemskärmen på en Apple-enhet. Verktyget genererar den här filen tillsammans med de andra storlekarna.

Kan jag använda en rektangulär bild som källa?

Ja, men utdata kommer att ha brev-boxas eller pelare-boxas för att passa den kvadratiska Canvas. För bästa resultat, börja med en kvadratisk bild eller beskär din källbild till en kvadrat innan du använder verktyget.

Relaterade verktyg

Håll allt lokalt, utforska kompletterande verktyg.

Alla bildverktyg