Konvertera PNG till ICO (favicon)

Vad en favicon måste klara

En favicon visas i mycket små storlekar, ofta 16 gånger 16 pixlar. I den storleken försvinner fina detaljer och tunna linjer blir helt osynliga. En bra favicon är en tydlig, enkel form med stark kontrast: en enda bokstav, en förenklad version av logotypens symbol eller en solid form i varumärkets färg. Om din fullständiga logotyp innehåller text använder du bara symbolen, eller bara första bokstaven.

Anledningen till att .ico-filer innehåller flera storlekar är att en enda bild som skalas upp eller ner vid visning ser suddig ut. Med versioner på 16, 32, 48 och 64 pixlar kan operativsystemet eller webbläsaren visa en pixelexakt bild i varje sammanhang: 16 px i en flik, 32 px i en bokmärkeslista på en skärm med hög upplösning, 48 px i en genväg i aktivitetsfältet i Windows, och så vidare.

Förbered PNG-källan

• Gör den kvadratisk. Om din logotyp är bred placerar du den först på en kvadratisk, transparent yta, eller beskär till symbolen med beskärningsverktyget.
• Börja med 256 pixlar eller större. Att skala ner från en stor, ren källa ger mjukare resultat än att skala upp en liten.
• Behåll en transparent bakgrund om formen är solid, så att den passar både ljusa och mörka teman i webbläsaren. Om formen är tunn eller ljus lägger du den på en enfärgad kvadrat i stället.
• Undvik text som är längre än ett eller två tecken, eftersom den blir oläslig vid 16 pixlar.

Installera faviconen

Spara den nedladdade filen som favicon.ico och lägg den i webbplatsens rotmapp. Lägg sedan till detta i <head> på varje sida:

<link rel="icon" href="/favicon.ico" sizes="any">

De flesta plattformar har en egen inställning för detta i stället: WordPress kallar det Site Icon under Appearance, Shopify och Squarespace har ett Favicon-fält i temainställningarna och Webflow har ett i Project Settings. Ladda upp .ico-filen där. Vill du ha en fullständig genomgång kan du läsa så gör du en favicon.

Gå vidare

För hela uppsättningen ikoner som moderna enheter frågar efter behöver du också en PNG på 180 pixlar för genvägar på hemskärmen i iOS (apple-touch-icon) och PNG-filer på 192 och 512 pixlar för Android och webbappens manifest. Det är vanliga PNG-filer, så använd verktyget för att ändra storlek för att skapa dem från samma original. .ico-filen från den här sidan täcker webbläsarflikar, bokmärken och Windows, och det är där de flesta märker att en favicon saknas.