Faviconstorlekarna webbläsare och enheter faktiskt vill ha

En favicon brukade betyda en enda liten 16×16-bild. Nu förväntar sig en webbläsarflik, en genväg på en telefons hemskärm, ett bokmärkesfält och en Apple-touchikon var och en sin egen storlek, och att bara tillhandahålla en lämnar vissa av dessa sammanhang antingen suddiga eller visar en generisk reservikon istället för din.

Varför en storlek inte räcker

En 16×16-ikon förstorad för att fylla en hemskärmsikonplats på 180×180 ser exakt lika pixlig ut som vilken liten bild som helst utdragen till stor storlek — det finns inget sätt att lägga till detalj som inte fanns i källan. Varje sammanhang där en favicon visas har sin egen förväntade upplösning, och modern praxis är att tillhandahålla en uppsättning storlekar istället för att förlita sig på att en webbläsare förstorar en enda liten fil illa.

Storlekarna värda att täcka

• 16×16 och 32×32 — de klassiska faviconstorlekarna, används i webbläsarflikar och bokmärkeslistor i de flesta stationära webbläsare.
• 180×180 — storleken Apple förväntar sig för hemskärmsikonen när en sida läggs till på hemskärmen på en iPhone eller iPad.
• 192×192 och 512×512 — används av Android och av webbapp-manifest för hemskärmsikoner och startskärmar på installerbara webbappar.

Att hålla designen läsbar vid 16px

Faviconsgenerator tar en källbild och producerar hela uppsättningen standardstorlekar på en gång, helt i din webbläsare — men ingen generator kan fixa en design som inte fungerar vid små storlekar från början. Fin detalj, tunna linjer och liten text försvinner helt vid 16×16; en enkel, fet form eller bokstav som förblir igenkännbar när den förminskas är vad som faktiskt läses tydligt i en webbläsarflik, oavsett hur många storlekar som genereras från den.