Favicon-generator
Skapa favikoner från text, emoji eller bilder för din webbplats
Favicon-design
Välj en emoji
0 % ger kvadratiska hörn. 100 % ger helt rundade hörn.
Bildfil på upp till 10 MiB. Bilden sträcks ut till en kvadrat.
Förhandsgranskning och filer
Detta är en illustration. Hur emojis visas kan skilja sig mellan webbläsare och system.
Liveförhandsgranskningen är uppdaterad. Skapa filerna när designen är klar.
Skapade PNG-filer
Designen har ändrats. De här filerna innehåller fortfarande den senast skapade designen. Skapa dem igen för att uppdatera dem.
PNG-filer: 16, 32, 48, 64, 128 och 256 px. ICO-filen innehåller den skapade PNG-filen på 32 px.
Lägg till på din webbplats
- Ladda upp de nedladdade filerna och använd de kopierade taggarna i sidans head.
- Standardsökvägarna i taggarna utgår från webbplatsens rot. Ändra dem om du lägger filerna någon annanstans.
- ICO-filen innehåller en enda PNG-bild, inte alla skapade storlekar.
- Apple touch-ikoner och ikoner för webbappsmanifest är separata filer. Det här verktyget skapar inte dem.
- Det är inte säkert att en favicon visas i sökresultaten.
- Verktyget läser din fil i webbläsaren utan att ladda upp den. Behåll ett orört original.
Om Favicon-generator
Vår kostnadsfria favicon-generator online låter dig skapa professionella favicons av text, bokstäver, emojis eller uppladdade bilder direkt i webbläsaren. Favicons är de små ikonerna som visas i webbläsarflikar, bokmärken och sökresultat, och de spelar en viktig roll för igenkänning av varumärket och för användarupplevelsen. Med det här verktyget kan du utforma och ladda ner favicons i flera storlekar utan designprogram eller teknisk expertis.
Generatorn har tre skapandelägen: text- och bokstavsläge för att skapa favicons av ett eller två tecken med full kontroll över typsnitt, färg och stil, emojiläge för att snabbt skapa favicons av valfri emoji med justerbar bakgrund och storlek, och uppladdningsläge för att skapa kvadratiska favicon-filer av bilder som webbläsaren kan avkoda. Verktyget bearbetar lokalt utan att ladda upp den valda filen. Det garanterar inte att alla andra skript eller förfrågningar på sidan är privata.
Verktyget skapar sex kvadratiska PNG-storlekar: 16, 32, 48, 64, 128 och 256 px. Ladda ner enskilda filer, en ICO-fil på 32 px baserad på en enda PNG-bild och matchande HTML-länktaggar. Dessa filer täcker inte alla plattformars ikonkrav.
Viktiga funktioner
- Tre skapandelägen: text/bokstav, emoji och uppladdad bild
- Anpassningsbar textfärg, bakgrundsfärg, typsnittsfamilj och teckentjocklek
- Justerbar hörnradie, från kvadrat till cirkel
- Stöd för transparent bakgrund i text- och emojiläget
- Snabbvalsrutnät med 32 vanliga emojis
- Skapar sex vanliga favicon-storlekar: 16x16, 32x32, 48x48, 64x64, 128x128 och 256x256
- Liveförhandsvisning med uppdateringar i realtid när du justerar inställningarna
- Modell av en webbläsarflik som visar hur din favicon kommer att se ut
- Ladda ner enskilda storlekar som PNG-filer
- Ladda ner en favicon.ico-container med en genererad PNG på 32 px. Kompatibiliteten beror på klienten
- Kopiera HTML-länktaggar till urklipp för enkel integrering på webbplatsen
- All bearbetning sker i webbläsaren, utan serveruppladdningar
Så använder du Favicon-generator
- Välj läge: Välj text/bokstav för att skapa en favicon av tecken, emoji för att använda en emoji eller uppladdad bild för att konvertera en befintlig bild.
- Anpassa din design: I textläget anger du 1-2 tecken och justerar teckenstorlek, färger, hörnradie, typsnittsfamilj och tjocklek. I emojiläget väljer eller skriver du en emoji och ställer in bakgrund och storlek. I uppladdningsläget väljer du en bildfil från din enhet.
- Förhandsgranska i realtid: Se hur liveförhandsvisningen i 256x256 uppdateras direkt när du ändrar inställningarna. Kontrollera flikmodellen för att se hur din favicon kommer att se ut i en riktig flik.
- Skapa favicons: Klicka på knappen ”Skapa favicons” för att skapa alla sex standardstorlekar av din design.
- Ladda ner dina favicons: Ladda ner enskilda PNG-filer för varje storlek, hämta en favicon.ico-fil eller kopiera HTML-länktaggarna till head-avsnittet på din webbplats.
- Lägg till på din webbplats: Lägg de nedladdade filerna i webbplatsens rotkatalog och klistra in HTML-länktaggarna i head-delen av ditt HTML-dokument.
Användningsområden
- Lansering av ny webbplats: Skapa snabbt en professionell favicon till en ny webbplats eller webbapplikation utan att behöva en grafisk formgivare.
- Personligt varumärke: Skapa en bokstavsbaserad favicon med dina initialer för en personlig blogg, portfölj eller professionell webbplats.
- Startup-MVP:er: Skapa en tillfällig men snygg favicon i ett tidigt utvecklingsskede, när en fullständig varumärkesidentitet ännu inte finns.
- Sidoprojekt och experiment: Ge hobbyprojekt, hackathon-bidrag och experimentella webbplatser personlighet med egna emoji- eller textfavicons.
- Test vid webbutveckling: Skapa platshållarfavicons för utvecklingsmiljöer, stagingservrar eller kundprototyper.
- Hantering av flera webbplatser: Skapa olika favicons för olika webbplatser, underdomäner eller webbapplikationer så att du lättare skiljer mellan flera öppna flikar.
- Dokumentation och handledningar: Skapa favicon-filer till demowebbplatser, kodexempel och utbildningsmaterial.
- Utveckling av webbläsartillägg: Skapa ikonfiler till webbläsartillägg som behöver små, igenkännbara ikoner i olika storlekar.
Vanliga frågor
Vad är en favicon?
En favicon (kort för ”favorites icon”) är en liten ikon som hör till en webbplats. Den visas i webbläsarflikar, bokmärkeslistor, webbläsarhistorik och sökresultat. Favicons hjälper användare att snabbt känna igen och hitta din webbplats bland flera öppna flikar och bokmärken.
Vilka storlekar ska jag använda för min favicon?
Verktyget ger PNG-filer på 16, 32, 48, 64, 128 och 256 px samt en ICO på 32 px. Välj de storlekar som målklienten kräver. Google Search rekommenderar för närvarande kvadratiska ikoner som är större än 48 px, och visning garanteras inte.
Vad är skillnaden mellan PNG- och ICO-format?
PNG är ett rasterbildsformat och ICO är en ikonbehållare. Verktyget exporterar sex PNG-filer och bäddar in den skapade PNG-bilden på 32 px i en ICO-post. Kontrollera målklientens krav, eftersom inget av formaten garanterar universellt stöd.
Kan jag skapa en transparent favicon?
Ja, i både text/bokstavsläget och emojiläget kan du aktivera alternativet för transparent bakgrund. Då får faviconen en transparent bakgrund, vilket är användbart för favicons som ska smälta in i webbläsarens flikbakgrund.
Skickas min uppladdade bild till en server?
Verktyget återger din valda bild i webbläsaren utan att ladda upp den. Filer är begränsade till 10 MiB och vilka format som fungerar beror på webbläsarens avkodning. Detta uttalande omfattar inte lagring, spårning eller förfrågningar från andra skript på webbplatsen.
Hur lägger jag till faviconen på min webbplats?
Lägg de nedladdade favicon-filerna i webbplatsens rotkatalog (eller i en underkatalog du väljer) och lägg sedan till HTML-länktaggarna i head-delen av din HTML. Du kan kopiera färdiga länktaggar från det här verktyget. Exempel: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Tips och bästa praxis
- Håll det enkelt: Favicons visas i mycket små storlekar. Använd kraftiga, enkla former och färger med hög kontrast som förblir igenkännbara i 16x16 pixlar.
- Använd högst 1-2 tecken: För textbaserade favicons fungerar ett tecken bäst. Två tecken kan fungera men kan bli mindre läsbara i små storlekar.
- Välj kontrasterande färger: Se till att din text eller emoji tydligt sticker ut mot bakgrunden. Hög kontrast säkerställer synlighet i webbläsarflikar.
- Testa i små storlekar: Kontrollera alltid hur din favicon ser ut i 16x16 och 32x32 innan du slutför den. Det som ser bra ut i 256x256 behöver inte vara läsbart i mindre storlekar.
- Tänk på mörkt läge: Många användare surfar med mörka webbläsarteman. En favicon med transparent bakgrund och mörkt innehåll kan bli osynlig. Överväg att lägga till en färgad bakgrund eller använda ljust innehåll.
- Använd hörnradien: Rundade hörn (20-30 %) ger favicons ett modernt, välputsat utseende. Full cirkel (100 %) fungerar bra för enskilda bokstäver eller emojis.
- Ta med flera storlekar: Tillhandahåll filer som passar dina målklienter. Verktyget skapar de sex listade PNG-storlekarna och en ICO. Apple touch- och webbappsmanifestikoner kräver separata filer, och heltäckande enhetsstöd garanteras inte.