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
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
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
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
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
PNG till JPG-omvandlare
Omvandla PNG till JPG i webbläsaren. Platta ut transparens mot valfri bakgrundsfärg, behåll måtten och minska många fotoliknande PNG-filer med 60-90 %.
Streckkodsgenerator
Skapa skanningsbara 1D-streckkoder i Code 128, Code 39, EAN-13, UPC-A, ITF-14 och Codabar. Exportera som PNG, SVG eller PDF för tryck.
Memegenerator
Skapa memes med kända mallar som Drake, Distracted Boyfriend eller Doge, eller ladda upp en egen bild. Över- och undertext med Impact-typsnitt, kontur och skugga.
Fotoredigerare
Webbläsarbaserad fotoredigerare med beskärning, rotation, ljusstyrka, kontrast, mättnad, filter, textöverlägg och export till JPG, PNG eller WebP.
Bilduppskalare
Förstora lågupplösta bilder 2×, 3× eller 4× med AI-baserad superupplösning eller klassisk interpolering och behåll viktiga detaljer.
SVG till PNG
Konvertera SVG-filer eller SVG-kod till PNG i webbläsaren, välj en skalfaktor och behåll skarpa transparenta kanter.