Så skapar du en favicon och lägger till den på din webbplats

Välj väg för webbplatsen: i WordPress laddar du upp en kvadratisk bild via inställningen för webbplatsikon; andra sidbyggare har oftast ett eget fält för webbplatsikonen. Redigerar du HTML själv, skapa ikonfilerna och följ HTML-anvisningarna. Du kan hoppa över ZIP och manifest om editorn skapar ikonerna.

Vad är en favicon och var syns den?

En favicon är den lilla ikon som hjälper besökare att känna igen webbplatsen i en webbläsarflik eller ett bokmärke. En större variant kan visas när webbplatsen sparas på telefonens hemskärm. Därför kan samma form behövas i flera storlekar.

Tänk dig en läsare med tolv öppna flikar. Företagsnamnet kanske inte längre får plats, men en tydlig symbol kan fortfarande visa vilken flik som hör till dig. Ikonen ska alltså vara lätt att känna igen på mycket liten yta.

En favicon är inte samma sak som logotypen i sidhuvudet eller förhandsbilden vid länkdelning. När du ändrar en av dem uppdateras inte de andra automatiskt. En bred logotyp kan vara snygg på sidan men oläslig i en liten kvadrat.

Välj först hur ikonen ska installeras. Då kan du förbereda de filer webbplatsen faktiskt behöver utan att använda allt i paketet.

Om verktyget har en egen inställning för webbplatsikon börjar du där. HTML-anvisningarna gäller webbplatser där du kan ändra sidornas gemensamma head. Att klistra in taggarna i ett synligt innehållsblock fungerar inte på samma sätt.

Välj en form som fungerar vid 16 pixlar

Använd den mest igenkännbara delen av varumärket. En tydlig initial, en enkel symbol eller en maskots huvudform fungerar ofta bättre än ett fullständigt namn med slogan. Ta bort detaljer som kräver en stor bild.

Tänk till exempel på ett bageri med en limpa, veteax och namnet ”Bageriet vid ån” i logotypen. Ikonen kan behålla limpans silhuett och ett tydligt snitt. Alla ax och hela namnet skulle bli en samling små streck.

Granska bilden i verklig storlek. En stor förhandsvisning av en bild på 512 pixlar visar inte om en smal öppning syns vid 16 pixlar. Titta utan att zooma och se om du känner igen formen inom någon sekund.

• Håll dig till en huvudidé. Undvik flera objekt som konkurrerar om utrymmet.
• Använd tydliga kanter. Tunna konturer och små hål kan försvinna vid förminskning.
• Se till att kontrasten räcker. En ljus symbol på transparent bakgrund kan försvinna i ett ljust gränssnitt.
• Använd text sparsamt. En kraftig bokstav kan fungera, men sällan ett helt företagsnamn.
• Kontrollera silhuetten. Förenkla om ikonen inte går att känna igen utan detaljerna.

Du får gärna använda en särskild form för små storlekar. Den behöver inte vara en miniatyr av hela logotypen. Rita en separat version om formen behöver finjusteras vid 16 pixlar. Generatorn ändrar storleken, men väljer inte vilka varumärkesdetaljer som ska tas bort.

Förbered originalbilden utan att förlora detaljer

Exportera helst direkt från originalet. En kvadratisk PNG på minst 512 × 512 pixlar är en praktisk utgångspunkt eftersom den största genererade ikonen är 512 pixlar. Det betyder inte att webbläsarfliken visar bilden i den storleken.

Har du en vektorlogotyp, exportera en kvadratisk PNG från ditt designprogram. Pixilo accepterar JPG, PNG och WebP, men inte SVG. Spara vektororiginalet för framtida ändringar.

Att förstora en suddig ikon från 32 till 512 pixlar återskapar inga detaljer. Använd ett bättre original eller rita om en enklare symbol. Generatorn varnar om någon sida är mindre än 512 pixlar eftersom de större filerna då behöver förstoras.

