Gratis favicon-generator för alla plattformar

En favicon-generator sparar det tråkiga arbetet med att bygga varumärke för en webbplats: att exportera samma logotyp i sex storlekar, namnge varje fil rätt och skriva taggarna som talar om för varje plattform var filerna finns. Favikonen är liten men når långt. Den syns i webbläsarflikar, bokmärken och historik, på mobilers startskärmar och bredvid webbplatsens namn i Google-resultat, där Google efterfrågar en kvadratisk ikon på minst 8x8 pixlar och rekommenderar en större än 48x48 (Google Search Central, favicons i sökresultat).

Hur använder du favicon-generatorn?

Släpp en PNG-, JPG- eller SVG-fil i verktyget, helst på 512x512 pixlar eller större. Generatorn ritar din bild på en duk i varje storlek med högkvalitativ utjämning och visar de sex resultaten bredvid varandra.

1. Förbered en kvadratisk källfil. Verktyget skalar din bild till varje kvadratisk storlek utan att beskära den, så en rektangulär logotyp blir utdragen. Beskär den till en kvadrat först, med lite marginal runt märket.
2. Släpp filen eller klicka för att välja den. Förhandsvisningen visas på en sekund.
3. Ladda ner paketet med knappen ”Ladda ner alla (.zip)”, eller varje PNG-fil för sig.
4. Kopiera HTML-koden till <head> på varje sida, oftast i din webbplatsmall.
5. Kopiera manifestet, fyll i fälten name och short_name med ditt varumärke och spara det som site.webmanifest i roten av din webbplats.
6. Ladda upp filerna till roten av din domän, så att /favicon-32x32.png och de andra sökvägarna i koden fungerar.

Eftersom bearbetningen sker i din webbläsare fungerar generatorn även med ej släppta logotyper och kundfiler som du inte får skicka till en server hos tredje part.

Vilka favicon-storlekar behöver du 2026?

Sex PNG-filer täcker webbläsare, iOS, Android och Windows. Tabellen visar vad generatorn skapar, var varje fil syns och vilken tagg eller fil som refererar till den.

Paret 192 och 512 är inte valt slumpmässigt: för Chromium-webbläsare måste ett webbappmanifest ha minst en 192x192-ikon och en 512x512-ikon, och Chrome skalar dem för de andra platser som behövs (web.dev, lägg till ett webbappmanifest). Storleken 180x180 motsvarar den högupplösta iPhone-ikonen i Apples egen exempelkod för webbklipp (Apple, konfigurera webbapplikationer). Windows-kaklet är en äldre fil: den gör ingen skada, och du kan ta bort taggen om du inte riktar dig mot gamla Windows-installationer.

Vilken HTML-kod ger generatorn dig?

Sex rader för <head>: två rel="icon"-länkar för PNG-favikonerna, Apple-touchikonen, länken till manifestet, Windows-kaklet och en theme-color-metatagg. När en sida listar flera ikoner läser webbläsaren attributen type och sizes för att välja den lämpligaste, och går vidare till nästa om en fil inte fungerar (MDN, länktyper).

