Faviconkonverterare

Skapa filerna som behövs för att lägga till en favicon på en webbplats från en enda rasterbild. Välj hur källan ska passa i den kvadratiska ytan, ställ in bakgrunden och ladda ner en ZIP med en ICO i flera storlekar, sju PNG-ikoner, ett webbappsmanifest, en konfiguration för Windows-paneler och ett färdigt HTML-utdrag för sidhuvudet. Bildkonverteringen och skapandet av ZIP-filen sker lokalt i din webbläsare.

Så konverterar du en bild till ett faviconpaket

  1. 1

    Välj en rasterbild

    Välj en PNG-, JPEG- eller WebP-fil som håller sig inom de visade gränserna för filstorlek och bildmått. SVG-, GIF- och AVIF-filer godtas inte.

  2. 2

    Välj anpassning

    Använd Täck för att fylla kvadraten och beskära kanterna, eller Rym för att behålla hela bilden och lägga till utrymme runt den.

  3. 3

    Ställ in bakgrunden

    Välj en bakgrundsfärg för transparenta pixlar och utrymmet som skapas med Rym. Kontrollera sedan de genererade förhandsvisningarna.

  4. 4

    Ladda ner och installera

    Ladda ner ZIP-filen, placera ikon- och konfigurationsfilerna på din webbplats och kopiera de medföljande länktaggarna till dokumentets sidhuvud.

Innehåll i ZIP-filen

Paketdel Syfte
favicon.ico En ICO-behållare med versioner på 16, 32, 48 och 256 px för webbläsare och program som begär den traditionella faviconsökvägen
favicon-16x16.png Kompakt PNG för webbläsarflikar och andra små placeringar
favicon-32x32.png Ikon med högre täthet för webbläsarflikar och bokmärken
favicon-48x48.png Extra storlek för skrivbord och genvägar
mstile-150x150.png PNG på 150 × 150 som Windows-panelkonfigurationen hänvisar till
apple-touch-icon.png PNG på 180 × 180 för länkar på Apple-hemskärmen
android-chrome-192x192.png Appikon på 192 × 192 som webbappsmanifestet hänvisar till
android-chrome-512x512.png Appikon på 512 × 512 som webbappsmanifestet hänvisar till
site.webmanifest JSON-metadata som hänvisar kompatibla webbläsare till ikonerna på 192 och 512 px
browserconfig.xml Windows-panelkonfiguration som hänvisar till de genererade ikonerna
favicon-head.html Färdiga taggar som kopplar en sida till ICO-filen, PNG-filerna, Apple-ikonen, manifestet och webbläsarkonfigurationen

ICO- och PNG-filerna är avsiktligt separata. Webbläsare och operativsystem väljer ikoner på olika sätt. Ett komplett paket tillgodoser därför både den traditionella begäran om /favicon.ico och uttryckliga moderna ikondeklarationer.

HTML-taggar för sidhuvudet

Det nedladdade paketet innehåller ett utdrag i den här formen:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">

Om filerna finns i en undermapp eller hos en separat resursvärd ska du ändra sökvägarna innan du klistrar in taggarna i <head>. Se till att filnamnen och sökvägarna i site.webmanifest och browserconfig.xml stämmer överens med filerna du publicerar.

Täck, rym och välj bakgrund

  • Täck fyller varje kvadratisk utdata helt. En bred eller hög källa beskärs lika mycket från motsatta kanter, så placera viktiga delar av motivet nära mitten.
  • Rym behåller hela källan synlig. Oanvänt utrymme blir en marginal med den valda bakgrundsfärgen.
  • Bakgrund kan vara transparent eller använda en anpassad enfärgad färg. I läget Rym styr valet också färgen på marginalen runt bilden. Kontrollera förhandsvisningarna mot både ljusa och mörka sidbakgrunder innan du publicerar.

För att få så skarpa små ikoner som möjligt bör du börja med en enkel kvadratisk bild på minst 512 × 512 pixlar. Tunn text, mycket fina linjer och små detaljer kan försvinna i versionen på 16 px även om källan är stor.

Gränser för indata och placering

Konverteraren godtar endast rasterbilder i formaten PNG, JPEG och WebP. Den kontrollerar bildsignaturen och avvisar SVG, GIF, AVIF och andra format som inte anges. Källfilen får vara högst 20 MiB, ingen sida får vara längre än 8 192 pixlar och bilden får innehålla högst 24 megapixlar totalt. Måtten kontrolleras innan hela bilden avkodas.

Packa upp ZIP-filen efter nedladdningen och ladda upp de genererade filerna till sökvägarna som används i det medföljande utdraget. Rotrelativa sökvägar som /favicon.ico förutsätter att filerna är tillgängliga från den aktuella domänens rot. Rensa webbplatsens eller CDN-nätverkets cache när du byter ut en befintlig favicon, eftersom webbläsare ofta sparar ikonfiler längre än vanliga sidresurser.

Det medföljande manifestet innehåller ikonmetadata, men ett manifest och en uppsättning ikoner gör inte i sig en webbplats till en installerbar progressiv webbapp. Installationen beror också på sidan, transportsäkerheten och kraven i varje webbläsare.

Vanliga frågor

Du kan använda PNG, JPEG eller WebP. Konverteraren kontrollerar filsignaturen i stället för att enbart lita på filnamnet och avvisar SVG, GIF, AVIF och andra format.

Täck skalar bilden tills kvadraten är fylld och beskär lika mycket från kanterna när proportionerna inte är kvadratiska. Rym behåller hela bilden och fyller kvadratens återstående utrymme med den valda bakgrundsfärgen.

ICO är en behållare som kan lagra flera små ikonstorlekar i en traditionell faviconfil. Separata PNG-filer ger webbläsare och plattformar resurser med tydliga mått för flikar, länkar på hemskärmen och appikoner. Att behålla båda ger bättre praktisk täckning.

Nej. Manifestet beskriver de genererade appikonerna och tillhörande visningsmetadata, men möjligheten att installera webbplatsen beror på ytterligare webbläsarkrav och på hur själva webbplatsen byggs och levereras.

Det medföljande utdraget använder rotrelativa sökvägar, så det enklaste är att lägga de uppackade filerna i domänens rot. Om du använder en annan mapp eller resursvärd ska du uppdatera utdraget och sökvägarna i manifestet och webbläsarkonfigurationen.

Nej. Bildbearbetning och skapande av ZIP-filen sker i din webbläsare. I flerstegsflödet kan ett IndexedDB-utkast behålla bilden i den här webbläsaren i upp till 30 minuter för att överföra den mellan stegen. Den lokala överföringen är ingen uppladdning till en server.

Relaterade verktyg