Ordna kompositionen innan du funderar på filstorleken. En rektangulär logotyp kan passas in utan att förvrängas, men lämna mycket tomrum. En centrerad beskärning fyller kvadraten genom att ta bort delar av bilden. Inget av alternativen passar automatiskt en bred textlogotyp.

Om motivet inte är centrerat, välj först ett utsnitt med bildbeskäraren. Favicon-generatorn beskär i mitten och låter dig inte flytta utsnittet mot en symbol nära kanten.

PNG passar transparenta bilder och skarpa grafiska kanter. Använder du JPG, kontrollera små förhandsvisningar efter suddiga kanter eller brus. Ett annat filformat återställer inte förlorade detaljer. Läs mer i guiden om JPG och PNG.

Storlekar och format: vilka filer behöver du?

Du behöver inte en separat fil för varje möjlig skärmstorlek. Utgå från webbplatsens krav. En egen HTML-webbplats kan använda några länkade ikoner, medan ett publiceringssystem kan skapa flera varianter från en enda bild.

ICO kan innehålla flera ikonbilder. Pixilo skapar en riktig ICO med storlekarna 16, 32 och 48 pixlar. Att byta namn på en PNG till .ico skapar inte den strukturen. En PNG innehåller en bild och är enkel att granska separat.

Apple-ikonen på 180 pixlar har en annan uppgift än webbläsarikonen. Apple beskriver länken apple-touch-icon för hemskärmsikoner i sina anvisningar för webbappar. En liten webbläsarikon är inte ett bra original för den större bilden.

ZIP-paketet innehåller nio filer. PNG-filerna på 32 och 48 pixlar är alternativ för inställningar som kräver dessa storlekar. Du behöver inte länka dem tillsammans med ICO och PNG på 96 pixlar. Installationsanvisningarna är till för dig, inte för besökarna.

Välj transparens och marginaler med omsorg

Transparenta ikoner kan se rena ut, men bakgrunden bestäms av gränssnittet runt dem. Testa en mörk symbol mot mörk bakgrund och en ljus mot ljus. Använd en kontrasterande kontur eller en enfärgad bakgrund om formen blir otydlig.

I Pixilo gäller transparens för ICO och PNG på 32, 48 och 96 pixlar. Apple-ikonen och bilderna på 192 och 512 pixlar använder alltid den valda bakgrundsfärgen. Färgen påverkar därför större ikoner även när webbläsarikonerna är transparenta.

Transparens tar inte bort en befintlig bakgrund. Vita bildpunkter runt logotypen förblir vita. Vill du ha transparent utrymme behöver originalet redan ha en transparent bakgrund.

Marginalen gäller på varje sida. Med 10 % får en kvadratisk bild 80 % av bredden, med 20 % får den 60 %. Vid 16 pixlar ger det senare bara ungefär 10 pixlar åt motivet. Lagom marginal ger luft, men för mycket gör symbolen svår att se.

Kontrollera även originalets egna marginaler. Om logotypen bara fyller halva PNG-bilden finns tomrummet kvar även när extra marginal är noll. Beskär onödigt tomrum först, men behåll avsiktligt utrymme kring symbolen.

Börja med standardmarginalen och jämför med ett mindre och ett större värde. Bedöm först bilden på 16 pixlar. Inställningen gäller hela bildytan, inte bara den färgade formen.

Så lägger du till en favicon i WordPress

Använd WordPress inbyggda webbplatsikon. Dokumentationen rekommenderar en kvadratisk PNG på minst 512 × 512 pixlar. Från WordPress 6.5 finns inställningen under Inställningar → Allmänt. Välj bilden och spara. I äldre versioner kan den finnas under Utseende → Anpassa → Webbplatsidentitet.

Med ett blocktema som stöder funktionen kan ikonen även finnas under Utseende → Redigerare → Identity. Namnen beror på gränssnittets språk. Se dokumentationen om Identity i webbplatsredigeraren om den vyn stämmer med din.