Två inställningar i den genererade koden är värda att redigera. theme-color och manifestets färger är som standard vita (#ffffff): ersätt dem med din varumärkesfärg om du vill att webbläsarens fält och startbilden i en installerad app ska matcha din webbplats. Och manifestet lämnar name och short_name tomma med avsikt: web.dev förklarar att minst ett av dem krävs, och att short_name används på startskärmen där utrymmet är begränsat.

Hjälper en favicon SEO?

Inte som rankingfaktor, men den påverkar hur ditt resultat ser ut. Google kan visa din favicon bredvid webbplatsens namn överst i varje resultat, så en tydlig ikon hjälper sökare att känna igen ditt varumärke och kan höja din klickfrekvens jämfört med resultat med en generisk jordglob.

Google listar villkoren för att vara berättigad, och ett saknat villkor är oftast orsaken till att en favicon inte visas:

• En länktagg på startsidan. Google läser rel="icon", shortcut icon, apple-touch-icon och apple-touch-icon-precomposed.
• Åtkomst för sökrobotar. Googlebot måste nå startsidan och Googlebot-Image måste nå ikonfilen. En regel i robots.txt som blockerar din bildmapp kan dölja din favicon.
• En kvadratisk fil på minst 8x8 pixlar, helst större än 48x48, i ett format som stöds: BMP, GIF, ICO, PNG, JPEG, PPM eller TIFF. De genererade PNG-filerna uppfyller kraven.
• En favicon per värdnamn. En underdomän kan ha en egen ikon; en undermapp som /blog kan inte det.
• En stabil URL som du inte ändrar ofta.

Efter en ändring behöver Google genomsöka startsidan igen, vilket enligt samma dokumentation kan ta från några dagar till flera veckor. Att begära indexering av startsidan i Search Console påskyndar detta.

Hur designar du en favicon som går att läsa vid 16 pixlar?

Designa för den minsta storleken först. Vid 16x16 har hela ikonen 256 pixlar, så en fullständig logotyp med slogan blir till en suddig fläck. Dessa regler gör ikonen läsbar:

• Använd logotypens märke, inte hela logotypen. En symbol eller en enda fet bokstav klarar förminskningen; ett ord gör det inte.
• Fyll kvadraten. Lämna en tunn marginal, men undvik stora tomma kanter som gör märket litet i fliken.
• Satsa på starka kontraster och två eller tre platta färger. Tunna linjer och övertoningar försvinner vid små storlekar.
• Kontrollera ljust och mörkt tema. En transparent PNG med en mörk symbol försvinner på en mörk flikrad; en solid bakgrund eller en ljus kontur löser problemet.
• Tänk på masker för Android. Android kan beskära appikoner till en cirkel. MDN rekommenderar en maskerbar ikon med det viktiga inom en säker zon och en ogenomskinlig bakgrund (MDN, definiera appikoner). Om din symbol når kanterna, exportera en utfylld version för filerna 192 och 512.

Vilka favicon-misstag är vanligast?

De flesta trasiga favikoner beror på en sökväg eller en cache, inte på bilden i sig.

• Filer uppladdade till fel mapp. Den genererade koden pekar på roten (/favicon-32x32.png). Om du lägger filerna i /assets måste du uppdatera varje sökväg.
• Ingen fil på /favicon.ico. När en sida inte deklarerar någon ikon tillåter HTML-standarden att webbläsare begär /favicon.ico som standard (WHATWG HTML-standarden, länktyper). Sidor utan taggar, till exempel PDF-filer eller felsidor, ger då en 404 i dina loggar. Generatorn skapar bara PNG-filer, så vill du ha den reservlösningen exporterar du din 32x32-PNG som ICO-fil med valfri bildredigerare.
• En gammal ikon som inte försvinner. Webbläsare cachar favikoner aggressivt. Byt namn på filen eller lägg till en versionsparameter (?v=2) efter en omdesign.
• Taggar bara på startsidan. Webbläsare läser ikonen sida för sida, så lägg koden i den gemensamma mallen.
• En utdragen logotyp. Beskär källbilden till en kvadrat före generering, som beskrivits ovan.

När filerna är online, kör favicon-extraktorn på din domän för att se vilka ikoner en sökrobot faktiskt hittar, och sedan on-page-SEO-granskningen för att kontrollera resten av dina head-taggar.

Hur passar favikonen in i ditt varumärke i AI-svar?

AI-assistenter som ChatGPT och Perplexity visar ofta ikonen för varje webbplats de citerar, bredvid källänken. En enhetlig favicon gör ditt varumärke igenkännbart även där, men den är bara ramen: att bli citerad beror på ditt innehåll och din auktoritet. För att se om din webbplats över huvud taget förekommer i svaren mäter uppföljning av AI-omnämnanden dina varumärkesomnämnanden varje månad, fråga för fråga och modell för modell, och GEO- och SEO-instrumentpanelen ställer dem bredvid dina Google-klick och positioner.

Ett komplett favicon-set tar en kvadratisk bild och två minuter. Generera dina ikoner ovan, klistra in koden i din mall och se sedan Soranks abonnemang för att öka trafiken som ska se dem, på autopilot.