Favicon-generator för initialer och emoji
Skapa en enkel och lättigenkännlig favicon utan att först förbereda en bild. Ange en eller två initialer eller välj en enda emoji och justera sedan form och bakgrundsfärg. För initialer kan du även välja teckenfärg och typsnittsstil; emoji behåller webbläsarens inbyggda utseende. Förhandsvisningen på 512 px uppdateras i webbläsaren. Den färdiga nedladdningen innehåller små webbläsarikoner, mobilikoner och konfigurationsfiler som behövs för att lägga till motivet på en webbplats. Ingenting laddas upp och ingen AI används.
Så skapar du en favicon
-
1
Välj ikonens innehåll
Ange en eller två initialer för ett kompakt bokstavsmärke eller använd en emoji som motiv.
-
2
Formge motivet
Välj kvadrat, rundad kvadrat eller cirkel och ställ in bakgrundsfärgen. För initialer kan du även ändra teckenfärg och typsnittsstil; emoji behåller sitt inbyggda utseende.
-
3
Kontrollera förhandsvisningen
Granska förhandsvisningen på 512 px och bedöm även om motivet förblir tydligt när det minskas till 16 px i en webbläsarflik.
-
4
Ladda ner och installera
Ladda ner favicon-paketet som skapats lokalt, lägg till filerna på webbplatsen och klistra in eller anpassa det medföljande kodavsnittet för `<head>`.
Det här ingår i favicon-paketet
En och samma favicon måste fungera på flera platser, från en liten webbläsarflik till en mobil hemskärm. Generatorn renderar motivet i de praktiska storlekarna nedan och paketerar filerna lokalt.
| Paketfil | Storlek eller innehåll | Avsedd användning |
|---|---|---|
favicon.ico |
Bilder på 16, 32 och 48 px | Webbläsarflikar, bokmärken och program som fortfarande begär en ICO-fil |
favicon-16x16.png |
16 × 16 px | Liten favicon för webbläsare |
favicon-32x32.png |
32 × 32 px | Standardfavicon för webbläsare |
apple-touch-icon.png |
180 × 180 px | Apple-touchikon |
android-chrome-192x192.png |
192 × 192 px | Webbappikon för mindre Android-sammanhang |
android-chrome-512x512.png |
512 × 512 px | Större webbappikon |
mstile-150x150.png |
150 × 150 px | Bild för Microsoft-panel |
site.webmanifest |
JSON-manifest | Hänvisar till Android-ikonerna i webbläsare som använder ett webbappmanifest |
browserconfig.xml |
XML-konfiguration | Hänvisar till Microsoft-panelens bild och färg |
favicon-head.html |
HTML-avsnitt | Färdiga hänvisningar till ikoner, manifest och webbläsarkonfiguration att kopiera |
Skapa en favicon som fungerar även i 16 px
En favicon är inte en miniatyraffisch. Små detaljer, långa ord och subtila färgskillnader försvinner snabbt i storleken för en webbläsarflik. En tydlig initial, ett kort märke med två bokstäver eller en enkel emoji är oftast lättare att känna igen än en komplicerad komposition.
- Använd stark kontrast mellan tecken och bakgrund när du gör en favicon av initialer.
- Lämna luft runt bokstäver och emoji så att plattformarnas masker inte tränger ihop motivet.
- Jämför kvadrat, rundad kvadrat och cirkel innan du väljer den tydligaste silhuetten.
- Bedöm de små exporterade ikonerna utöver förhandsvisningen på 512 px. Ett motiv som ser välgjort ut i full storlek kan bli otydligt i 16 px.
- Testa den installerade faviconen i flera webbläsare och mot både ljust och mörkt webbläsargränssnitt.
Lägg till de genererade filerna på webbplatsen
Behåll de genererade filnamnen och placera filerna där det medföljande avsnittet för <head> förväntar sig dem, vanligtvis i webbplatsens rotkatalog. Klistra in avsnittet i <head> i varje sidmall. Om ditt ramverk levererar statiska resurser från en annan katalog eller via ett innehållsleveransnätverk ska du uppdatera sökvägarna i kodavsnittet, manifestet och webbläsarkonfigurationen före publicering.
De medföljande filerna ger hänvisningar till ikonerna, men de gör inte en webbplats installerbar som en progressiv webbapp på egen hand. Installation kan kräva fler manifestfält, säker hosting och webbläsarspecifika villkor.
Vanliga frågor
Ja. Ange en eller två initialer och välj sedan form, bakgrundsfärg, förgrundsfärg och typsnittsstil. Den korta texten är avsiktlig eftersom den förblir mer läsbar i små favicon-storlekar.
Ja. Emojin behåller webbläsarens inbyggda utseende, medan form och bakgrundsfärg fortfarande kan ändras. Kontrollera förhandsvisningen före nedladdningen, eftersom utseendet varierar mellan system och webbläsare och komplexa emoji inte finns överallt.
Ja. Paketet innehåller en favicon.ico med bilder på 16, 32 och 48 px, separata PNG-favicons på 16 och 32 px samt större ikoner för Apple, Android och Microsoft.
Favicon-generator skapar ett nytt motiv av initialer, kort text eller en emoji. Favicon-konverterare är det separata verktyget för att omvandla en befintlig PNG-, JPEG- eller WebP-bild till favicon-filer.
Nej. Texten eller emojin, renderingen av förhandsvisningen och skapandet av paketet stannar i webbläsaren. Verktyget laddar inte upp motivet och hämtar ingen webbplats.
Nej. Den tillämpar dina val och använder ingen AI. Den kan inte heller avgöra om initialer, en emoji, färger eller det färdiga motivet strider mot ett varumärke eller någon annans rättigheter. Kontrollera rättigheterna innan du använder faviconen kommersiellt.
Webbläsare lagrar ofta favicons i cacheminnet. Kontrollera att de genererade filerna och hänvisningarna i <head> har publicerats på de förväntade sökvägarna. Rensa sedan webbläsarens cache eller testa i ett privat fönster. Vissa sökmotorer och plattformar uppdaterar ikoner enligt sitt eget schema.
Relaterade verktyg
Material Design-färgväljare
Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.
Rutpappersgenerator
Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.
Pixelgrafikverktyg
Rita pixelgrafik från grunden på ett rutnät från 4×4 till 64×64. Använd penna, fyllning, pipett, symmetri och ångra, och exportera sedan skarp transparent PNG, SVG eller projektfil.
Skapa kontaktkarta
Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.
Konverterare för bildformat
Konvertera bilder till JPG, PNG eller WebP direkt i webbläsaren, med kvalitetskontroll för de förlustbehäftade formaten och bevarad transparens i PNG och WebP.
Flaggskapare
Formge en enkel egen 3:2-flagga i webbläsaren med sex layouter, färger, text och en symbol. Hämta SVG eller PNG, eller öppna webbläsarens utskriftsdialog.
Verktyget finns på andra språk
- イニシャル・絵文字のファビコン生成ツール [JA]
- Favicon-generator voor initialen en emoji [NL]
- مولّد Favicon من الأحرف والرموز التعبيرية [AR]
- Générateur de favicon avec initiales et emoji [FR]
- Gerador de favicon com iniciais e emoji [PT]
- 이니셜 및 이모지 파비콘 생성기 [KO]
- Generator Favicon dari Inisial dan Emoji [ID]
- Generador de favicon con iniciales y emojis [ES]
- Favicon-Generator für Initialen und Emojis [DE]
- Trình tạo favicon từ chữ cái và emoji [VI]
- เครื่องสร้าง Favicon จากอักษรย่อและอีโมจิ [TH]
- Generator favicon z inicjałów i emoji [PL]
- Генератор favicon из букв и эмодзи [RU]
- Baş Harf ve Emoji Favicon Oluşturucu [TR]
- 首字母与表情符号 Favicon 生成器 [ZH]
- Favicon Generator for Initials and Emoji [EN]
- Generatore di favicon con iniziali ed emoji [IT]