Välj Pixilos icon-512.png. Den har enfärgad bakgrund, så kontrollera färgen före uppladdning. Ett lämpligt kvadratiskt PNG-original kan också användas om du vill behålla dess transparens.

1. Välj din PNG i fältet för webbplatsikon.
2. Spara och öppna den offentliga startsidan och en undersida.
3. Kontrollera fliken. Visar en annan komponent fortfarande en gammal ikon, följ felsökningsanvisningarna.

WordPress skapar hänvisningarna åt dig. ZIP-filen är inget tema eller tillägg. HTML-taggarna ska inte klistras in i ett inlägg eller innehållsblock.

Webbplatslogotyp och webbplatsikon är olika inställningar. Att ändra logotypen i sidhuvudet ändrar inte nödvändigtvis flikikonen. Välj rätt ikoninställning och spara den.

Skapa en favicon från din logotyp med Pixilo

1. Välj en bild. Öppna favicon-generatorn och välj en JPG, PNG eller WebP på högst 25 MB. Bilden får vara högst 8000 pixlar per sida och totalt 32 miljoner pixlar.
2. Välj hur bilden ska passa. Anpassning behåller hela bilden och proportionerna. Kvadratisk beskärning tar ett centrerat utsnitt. Kontrollera att viktiga delar finns kvar.
3. Justera marginal och bakgrund. Jämför webbläsarikonerna i verklig storlek och Apple-förhandsvisningen. Välj om webbläsarikonerna ska vara transparenta.
4. Ladda ner det du behöver. Välj ZIP för hela paketet eller en enskild fil för ett särskilt uppladdningsfält.
5. Installera och testa. Använd webbplatsens inställningar eller HTML-anvisningarna nedan. Kontrollera den publicerade webbplatsen, inte bara förhandsvisningen.

Justera tills förhandsvisningarna ser rätt ut och ladda sedan ner. Ingen separat sparknapp behövs: nedladdningen använder de senaste valen. En fil som redan sparats på din enhet ändras däremot inte när du ändrar inställningarna. Ladda ner igen efter ändringar.

Originalbilden och filerna stannar på din enhet. Ingen bild laddas upp till Pixilos server. Bilden och inställningarna finns på den öppna sidan, så ladda ner resultatet innan du stänger eller uppdaterar den.

När du väljer en annan bild visas bildväljaren igen. Inställningarna behålls. Kontrollera därför anpassning, marginal och bakgrund för den nya bilden.

Exempel: gör en bred logotyp till en användbar ikon

Anta att ett bageri har en logotyp på 1200 × 600 med en limpa och ett långt namn. Det här är ett exempel på arbetsgången, inte en uppmätt jämförelse av artikelns bilder.

1. Separera symbolen. Exportera limpan från originalet som en kvadratisk PNG på 512 × 512. Undvik en liten skärmbild av logotypen.
2. Ta bort onödiga marginaler. Behåll kanterna hela och låt symbolen fylla tillräckligt mycket av kvadraten.
3. Jämför små förhandsvisningar. Börja med anpassning och standardmarginal. Om snittet i limpan försvinner vid 16 pixlar, förenkla originalet i stället för att förstora en suddig kopia.
4. Testa bakgrunden. Prova en kontrasterande enfärgad bakgrund om konturen försvinner mot en mörk yta. Kontrollera också Apple-ikonen.
5. Ladda ner för din webbplats. För HTML med webbläsar- och Apple-ikoner används ICO, PNG på 96 pixlar och Apple-ikonen. För WordPress används PNG på 512 pixlar.

Ikonen ska gå att känna igen redan före installationen. Ser den bara bra ut i stor förhandsvisning behöver formen ändras. Rätt filändelse gör inte en överlastad form tydligare.

Så lägger du till en favicon på en HTML-webbplats

