FavicongeneratorVarje storlek, och head-blocket som hör till.
Släpp in en logotyp och få en riktig favicon.ico i flera upplösningar, PNG-storlekarna som webbläsarna ber om, en apple touch icon, Androids maskable-ikon och en ifylld site.webmanifest. Allt genereras i den här fliken, din bild laddas aldrig upp.
Släpp din logotyp här
Eller tryck för att välja en fil. En kvadratisk bild på 512 px eller mer fungerar bäst.
PNG, JPG, WebP, SVG, ICO eller GIF
Din bild läses, skalas om och paketeras inne i den här fliken. Den laddas aldrig upp, och det finns ingen server inblandad i något led.
Vilka faviconstorlekar behöver du faktiskt 2026?
Betydligt färre än de tjugofilspaket som de flesta generatorer fortfarande delar ut. Fem ytor täcker varje webbläsare och operativsystem som spelar roll, och allt därutöver är vikt i din <head> utan nytta.
favicon.ico, 16 och 32 och 48
Fortfarande den fil en webbläsare letar efter i roten av din domän innan den har läst en enda rad HTML. En behållare rymmer alla tre storlekarna, och det är därför den här faviconkonverteraren bygger en riktig .ico i stället för att döpa om en PNG. 16 px är fliken, 32 px är retinafliken och bokmärkesfältet, 48 px är genvägar i Windows.
favicon.svg, när du har en vektor
En vektorfavicon är skarp i alla storlekar och kan till och med reagera på systemets mörka läge med en media query inne i filen. Webbläsare som förstår den föredrar den framför .ico. Laddar du upp en SVG här förblir den vektor, den rastreras aldrig och lämnas tillbaka som en kopia.
apple-touch-icon.png, 180×180
Ikonen som iOS använder när någon lägger till din webbplats på hemskärmen. En fil räcker: iOS har skalat ner en enda 180-pixelsikon sedan iOS 8, så den gamla högen från apple-touch-icon-57x57 till 152x152 är dödvikt. Den här apple touch icon-generatorn skriver en, och gör den ogenomskinlig.
android-chrome 192 och 512, plus maskable
Refereras från site.webmanifest i stället för från en link-tagg. 192 px är hemskärmen, 512 px är startskärmen och installationsdialogen. Maskable-varianten är den som Android beskär till vilken form launchern nu använder, så dess motiv behöver riktig marginal.
mstile-150x150.png, billig att behålla
Fastnålade webbplatser i Windows läser den fortfarande. Den kostar en liten PNG och två metataggar, så den följer med, men inget går sönder om du tar bort den. Det är det ärliga svaret, och därför står den sist i listan i stället för att presenteras som nödvändig.
Varför innehåller en .ico-fil flera bilder?
Därför att .ico är ett behållarformat, inte ett bildformat. Att förstå det är skillnaden mellan en favicon som syns överallt och en som tyst fallerar i Windows och i flödesläsare.
Först en katalog, sedan bilderna
Filen inleds med ett sex byte långt huvud som anger hur många bilder som följer, sedan en post på sexton byte per bild med bredd, höjd, längd i byte och position i filen, och först därefter själva bilddatan. Allt är little-endian. Den strukturen är skälet till att en PNG som döpts om till .ico inte är en .ico.
Den som läser väljer storlek
En webbläsare som ritar en flik på 16 px läser katalogen, hittar posten för 16 px och avkodar bara den. Ge den en enda bild på 512 px så skalar den ner vid ritningen, med enkel sampling och suddigt resultat. Ge den en 16 px gjord för ändamålet så använder den den.
Innehållet får vara PNG
Ursprungsformatet bäddade in BMP med omvänd pixelordning och en separat enbitars transparensmask. Alla webbläsare och alla Windows sedan Vista accepterar även PNG inuti behållaren, och det är vad den här ico-konverteraren skriver: mindre filer, riktig alfa, ingen gammal kodare.
Det är vid 16 px kvaliteten syns
Att skala ner en logotyp på 1024 px rakt till 16 px samplar för få källpixlar och ger en grå fläck. Det här verktyget halverar bilden på mellanliggande canvasar, 1024 till 512 till 256 och så vidare, så att varje pixel bidrar. Det är hela skälet till att en liten favicon förblir läsbar.
Behöver jag fortfarande en apple-touch-icon?
Ja, och det är den enda filen vars regler skiljer sig från alla andra ikoner i paketet. Två saker att veta, båda redan hanterade ovan.
iOS slänger din transparens
Safari lägger hemskärmsikonen mot svart i stället för mot bakgrundsbilden, så en logotyp du noggrant exporterat med transparent bakgrund landar som en form svävande på en svart platta. Därför skriver det här verktyget alltid apple-touch-icon med ogenomskinlig bakgrund, vit som standard, även när du valt transparent för allt annat. iOS lägger inte heller på sin egen glansighet sedan iOS 7, så det du levererar är det folk ser.
Android beskär, det fyller inte ut
En Android-launcher tar en maskable-ikon och klipper den till sin egen form, en cirkel, en squircle eller en rundad kvadrat beroende på telefon. Bara de mittersta 80 % är garanterade att överleva, så en logotyp som fyller ytan kant till kant tappar sina ytterdelar. Här behåller maskable-filen 20 % marginal oavsett vad du ställer reglaget på, och den cirkulära förhandsvisningen visar exakt vad launchern kommer att behålla.
Hur lägger jag till en favicon på min webbplats?
Två steg, och det är i det andra de flesta misstagen sker. Kopiera blocket verktyget genererar i stället för att skriva det ur minnet.
Lägg filerna i roten
Placera favicon.ico och resten bredvid din index.html, så att de svarar på dinsajt.se/favicon.ico. Webbläsare begär exakt den sökvägen på eget bevåg, utan att bli tillsagda, och därför spelar placeringen större roll än link-taggen.
Klistra in head-blocket på varje sida
Inte bara på startsidan. Någon som landar på en djup sida och bokmärker den ska få rätt ikon. Om din webbplats bygger på en mall eller ett ramverk hör blocket hemma i den gemensamma layouten.
Deklarera .ico utan storlek
Använd rel="icon" href="/favicon.ico" sizes="any". Storlekarna finns redan i behållaren, och att hårdkoda en i markupen hindrar webbläsaren från att hämta de andra. SVG-raden kommer först så att webbläsare som förstår vektor tar den.
Sedan hårduppdatera, två gånger
Favikoner cachas aggressivt och separat från sidan, så din gamla ikon kan överleva en vanlig omladdning i dagar. Öppna filen direkt på dinsajt.se/favicon.ico för att bekräfta att den nya verkligen levereras innan du drar några slutsatser.
Vill du kontrollera vart en befintlig QR-kod eller kortlänk faktiskt leder? Avkoda den med QR-kodsavkodaren
Behöver du en kort länk till den nya sajten? Gör en med den gratis länkförkortaren
Ikonen är den lilla halvan av ett första intryck.
En favicon är vad folk ser när de redan är på din sajt. Länken som tog dem dit gör det tyngre jobbet, och det är oftast den delen ingen mäter. Om det låter användbart är LinkScale det vi bygger.
Se var besöket kom ifrån
Klick, länder, enheter och vad som hände sedan, för varje länk du delar ut, i stället för en siffra i någon annans instrumentpanel.
Byt destination i efterhand
Peka om en tryckt eller publicerad länk efteråt, utan att be någon uppdatera det de har sparat.
En sida för allt
En link in bio-sida som rymmer butiken, bokningsformuläret och de sociala kontona, så att den enda länk du får plats med räcker längre.
Frågor om favicongeneratorn
Har du fler frågor?
OnlineRiktiga människor, svarar oftast inom några minuter.
Den är gratis, utan konto, utan vattenstämpel och utan gräns för hur många filer du genererar. Din bild laddas aldrig upp: den läses med webbläsarens egen FileReader, ritas på en canvas och paketeras till Blobs, allt inne i sidan. Det finns ingen endpoint bakom verktyget, alltså inget att skicka den till. Du kan bekräfta det genom att öppna webbläsarens nätverksflik medan du använder det, eller genom att koppla från internet när sidan har laddats.
Kom längre med LinkScale
Faviconen är klar. Länken som får hit folk är den andra halvan.
LinkScale är en plattform för länkhantering för dig som vill veta vad som händer efter klicket, och byta destination utan att trycka om något.
Free 14-day trial on every plan