Favicon-generator

Skapa en favicon från vilken bild som helst

En favicon är den lilla ikonen som visas i webbläsarflikar, bokmärken och på mobilens startskärm. Den här generatorn tar en kvadratisk bild och skapar skarpa PNG-ikoner i alla storlekar som moderna webbplatser behöver – från flikikonen 16×16 till ikonen 512×512 för progressiva webbappar – helt i din webbläsare.

Släpp in en logotyp så ser du en liveförhandsvisning av varje storlek, redo att laddas ner var för sig. Vi skapar också de exakta <link>-taggarna att klistra in i sidans <head>, så att koppla in din favicon tar bara sekunder.

Tips för skarpa ikoner

Börja med en kvadratisk bild på minst 512×512 pixlar. Djärva, enkla former med stark kontrast förblir igenkännbara när de skalas ner till 16 pixlar, medan fina detaljer och liten text blir till en suddig massa. Testa förhandsvisningen 16×16 – om du fortfarande kan se vad det är har du en riktigt bra favicon.

Vilken storlek som används var

• 16×16 och 32×32 — webbläsarflikar, bokmärken och adressfält.
• 48×48 och 64×64 — skrivbordsgenvägar och vissa ikoner i sökresultat och webbplatslistor.
• 128×128 — större butiks- och tilläggslistningar.
• 180×180 — Apple touch icon som används när en sida läggs till på startskärmen på en iPhone eller iPad.
• 192×192 och 512×512 — startskärms- och progressiva webbappikoner för Android som anges i ett webbappmanifest.

Bra att veta

Varje bild skalas direkt till en kvadrat, så använd en kvadratisk källa; en rektangulär logotyp skulle sträckas ut. Transparens bevaras i PNG-filerna, men iOS visar inte transparenta touch-ikoner särskilt bra, så en enfärgad bakgrund är ett säkrare val för 180×180-versionen. Filerna får namn som favicon-32x32.png, vilket matchar den genererade kodsnutten, så behåll de namnen när du kopierar dem till din webbplats rot. Den här sidan skapar bara PNG-filer; om du också vill ha en klassisk favicon.ico, skapa en från din källbild med PNG-till-ICO-konverteraren.

Lägga till ikonerna på din webbplats

Ladda ner de storlekar du behöver, lägg dem i webbplatsens publika rot och klistra in de genererade <link>-taggarna i <head>. Om du bygger ett webbappmanifest, låt dess ikonlista peka på filerna 192×192 och 512×512. Efter publicering kan sökmotorer och webbläsare ta en stund på sig att uppdatera en cachad favicon, så testa i ett privat fönster och bli inte orolig om den gamla ikonen finns kvar en dag eller två.