Packa upp ZIP-filen och lägg ikonerna i den mapp webbplatsen publicerar. Med sökvägarna nedan ska ICO-filen finnas på en adress som https://example.com/favicon.ico. Spara filerna där bygget hämtar sina original eller offentliga resurser. Filer som bara läggs i en genererad utmatningsmapp kan försvinna vid nästa bygge.

Lägg de två första taggarna i sidans <head>. Den tredje används för Apples hemskärmsikon. Har sidorna en gemensam head-mall, lägg taggarna där så att startsidan och undersidorna använder samma filer.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

href anger filens adress och sizes dess mått. Webbläsarens val kan bero på format, storlek och andra angivelser. Den första taggen väljs inte alltid. Se MDN:s dokumentation för rel="icon".

Ligger filerna i /icons/, ändra alla tre sökvägarna till /icons/favicon.ico, /icons/favicon-96x96.png och /icons/apple-touch-icon.png. Filens placering och länken måste stämma överens.

En sökväg som börjar med / utgår från domänens rot. Ligger webbplatsen i en undermapp som /portfolio/, använd rätt offentliga sökvägar. Öppna varje adress efter publicering och kontrollera resultatet.

Leta först efter befintliga favicon- och manifesttaggar i den gemensamma head-delen. Ersätt gamla hänvisningar när det behövs. Dubbla ikoner gör det svårare att veta vilken webbläsaren väljer.

Valfritt: lägg till eller uppdatera appmanifestet

Hoppa över det här om du bara behöver webbläsarikoner. Ett manifest är separat och krävs inte för att visa en flikikon.

Ett appmanifest är en JSON-fil som beskriver appen och dess ikoner. Pixilos site.webmanifest innehåller bara ikonposter. Har du redan ett manifest, lägg in de nya ikonerna utan att ersätta namn, startadress eller visningsläge. Läs web.dev:s manifestguide.

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Om du använder det nya manifestet, lägg följande länk i sidornas gemensamma head. Finns redan en manifestlänk, uppdatera den befintliga filen i stället.

<link rel="manifest" href="/site.webmanifest">

Publiceras manifestet i /icons/, blir länken href="/icons/site.webmanifest". Ändra också bildsökvägarna i JSON till /icons/icon-192.png och /icons/icon-512.png. Det inledande snedstrecket pekar på domänens rot, inte manifestets mapp.

Ikonerna använder purpose: "any". De är inte maskbara: sådana ikoner måste utformas så att viktiga detaljer klarar beskärning till cirkel eller annan form. En enfärgad bakgrund räcker inte. Ändra inte ändamålet utan att förbereda och testa formen. Se MDN:s dokumentation om ikonändamål.

Filen innehåller fortfarande bara ikoner. Den är ingen fullständig appkonfiguration och gör inte webbplatsen installerbar på egen hand.

Vad en favicon gör i Google Sök

En igenkännbar ikon kan hjälpa människor att identifiera webbplatsen i sökresultaten. Se den som en del av varumärket och användbarheten, inte som en garanti för bättre placeringar eller fler klick.

Googles riktlinjer kräver en kvadratisk bild på minst 8 × 8 pixlar och rekommenderar större än 48 × 48. Paketets PNG på 96 pixlar passar. Länka från startsidan, behåll en stabil adress och låt Googlebot läsa startsidan och Googlebot-Image läsa ikonen.

Google använder en ikon per värdnamn, till exempel example.com. En del under example.com/blog/ får ingen separat sökikon. Riktlinjerna garanterar inte visning. Ny genomsökning och behandling kan ta dagar eller veckor. En indexeringsbegäran i Search Console ger ingen omedelbar uppdatering.

Fungerar ikonen i webbläsaren men inte i Sök, kontrollera offentliga filer och startsidans taggar. Ständiga designändringar under väntan gör det svårare att följa vilken version som behandlats.

Varför saknas ikonen eller visas den gamla bilden?

