Favicon-generator: Skapa en favicon gratis online
Med favicon-generatorn skapar du en favicon.ico i 16, 32 och 48 px, en Apple Touch-ikon, två Android Chrome-ikoner, en site.webmanifest och ett färdigt HTML-kodavsnitt för <head> från en bild, logotyp, text eller emoji. Gratis och utan registrering: Din bild behandlas bara i din webbläsare och laddas aldrig upp.
Byggd av Jakub Martyniak
Är webbplatsen konfigurerad? Publicera den med snabb och tillförlitlig webbhosting.
Exempelresultat
Det skapar favicon-generatorn
Du laddar upp en bild och väljer en temafärg. Verktyget skapar alla ikonfiler, site.webmanifest och HTML-kodavsnittet för <head>. Nedan visas textdelen för exempeltemafärgen #18e888. Ikonerna beror på din bild.
Exempel · Temafärg #18e888
Utdata: HTML-kodavsnitt för <head>
<link rel="icon" href="/favicon.ico" sizes="48x48"><link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"><link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><meta name="theme-color" content="#18e888">- favicon.icoEn fil med 16 / 32 / 48 px för webbläsarflikar, bokmärken och Windows.
- apple-touch-icon.png180×180 px, iOS-startskärm
- android-chrome-192x192.png192×192 px, Android-ikon
- android-chrome-512x512.png512×512 px, Android/PWA-installation
Utdata: site.webmanifest
{ "name": "My Website", "short_name": "My Website", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#18e888", "background_color": "#18e888", "display": "standalone"}Varför detta verktyg
Mer än att bara förminska en ikon
Allt du behöver för en komplett uppsättning favikoner.
Komplett uppsättning favikoner
favicon.ico, Apple-Touch-Icon och två Android-Chrome-ikoner från en enda bild.
Favicon från text eller emoji
Ingen logotyp? Använd upp till 4 tecken eller en emoji med valfri bakgrundsfärg, textfärg, form och textstorlek.
Beskärning och zoom
Flytta bilden genom att dra, zooma mellan 50 och 250 % och beskär transparenta kanter automatiskt.
Förhandsgranskning i faktisk storlek
Se din ikon i webbläsarflikens faktiska storlek (16×16) innan du publicerar den.
Temafärg
Fyll bakgrunden på Apple Touch-ikonen och få automatiskt en passande theme-color-metatagg.
Färdigt HTML-kodavsnitt
Ett färdigt HTML-kodavsnitt att kopiera och använda direkt i din sidas <head>.
Allt som .zip
Samla alla genererade filer, inklusive site.webmanifest, i en nedladdning.
Körs bara i webbläsaren
Hela processen sker via Canvas API i din webbläsare – din bild laddas aldrig upp.
Så fungerar det
Skapa en favicon i sex steg
Från bild eller text till ett färdigt kodavsnitt i <head>, utan konto eller uppladdning.
Steg 1
Ladda upp bild eller skriv text
Välj ”Ladda upp bild” och dra din logotyp eller bild till fältet (max 15 MB), eller byt till ”Text eller emoji” och skriv upp till 4 tecken.
Steg 2
Justera utsnitt eller text
Dra för att flytta bilden, zooma mellan 50 och 250 % med reglaget eller mushjulet och beskär transparenta kanter automatiskt om du vill. I textläget väljer du bakgrundsfärg, textfärg, form och textstorlek.
Steg 3
Välj alternativ
Ange webbplatsens namn för site.webmanifest, välj temafärg och bestäm om favicon.ico och Android-ikonerna ska behålla en transparent bakgrund.
Steg 4
Kontrollera förhandsgranskningen
Kontrollera alla sex storlekar i förhandsvisningen: 16, 32 och 48 px visas i faktisk storlek, medan ikonerna på 180, 192 och 512 px visas förminskade. För de två Android-ikonerna kan du visa en säkerhetszon som vägledning.
Steg 5
Ladda ner filer
Ladda ner filerna var för sig eller alla på en gång som favicon-package.zip med ”Ladda ner alla som .zip”.
Steg 6
Lägg in favicon
Ladda upp filerna till webbplatsens rotkatalog och kopiera HTML-kodavsnittet till sidornas <head>.
Favicon-storlekar
Vilken favicon-storlek används till vad?
En webbplats behöver sin favicon i flera storlekar. Favicon-generatorn skapar dessa filer från en enda bild:
| Storlek | Fil | Användning |
|---|---|---|
| 16 × 16 px | favicon.ico | Webbläsarflik |
| 32 × 32 px | favicon.ico | Aktivitetsfältet i Windows |
| 48 × 48 px | favicon.ico | Utforskaren/genväg |
| 180 × 180 px | apple-touch-icon.png | iOS-startskärm |
| 192 × 192 px | android-chrome-192x192.png | Android-ikon |
| 512 × 512 px | android-chrome-512x512.png | Android/PWA-installation |
Konvertera PNG till ICO
favicon.ico är en riktig ICO-fil med flera storlekar, inte en omdöpt PNG: Generatorn lägger bilderna på 16, 32, 48 px i en gemensam ICO-behållare. Så kan du omvandla en PNG- eller JPG-bild till en ICO-fil utan bildbehandlingsprogram.
Varför 16 × 16 px är så viktigt
I webbläsarfliken visas din favicon i bara 16 × 16 pixlar. Fina detaljer och mycket text går då förlorade, men 1–2 bokstäver eller en tydlig form förblir läsbara. Förhandsvisningen visar ikonerna i 16, 32 och 48 px i faktisk storlek innan du lägger in filerna.
Säkerhetszon för Android-ikoner
Om du vill kan förhandsgranskningen visa en streckad säkerhetszon på 80 % av diametern för ikonerna på 192 och 512 px. Den är bara en vägledning: Om ditt motiv ligger innanför linjen förblir det synligt även om en startskärm beskär ikonen till en cirkel. Filerna ändras inte, och site.webmanifest listar båda som vanliga ikoner, inte som maskbara ikoner.
Utforska mer
Fler verktyg
Robots.txt-generator
Skapa robots.txt med en regelredigerare eller per bot – inklusive GPTBot, Google-Extended med flera.
Byggd av Rugile Rutkauskaite
Komprimera och förminska bilder
Komprimera och förminska bilder online: minska storleken på JPG, PNG och WebP, ange en målfilstorlek i KB eller konvertera, till exempel PNG till JPG. Allt sker i webbläsaren.
Byggd av Dimitri Heissler
Beskär bild (Image Cropper)
NyBeskär bilder fritt, runt eller i fasta format som YouTube-miniatyrbild, Discord-banner, Instagram-story och X-sidhuvud. Pixelprecist som PNG, JPG eller WebP. Körs helt i webbläsaren.
Byggd av Luca Stanek
Konvertera SVG till PNG (SVG to PNG)
NyKonvertera SVG till PNG: spara skarpa vektorbilder i valfri storlek som PNG, JPG eller WebP, med transparent bakgrund och mallar för favicon, Discord-emoji och Minecraft-serverikon. Fungerar helt i webbläsaren.
Byggd av Luca Stanek
Färgväljare
Konvertera färger direkt mellan HEX, RGB, HSL, HSV och CMYK, hitta närmaste namngivna CSS-färg och kontrollera WCAG-kontrasten mot svart och vitt – helt i webbläsaren.
Byggd av Justin Schuessler
Kontrastkontroll
Beräkna kontrastförhållandet mellan två färger enligt WCAG i realtid och kontrollera mot AA/AAA och UI-komponenter – direkt i webbläsaren.
Byggd av Justin Schuessler
FAQ
Vanliga frågor
Kortfattade svar om favikoner och det här verktyget.
En favicon är en webbplats lilla ikon. Den visas i webbläsarflikar, bokmärken och som appikon på mobilers hemskärmar. För att se skarp ut överallt behövs flera storlekar: Favicon-generatorn skapar 16, 32 och 48 px i favicon.ico, 180 px för iOS samt 192 och 512 px för Android.
Favicon-generatorn är gratis och kräver inget konto. Din bild laddas inte upp: allt skapas med Canvas API i din webbläsare. Ingenting skickas till eller lagras på en server. Bilden får vara upp till 15 MB.
Du får favicon.ico med 16, 32 och 48 px i en fil, apple-touch-icon.png (180 × 180), android-chrome-192x192.png, android-chrome-512x512.png och en site.webmanifest. Du kan ladda ner filerna var för sig eller tillsammans som favicon-package.zip. Du får också ett HTML-kodavsnitt på 6 rader för sidans <head>. Det länkar till alla filer och avslutas med temafärgen, till exempel <meta name="theme-color" content="#18e888"> för #18e888.
Det finns ingen enda storlek som passar överallt: Webbläsarfliken visar 16 × 16 px, Windows aktivitetsfält 32 × 32 px och Utforskaren och genvägar 48 × 48 px. iOS använder 180 × 180 px för hemskärmen, Android 192 × 192 och 512 × 512 px. Generatorn skapar alla dessa storlekar från en bild. Eftersom fina detaljer och mycket text försvinner vid 16 × 16 px visar förhandsvisningen 16, 32 och 48 px i faktisk storlek och de större ikonerna förminskade innan du lägger in filerna.
Ladda upp bilden på fliken ”Ladda upp bild”. Dra för att flytta utsnittet, zooma mellan 50 och 250 % och beskär transparenta kanter automatiskt om du vill. Generatorn samlar 16, 32 och 48 px i en riktig favicon.ico med flera storlekar och skapar även PNG-ikoner för iOS och Android. Börja helst med en kvadratisk bild på minst 512 × 512 px, eftersom det är den största storleken som skapas.
Ja. På fliken ”Text eller emoji” skriver du upp till 4 tecken. 1–2 bokstäver eller en enda emoji brukar fungera bäst. Du väljer bakgrundsfärg, textfärg, formen Rundad, Fyrkantig eller Cirkel och en textstorlek mellan 25 och 80 %. Det ger samma filer som en uppladdad bild.
Ladda upp favicon.ico, apple-touch-icon.png, de två Android Chrome-ikonerna och site.webmanifest till webbplatsens rotkatalog, eftersom HTML-kodavsnittet hänvisar till sökvägar som /favicon.ico och /site.webmanifest. Kopiera sedan kodavsnittet till sidornas <head>. Om du inte själv redigerar <head>, till exempel i WordPress, laddar du i stället upp en webbplatsikon där, exempelvis android-chrome-512x512.png. Verktyget ansluter inte direkt till din webbplats eller ditt CMS.
Den fyller alltid Apple Touch-ikonens bakgrund, eftersom iOS hanterar transparens där på ett opålitligt sätt. Om ”Transparent bakgrund” är avstängt fyller den även favicon.ico och Android-ikonerna. Den anges dessutom som theme_color och background_color i site.webmanifest och som meta-taggen theme-color i HTML-kodavsnittet.
Fler frågor?
Kontakta supportenDitt projekt behöver en pålitlig server
En VPS från ZAP-Hosting ser till att din webbplats finns online tillförlitligt.
Ingen konfigurering. Ingen risk. Online på några sekunder.
Letar du efter fler verktyg? Visa alla bild- och designverktyg
Föredragen källa hos Google
