Vilka favicon-filer en webbplats behöver, och storlekarna för varje

En webbplats behöver en liten uppsättning ikonfiler, och det mesta handlar om storlek. Lägg en favicon.ico med bilder på 16, 32 och 48 pixlar i roten på webbplatsen, för webbläsarflikar och Windows. Lägg till en 180 px Apple touch-ikon för startskärmar på iPhone och iPad, samt PNG-ikoner på 192 och 512 px som listas i ett webbappmanifest. Favicon-generatorn skapar alla dessa från en logotyp och skriver HTML-raderna som du klistrar in på dina sidor.

Filerna och deras storlekar

ZIP-filen som generatorn laddar ner innehåller alla sju filer. Filen favicon.ico är byggd av tre PNG-bilder, på 16, 32 och 48 pixlar, lagrade i en och samma fil. Varje ikon är samma logotyp, ritad mindre. Generatorn utgår från en version av din bild på 512 pixlar och skapar varje storlek från den.

HTML-raderna

Generatorn skriver fyra rader för huvudet (head) på dina sidor:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Den första raden pekar på favicon.ico och anger storleken 48 gånger 48. Den andra ger PNG-bilden på 32 pixlar. Den tredje anger Apple touch-ikonen, och den fjärde pekar på manifestet, där ikonerna på 192 och 512 pixlar listas. PNG-bilden på 16 pixlar finns i ZIP-filen men inte i dessa rader. Webbläsare letar dessutom efter /favicon.ico på egen hand, så filen hittas även om den första raden saknas. Behåll sökvägarna som de är, om inte dina filer ligger på någon annan plats.

Varför små storlekar behöver enkla former

Vid 16 gånger 16 pixlar har en ikon 256 pixlar totalt. En ikon på 48 pixlar har 2 304, och källbilden på 512 pixlar har 262 144. Det mesta av detaljerna i en logotyp försvinner när den når 16 pixlar, så en tunn linje eller ett litet ord blir suddigt. Använd en enkel symbol, eller en eller två bokstäver med stark kontrast.

Bokstavsalternativet tar en eller två tecken och ritar dem stora i mitten av ikonen, och krymper dem om de är för breda. Formerna är Kvadrat, Rundad och Cirkel. Förhandsvisningen visar resultaten i 16, 32, 48, 180 och 512 pixlar sida vid sida, samt en ljus och en mörk flik, så att du kan bedöma de små storlekarna innan du laddar ner. Förhandsvisningarna uppdateras när du ändrar form, marginal eller bakgrund, så att du kan prova varje inställning först.

Marginal, bakgrund och Apple-ikonen

Marginalen har tre inställningar: Ingen, Liten och Stor. Liten lämnar 10 procent av ikonen tom på varje sida, och Stor lämnar 20 procent. I bildläge beskär Ingen marginal bilden till dess mittersta kvadrat, så kanterna på en bred logotyp förloras. Inställningarna med marginal passar i stället in hela bilden inom kvadraten.

Bakgrundsvalen är Genomskinlig, Vit och Egen, och Genomskinlig är standard. Apple touch-ikonen är alltid ogenomskinlig. I bildläge får dess genomskinliga områden den valda bakgrunden, eller vit bakgrund om bakgrunden är Genomskinlig. I bokstavsläge får de bokstavens bakgrundsfärg. Genomskinliga områden i en Apple touch-ikon kan visas som svarta på iPhone och iPad, så generatorn fyller dem. De övriga storlekarna behåller den genomskinlighet du valt. Varför en PNG med genomskinlighet blir svart förklarar orsaken.

En favicon är kvadratisk, så en bred logotyp behöver först en kvadratisk ram. Kvadratisk fotomakare passar in hela bilden inom en ram med bildförhållandet 1:1, med suddig, vit, svart eller egen kant, så att inget klipps bort. Ändra bildstorlek anger exakta pixlar. Med Behåll proportioner på och båda sidor ifyllda passar bilden inom rutan utan förvrängning. Bildförhållanden för foton förklarade går igenom de vanliga formaten.

Ändringar som tar tid att synas

Webbläsare sparar favicons i en cache. En ändrad fil på samma adress kan visa den gamla ikonen under en tid, så en vanlig omladdning räcker ofta inte. Öppna ikonens adress direkt för att bekräfta att den nya filen finns på servern, och ladda sedan om sidan med cachen förbiгången. Om den gamla ikonen fortfarande visas, ge den nya filen ett annat namn och uppdatera länken så att den pekar dit.

Så gör du med fixmint

1. Välj Bild och släpp din logotyp i rutan, eller välj Bokstav och skriv ett eller två tecken.
2. Ställ in Marginal på Ingen, Liten eller Stor, och Bakgrund på Genomskinlig, Vit eller Egen färg.
3. Kontrollera ikonerna på 16, 32 och 48 px på den ljusa och den mörka fliken, samt förhandsvisningarna på 180 och 512 px.
4. Tryck på Ladda ner ZIP för alla sju filer, eller Ladda ner favicon.ico för just den filen.
5. Tryck på Kopiera HTML och klistra in raderna från HTML för din head i huvudet på varje sida.

Specialfall

• Din bild stannar på din enhet. Generatorn skapar ikonerna i din webbläsare, och ingenting laddas upp.
• Två bokstäver. Två tecken godtas och ritas mindre så att båda ryms, vilket gör dem svårare att läsa vid 16 pixlar än en enskild bokstav.
• Filnamn. Behåll de namn som HTML använder, eftersom länkarna pekar på dem.
• Filer som inte går att läsa. Om en bild inte kan omvandlas till ikoner visar generatorn meddelandet "Could not make the icons from this input. Try another image." och rensar resultaten. Prova en annan fil, eller spara bilden igen i ett vanligt format.