Skilj på fel i installationen och en sparad gammal kopia. Fungerar inte bildens adress hjälper ingen siduppdatering. Visar adressen rätt bild, kontrollera taggar och cache.

Öppna ikonens exakta adress i en ny flik. Den ska visa bilden, inte startsidan, inloggning eller ett felmeddelande. För en noggrannare kontroll, öppna utvecklarverktygens nätverkspanel och ladda om. Status 200 räcker inte om svaret är HTML i stället för en bild.

Granska den publicerade head-delen på både startsidan och en undersida. Malländringen kanske inte kom med i bygget, eller så lägger en annan komponent till en gammal ikon. Sök efter de filnamn och sökvägar du installerade.

Webbläsaren kan lagra ikonen separat från sidan. Stäng och öppna fliken, prova sedan en ny profil eller annan webbläsare. Vanlig uppdatering byter inte alltid ikonen direkt. Testerna hjälper att hitta cachefel men garanterar inte samtidig uppdatering överallt.

Använder webbplatsen CDN eller service worker, kontrollera om gamla svar fortfarande levereras. Uppdatera relevant cache via webbhotellet eller appen. Gör en ändring i taget och kontrollera resultatet innan du fortsätter.

Kontrollera detta innan du är klar

• Formen känns igen vid 16 och 32 pixlar utan zoom.
• Kanter och färger är tydliga på både ljus och mörk bakgrund.
• Filerna använder slutliga val för anpassning, marginal och bakgrund.
• Varje ikonadress visar rätt offentlig fil efter publicering.
• Sidornas gemensamma head innehåller rätt länkar utan gamla dubbletter.
• Apple-ikon och manifest hänvisar till publicerade filer.
• Ett befintligt appmanifest har kvar övriga inställningar.
• Startsidan och ikonen är åtkomliga för Googles sökrobotar om du vill kunna visas i Sök.

Spara originalbilden tillsammans med det färdiga paketet. Anteckna var ikonen ställs in: i HTML-mallen, WordPress webbplatsikon eller webbplatsverktyget. Det underlättar nästa ändring av varumärket.

Vanliga frågor

Vilken storlek är bäst för en favicon?

Använd en tydlig kvadratisk bild stor nog för filerna du behöver. Ett original på 512 × 512 täcker paketets största fil men krävs inte enbart för en liten flikikon. Se storlekstabellen.

Behöver jag både ICO och PNG?

Inte i alla installationer. Pixilos HTML-exempel använder ICO med flera små storlekar och en större PNG. Ett publiceringssystem kan skapa egna varianter från en bild. Följ inställningens krav i stället för att ladda upp allt.

Kan en favicon vara transparent?

Ja, webbläsarikonerna kan behålla transparens. Testa symbolen mot olika bakgrunder. Hemskärmsikoner använder den valda enfärgade bakgrunden. Inställningen tar inte bort en bakgrund som redan finns i originalet.

Varför blir logotypen suddig som favicon?

Originalet kan vara suddigt eller ha fler detaljer än ikonen kan visa. Förstoring löser inget av problemen. Använd ett tydligt original, förenkla detaljerna och granska verkliga storlekar innan du ändrar marginalen.

Ska jag ladda upp ZIP-filen direkt i WordPress?

Nej. Packa upp den och använd en lämplig kvadratisk PNG, till exempel icon-512.png, som webbplatsikon. ZIP-paketet är varken tema eller tillägg.

Förbättrar en favicon SEO?

Den ger webbplatsen en konsekvent och igenkännbar identitet, men garanterar inte bättre placeringar. Följ Googles krav och låt behandlingen ta tid. Att uppfylla kraven garanterar inte att ikonen visas.

Sammanfatta medChatGPT (öppnas i en ny flik)Grok (öppnas i en ny flik)Google (öppnas i en ny flik)Perplexity (öppnas i en ny flik)Claude (öppnas i en ny flik)