Konvertera PNG till ICO för en skarp favicon
En favicon är den lilla bilden som ger en webbplats dess visuella signatur. Du ser den i webbläsarfliken bredvid sidtiteln, i din bokmärkeslista, i adressfältets rullgardinsmeny för webbhistorik, och ibland tillsammans med sökresultat. Den är liten, men gör mycket jobb: en igenkännbar favicon hjälper användare att hitta din flik bland ett dussin andra och signalerar att en webbplats är färdig och omhändertagen. Det klassiska formatet för den lilla ikonen är ICO, och det enklaste sättet att skapa en är att börja med en ren kvadratisk PNG och konvertera den.
Det här verktyget tar en PNG-bild och gör om den till en ICO-favicon direkt i din webbläsare. Konverteringen sker lokalt med din egen enhet, så bilden du väljer laddas aldrig upp till en server. Det spelar roll när din ikon är en logotyp eller varumärkesresurs du hellre inte vill lämna till en tredje part. När filen är klar laddar du helt enkelt ner den.
Vad ICO-formatet är och varför det rymmer flera storlekar
ICO är ett ikonbehållarformat som har sitt ursprung i Microsoft Windows, där det lagrar ikonerna som används för program, genvägar och mappar. Dess kännetecken, och skälet till att det blev standarden för webb-favicons, är att en enda ICO-fil kan hålla samma bild i flera upplösningar samtidigt. Istället för en fast bitmapp packar filen en liten uppsättning kvadratiska bilder och låter webbläsaren eller operativsystemet välja vilken storlek som passar platsen där ikonen ska ritas.
Det är genuint användbart. En webbläsarflik behöver en liten ikon, ett bokmärkesfält kan använda en något större, och en fastnålad genväg på skrivbordet kan behöva något ännu större. Med en ICO i flera storlekar hämtar varje sammanhang den version som passar, så din ikon förblir skarp istället för att skalas upp från en enda liten bitmapp och bli suddig. ICO bevarar också transparens, vilket håller hörnen på en rund eller oregelbunden logotyp rena mot vilken flikfärg som helst.
Rekommenderade favicon-storlekar
För en webbplatsfavicon är de tre storlekarna värda att inkludera 16x16, 32x32 och 48x48 pixlar. 16-pixelversionen är den de flesta webbläsare visar i fliken och adressfältet. 32-pixelversionen används på skärmar med högre upplösning och i vissa bokmärkes- och historikvyer, så den håller saker skarpa på moderna skärmar. 48-pixelversionen täcker större sammanhang som Windows-webbplatsgenvägar. Eftersom de alla ligger i en enda ICO-fil skickar du en enda resurs och låter varje yta välja vad den behöver.
Börja med en kvadratisk PNG så att ingenting sträcks ut. Om din källbild är rektangulär eller för stor, beskär eller skala den till en ren kvadrat först med vår bildförminskare, och kör sedan konverteringen. En enkel, kontrastrik design läses mycket bättre vid 16 pixlar än en detaljerad illustration, så föredra tydliga former framför fin text.
Så lägger du till faviconen på din webbplats
När du har din ICO-fil laddar du upp den till din webbplats, traditionellt till webbplatsens rot som favicon.ico. Många webbläsare hittar den där automatiskt, men det är bästa praxis att deklarera den uttryckligen i huvudet på din HTML så att det inte blir några gissningar. Lägg till en länktagg så här:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Placera den raden inuti <head>-avsnittet på dina sidor. Attributet rel="icon" talar om för webbläsaren att den här resursen är sidikonen, och href pekar dit du sparade filen. Om du använder en rotrelativ sökväg som ovan fungerar samma deklaration på alla sidor på din webbplats. Efter driftsättning kan du behöva göra en hård uppdatering eller rensa cachen innan den nya ikonen visas, eftersom webbläsare håller hårt fast vid favicons.
Privat konvertering i din webbläsare
Allt sker på din enhet. PNG:n du väljer läses, avkodas och kodas om som ICO lokalt, och ingenting lämnar din maskin under processen. Det finns inget konto, ingen kö och ingen serverlagring, vilket gör detta bekvämt även för olanserade logotyper eller kundarbete under sekretessavtal. För fler sätt att förbereda och putsa grafik, bläddra bland vår fullständiga uppsättning bildverktyg.
Vanliga frågor
Laddas min bild upp någonstans?
Nej. PNG:n konverteras till ICO helt i din webbläsare på din egen enhet. Ingenting skickas till en server och ingenting lagras, så din bild förblir privat.
Vilka storlekar ska min favicon inkludera?
De mest användbara storlekarna är 16x16, 32x32 och 48x48 pixlar. 16-pixelbilden visas i webbläsarflikar, medan de större håller ikonen skarp på högupplösta skärmar och skrivbordsgenvägar.
Varför använda ICO istället för bara en PNG?
ICO är det mångåriga favicon-formatet och kan lagra flera storlekar i en fil. Webbläsare och operativsystemet väljer den upplösning som passar varje sammanhang, så ikonen förblir skarp istället för att skalas från en enda bitmapp.
Bevarar ICO:n transparensen från min PNG?
Ja. ICO-formatet stöder transparens, så de genomskinliga områdena i din PNG bevaras och ikonen smälter rent in mot vilken flik- eller bakgrundsfärg som helst.
Hur lägger jag till faviconen på min webbplats?
Ladda upp ICO-filen till din webbplats, vanligtvis som favicon.ico i roten, och lägg till en länktagg i huvudet på din HTML som link rel icon type image x-icon href snedstreck favicon.ico. Rensa sedan webbläsarens cache för att se den.
Min källbild är inte kvadratisk. Vad ska jag göra?
Beskär eller skala den till en kvadrat först så att den inte sträcks ut. Du kan använda vår bildförminskare för att göra en ren kvadrat och sedan konvertera den till ICO för bästa favicon.