Bilder · Favicon-generator

Skapa favicons för en webbplats på Mac

Alla favicons en webbplats behöver, plus webbmanifestet och HTML-koden att klistra in på din sida.

Körs på din Mac

Fråga AIChatGPTClaudePerplexityAI-lägeGrokMarkdown

Hämta OneMacTools Fler verktyg för Bilder

Favicon-generator på en Mac

Favicon-generator med exempelfiler och alternativ

Vad Favicon-generator skapade av exempelfilerna

Skärmavbilder från appen, med exempelfiler.

Så använder du Favicon-generator

1
Släpp din logotyp
Använd en bild, helst kvadratisk och minst 512 px. Bilder som inte är kvadratiska beskärs till en centrerad kvadrat.
2
Lägg till uppgifter om din webbplats
Skriv webbplatsens namn och temafärg för webbmanifestet, och välj bakgrund för Apple touch-symbolen.
3
Klicka på Skapa favicons
Alla favicon-filer skapas, tillsammans med manifestet och HTML-kodsnutten.
4
Ladda upp till din webbplats
Kopiera filerna från mappen ”favicons” (i en daterad mapp i Hämtade filer › OneMacTools) till webbplatsens rot och klistra in HTML-koden i sidans <head>. Kodsnutten visas också i appen.

Vad Favicon-generator gör

Från en enda logotyp får du favicon.ico med 16, 32 och 48 px inuti, PNG-filer på 16 och 32 px, en Apple touch-symbol på 180 px på en enfärgad bakgrund så att den inte blir svart på iPhone, och symboler på 192 och 512 px för Android och installerbara webbappar — plus en site.webmanifest med webbplatsens namn och temafärg och HTML-kodsnutten till din <head>.

Perfekt för

Lägg till en favicon på en ny webbplats
Gör en webbplats installerbar på telefoner
Ersätt en suddig favicon

Alternativen förklarade

Webbplatsnamn: Namnet som används i site.webmanifest och visas när någon installerar din webbplats på en telefon. Om du lämnar det tomt används bildens filnamn. Kortnamnet är de första 12 tecknen.
Temafärg: En hexfärg som #1E90FF, som används som webbläsarens temafärg och manifestets bakgrundsfärg. Vit om fältet lämnas tomt.
Bakgrund för Apple touch-symbol: Vit, Temafärg eller Svart. iPhone visar genomskinliga hemskärmssymboler på svart, så Apple touch-symbolen på 180 px får en heltäckande bakgrund.
Runda hörnen: Av som standard. Rundar hörnen på din logotyp i alla favicon-storlekar.

Goda råd

Använd ett enkelt märke, inte hela logotypen med text. Vid 16 px är det bara tydliga former som går att känna igen.
Utgå från en genomskinlig PNG så att favicon ser bra ut på både ljusa och mörka flikar i webbläsaren.
Skriv temafärgen som ett hexvärde. Den färgar webbläsarens gränssnitt på vissa telefoner, så välj din huvudsakliga varumärkesfärg.
Öppna webbplatsen i ett privat fönster efter uppladdningen för att kontrollera den nya symbolen, eftersom webbläsare cachar favicons länge.

Fungerar med

In: En bild, helst en kvadratisk PNG på 512 px eller mer.
Ut: En mapp ”favicons” med favicon.ico (16, 32 och 48 px inuti), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png och android-chrome-512x512.png, plus site.webmanifest och add-to-head.html.

Bilder som inte är kvadratiska beskärs till en centrerad kvadrat.

Frågor om Favicon-generator

Vilka favicon-filer behöver en webbplats?

favicon.ico för äldre webbläsare, PNG:er på 16 och 32 px för flikar, en Apple touch-symbol på 180 px för hemskärmen på iPhone och symboler på 192 och 512 px med ett webbmanifest för Android. OneMacTools skapar alla och den HTML-kod du klistrar in i sidans <head>.

Var hamnar filerna?

I webbplatsens rotmapp, bredvid index.html. Både HTML-kodsnutten och manifestet förväntar sig att de ligger där.

Hur gör jag en favicon.ico på en Mac?

Släpp din logotyp på Favicon-generator och klicka på Skapa favicons. favicon.ico skapas med versioner på 16, 32 och 48 px inuti, tillsammans med PNG-storlekarna.

Varför ser min symbol svart ut på hemskärmen på en iPhone?

iOS visar genomskinliga områden i en hemskärmssymbol som svarta. Apple touch-symbolen placeras på en heltäckande vit, svart eller temafärgad bakgrund för att undvika det.

Vad är site.webmanifest till för?

Den talar om för telefoner vad din webbplats heter och vilka symboler och färger den har när någon lägger till den på hemskärmen eller installerar den som webbapp.

Min nya favicon syns inte. Vad är fel?

Webbläsare cachar favicons envist. Kontrollera att filerna ligger i webbplatsens rot och att kodsnutten finns i <head>, och läs sedan in sidan igen i ett privat fönster.

Laddar Favicon-generator upp mina filer?

Nej. Favicon-generator körs helt på din Mac, så dina filer lämnar den aldrig och det fungerar offline.

Ändrar Favicon-generator mina originalfiler?

Nej. Resultaten sparas som nya filer i en daterad mapp i Hämtade filer › OneMacTools, och dina original lämnas exakt som de var om du inte slår på ett alternativ som säger något annat.

Vad behöver Favicon-generator?

Bara en Mac med macOS 26 eller senare. Det finns inget annat att installera.