Utilia
Kategorier ▾
Språk: sv ▾

Favicon-generator

Skapa favicon.ico, PNG-ikoner, apple-touch-icon och site.webmanifest från en bild eller en emoji, med färdiga HTML-taggar. Ladda ner som ZIP, ingen uppladdning.

Källa

Anpassning
site.webmanifest

Så skapar du en favicon

  1. Under Källa väljer du Bild eller Text eller emoji. - Bild: släpp en PNG, JPG, WebP eller SVG. En kvadratisk logotyp på minst 512 × 512 px fungerar bäst. Välj Hela bilden för att få in den i ikonen, eller Fyll och beskär för att täcka kvadraten. - Text eller emoji: skriv en bokstav, initialer eller en emoji och välj sedan Teckensnitt, Fet och Textfärg.
  2. Ange Bakgrundsfärg eller kryssa i Transparent bakgrund. Välj en Form (Kvadrat, Rundad eller Cirkel) och en Marginal (%) för att lämna luft runt innehållet.
  3. Öppna vid behov site.webmanifest för att ange Appens namn (webbmanifest), Kortnamn, Temafärg och Mapp-URL för ikonerna (behåll / om filerna ligger i roten på din webbplats).
  4. Klicka på Skapa favicons. Ikonerna visas i verklig storlek bredvid en låtsasflik i webbläsaren. Därefter uppdateras de direkt vid varje ändring.
  5. Klicka på Ladda ner ZIP, ladda upp filerna till din webbplats, klicka sedan på Kopiera taggar och klistra in dem i <head> på dina sidor.

Vad finns i ZIP-filen?

Fil Storlek Används av
favicon.ico 16, 32 och 48 px Webbläsarflikar, bokmärken, äldre webbläsare, Windows
favicon-16x16.png 16 × 16 Webbläsarflikar
favicon-32x32.png 32 × 32 Flikar på skärmar med hög pixeltäthet, genvägar i aktivitetsfältet
apple-touch-icon.png 180 × 180 Hemskärmen på iPhone och iPad
android-chrome-192x192.png 192 × 192 Hemskärmen på Android (webbmanifest)
android-chrome-512x512.png 512 × 512 Startskärmar vid installation (webbmanifest)
site.webmanifest — Namn, färger och ikoner för en installerbar webbplats
favicon-tags.html — HTML-taggarna, som referens

ICO-filen innehåller tre PNG-bilder, ett format som Windows (sedan Vista) och alla aktuella webbläsare läser. Apple-touch-icon sparas alltid på en enfärgad bakgrund, eftersom iOS visar transparenta pixlar som svarta. Med transparent bakgrund används vitt.

HTML-taggarna

De genererade taggarna ser ut så här (med din mapp-URL):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Webbläsare begär också /favicon.ico automatiskt i roten på din domän, så att ha filen där hjälper även på sidor utan taggarna.

Designtips

  • Håll det enkelt. Vid 16 × 16 px försvinner detaljer. En enda bokstav, en fet symbol eller den enklaste versionen av din logotyp syns bäst.
  • Kontrollera förhandsvisningen i verklig storlek. Ikonen på 16 px i låtsasfliken är det besökarna faktiskt ser.
  • Tänk på mörkt läge. En mörk logotyp på transparent bakgrund kan försvinna i mörka webbläsarteman. En färgad bakgrund eller en liten marginal hjälper.
  • Emojis ser olika ut på olika system, eftersom varje plattform ritar emojis i sin egen stil. PNG-filerna behåller utseendet från din enhet.

Vanliga frågor

Vilka storlekar behöver en favicon?

I praktiken: en favicon.ico med 16, 32 och 48 px, en apple-touch-icon på 180 px och PNG-filer på 192 och 512 px för webbmanifestet. Det här verktyget skapar alla från en enda källa.

Kan jag använda en SVG-logotyp?

Ja. SVG-filer ritas i hög upplösning innan ikonerna skapas. SVG-filen visas som en vanlig bild, så dess skript körs aldrig.

Hur gör jag en emoji-favicon?

Välj Text eller emoji, skriv eller klistra in emojin, välj en bakgrund eller behåll den transparent och skapa. Resultatet är en riktig PNG och ICO, så den fungerar i alla webbläsare.

Varför syns inte min nya favicon?

Webbläsare cachar favicons mycket hårt. Ladda om med rensad cache, öppna webbplatsen i ett privat fönster eller lägg till en version i URL:en, till exempel /favicon.ico?v=2.

Laddas min bild upp?

Nej. Ikonerna, ZIP-filen och manifestet skapas i din webbläsare och ingenting lämnar din enhet.

Relaterade verktyg