Gratis omvandlare

Favoritikon Generator

Generera favicon-filer i flera storlekar (16x16 till 512x512) från vilken bild som helst. Gratis, omedelbar och körs helt i din webbläsare.

Dra och släpp en bild här

Stöder PNG, JPG, SVG, WebP. Max 10 MB.

Eller

Om detta verktyg

En favoritikon är den lilla ikonen som visas i webbläsarens flikar, bokmärken och historiklistor. Den ursprungliga faviconen – en 16×16 ICO-fil på /favicon.ico – har expanderat till en komplex uppsättning ikoner i olika storlekar för olika plattformar: 16×16 och 32×32 för webbläsarflikar, 180×180 för iOS-startskärmar, 192×192 och 512×512 för Windows och olika storlekar. Att producera alla dessa från en enda källbild är vad en modern favicon-generator gör.

Det här verktyget tar en enda högupplöst källbild (vanligtvis en fyrkantig logotyp) och genererar hela uppsättningen av favicon-tillgångar plus HTML-länktaggar som behövs för att referera till dem. Utdata inkluderar ICO, flera PNG:er och en manifest.json för progressiv webbappsmetadata. Släpp de resulterande filerna i roten på din webbplats och referera till dem via den genererade HTML-koden.

All bearbetning sker i din webbläsare. Ingen uppladdning, inget API-anrop, ingen hastighetsgräns. Utgången fungerar på alla moderna webbläsare och operativsystem som visar favoritikoner.

Varför skapa en favoritikon

Webbplatser utan favoritikoner ser oavslutade ut. Webbläsarflikar visar en generisk ikon; bokmärken har ingen visuell identifierare; sajten verkar mindre professionell. Att lägga till ett riktigt favicon-set är ett låginsats och effektfullt poleringssteg som signalerar uppmärksamhet på detaljer.

Moderna favicon-krav har vuxit bortom /favicon.ico. Ikoner på iOS-startskärmen, Android Chrome-ikoner, Windows-rutaikoner och varianter av mörkt läge använder alla olika filer. Att generera dem alla från en källa säkerställer konsekvent varumärkesbyggande utan att hantera varje fil för hand.

Så här använder du det

Ladda upp källbild, hämta hela faviconuppsättningen.

  1. Ladda upp källbild: Använd en kvadratisk bild på minst 512×512 pixlar. PNG är att föredra (transparensstöd); SVG accepteras också. Källor med högre upplösning ger skarpare mindre ikoner.
  2. Konfigurera plattformsalternativ: Aktivera iOS-, Android-, Windows- och PWA-utgångar efter behov. Standardinställningar ger den standarduppsättning som de flesta webbplatser behöver.
  3. Anpassa färger och tema: Välj temafärger för Windows-plattor och PWA-stänkskärmar. Matcha din varumärkesidentitet.
  4. Ladda ner och distribuera: Spara den genererade zip-filen. Placera filer i roten på din webbplats och lägg till de genererade HTML-länktaggarna i ditt <head>. HTML-koden hänvisar till varje ikon i rätt storlek.

Vanliga användningsfall

Tekniska detaljer

Hela moderna favicon-setet: favicon.ico (16+32+48 multi-resolution), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-5chrome-212pngx mstile-150x150.png. Plus site.webmanifest för PWA, browserconfig.xml för Windows.

Varje PNG genereras av canvas-baserad nedsampling från källan. ICO:n är konstruerad i JavaScript genom att kombinera 16/32/48-versioner till ICO-formatet med flera upplösningar med hjälp av DataView-skrivning.

HTML-länktaggar refererar till varje fil med lämpliga rel- och storleksattribut. Generatorn producerar dessa som ett copy-paste-ready-kodavsnitt för din webbplats <head>.

Bästa metoder

Vanliga frågor

Vilket bildformat ska jag ladda upp?
PNG med en transparent bakgrund fungerar bäst. Använd en kvadratisk bild på minst 512x512 pixlar så att verktyget kan skalas ner utan kvalitetsförlust. SVG fungerar också bra eftersom det skalas till vilken storlek som helst.
Vilka storlekar genererar detta?
16x16 (webbläsarflik), 32x32 (webbläsarflik @2x), 48x48 (Windows aktivitetsfält), 180x180 (Apple Touch-ikon), 192x192 (Android-startskärm), 512x512 (PWA-startskärm). ICO-filen innehåller storlekarna 16, 32 och 48 px.
Var lägger jag favicon-filerna?
Placera favicon.ico i din webbplats rotkatalog. Andra PNG-storlekar finns i din offentliga mapp eller någon tillgänglig sökväg. Lägg till HTML-länktaggarna i ditt <head>-avsnitt som pekar på varje filplats.
Varför uppdateras inte min favoritikon i webbläsaren?
Webbläsare cachelagrar aggressivt favoritikoner. Rensa webbläsarens cache, försök öppna i ett inkognitofönster eller lägg till en versionsfrågesträng (?v=2) till favoritikonens URL för att tvinga fram en uppdatering.
Varför uppdateras inte min favoritikon?
Webbläsare cachelagrar favoritikoner aggressivt, ibland i dagar. Tvinga fram en uppdatering genom att rensa cacheminnet, öppna ikonens URL direkt eller lägga till en versionsfrågeparameter till länktaggen.
Är min bild uppladdad till en server?
Nej. Generering sker i din webbläsare.
Ska jag använda SVG eller PNG?
SVG för källan (upplösningsoberoende). Generatorn matar ut PNG:er i specifika storlekar; moderna webbläsare stöder även SVG-faviconer via länken rel=icon type=image/svg+xml.
Vad är site.webmanifest?
Ett JSON-manifest för progressiva webbappar som beskriver ikoner, färger och annan metadata. Krävs för installationsbara webbappar; ofarligt att inkludera även på standardsajter.