Skärmdumpar visar den engelska appen. Förinställda namn och kontroller är också tillgängliga på ditt appspråk.

Din utgångspunkt

Använd Favicon-paket i PixRinse och granska sedan dessa inställningar mot din faktiska destination.

Inställningar för detta arbetsflöde
Favicon PNG-filer16 / 32 / 48 px
Apple Tryck på PNG180 px
Web-app PNG:er192 / 512 px
FärgsRGB
PixRinse Favicon-paket förinställd med sex PNG webbplatsikonstorlekar
Inställningar som används för denna genomgång. Välj skärmdumpen för att inspektera den i full storlek.
PNG format och Konvertera till sRGB visas i kodningskontrollerna.
PNG format och Konvertera till sRGB visas i kodningskontrollerna.

Hur man gör det

  1. Förbered ett fyrkantigt källmärke

    Använd en källa som är minst lika stor som den största ikonen du behöver. Förenkla fina detaljer som kan försvinna vid 16 px.

  2. Välj Favicon-paket

    Granska de sex storlekarna. Mallen använder en centrerad täckregel, så en icke-fyrkantig källa kan beskäras.

  3. Inspektera de minsta utgångarna

    Kontrollera filerna 16 och 32 px i verklig storlek. Automatisk storleksändring kan inte ersätta avsiktliga optiska justeringar för ett komplext varumärke.

  4. Exportera bilder och lägg till deras referenser till din webbplatskod

    Lägg till PNG-filerna på din webbplats och referera till de relevanta storlekarna i HTML-huvudet och webbappens manifest.

FILERNA FRÅN DENNA GÅNG

Vad detta exempel producerade

Ett kvadratiskt märke 1024 × 1024 producerar sex PNG-filer utan varningen om icke-kvadratisk källa. Varje exporterad fil innehåller en sRGB-profil.

Kvadratisk källa
1024 × 1024
PNG exporter
6
Färgprofil
sRGB på varje utgång
Faktiskt exporterade filer
FilFormateraPixelsBytes
android-chrome-192x192.pngPNG192 × 19226 980
android-chrome-512x512.pngPNG512 × 512174 868
apple-touch-icon.pngPNG180 × 18023 839
favicon-16x16.pngPNG16 × 16692
favicon-32x32.pngPNG32 × 321 751
favicon-48x48.pngPNG48 × 483 093
Gör en uppsättning webbplatsikoner: faktiska exporterade resultat
Faktiska exportresultat för exempelfilerna som visas i den här genomgången.

Uppmätt på de visade provfilerna. Resultaten beror på dina original och inställningar. Den här genomgången använder ägda PixRinse konstverk på fyrkantiga eller genomskinliga provdukar.

Ett par vanliga frågor

Skapar det favicon.ico?

Nej. Den inbyggda uppsättningen exporterar sex PNG-filer med specifika filnamn.

Kommer en bred logotyp att fungera?

En kvadratisk källa är att föredra. Täckregeln kan beskära en bred källa, så granska förhandsgranskningen noggrant.

Sätt igång arbetsflödet.

Öppna PixRinse, lägg till några bilder och börja med inställningarna ovan.

Hämta för MacGratis: upp till 10 bilder per batch och en utdata per källa. Detta arbetsflödes flera utgångar kräver Pro. Jämför gratis och pro.