Så här använder du det

Välj Bokstäver och skriv ett eller två tecken med dina färger, eller välj Bild och välj en logotyp (helst kvadratisk, minst 512 px).
Kontrollera förhandsvisningarna i alla storlekar, särskilt 16 och 32 px, som visas i webbläsarflikar.
Ladda ner ZIP-filen och ladda upp filerna till webbplatsens rot.
Klistra in HTML-taggarna i sidornas head-sektion och justera namnet i site.webmanifest om det behövs.

Så fungerar det

Webbläsare och enheter letar efter ikoner på olika ställen. Uppsättningen som skapas här täcker de vanligaste fallen: favicon.ico med 16, 32 och 48 px-bilder för webbläsarflikar, bokmärken och äldre programvara som automatiskt hämtar /favicon.ico; PNG-filer på 16 och 32 px som refereras via link-taggar; en apple-touch-icon på 180 × 180 som används när någon lägger till din webbplats på hemskärmen på en iPhone eller iPad; samt ikoner på 192 och 512 px som refereras från site.webmanifest för startskärmar på Android och installeringsbara webbappar.

Filen favicon.ico lagrar ikonerna som PNG-bilder i en ICO-behållare, vilket alla aktuella webbläsare och Windows Vista eller senare kan läsa. ICO- och ZIP-filerna sätts ihop av kod på den här sidan; ingenting skickas till någon server.

Små storlekar kräver en enkel design: vid 16 × 16 pixlar försvinner tunna linjer och liten text, så en fet bokstav eller en förenklad logotypsymbol fungerar bättre än en hel logotyp med ord. Bilden skalas ned i flera högkvalitativa steg. apple-touch-icon får alltid en heltäckande bakgrundsfärg eftersom iOS fyller transparenta ytor med svart, och iOS rundar själv hörnen.

När du har laddat upp nya ikoner kan webbläsare visa den gamla faviconen ett tag eftersom de cachelagrar den aggressivt. En hård uppdatering, eller att öppna /favicon.ico direkt, brukar hjälpa.

Exempel

Bokstavsikon för ett nytt projekt

Att skriva “TG” med vita bokstäver på en mörkgrön rundad kvadrat ger en stilren ikon som förblir läsbar vid 16 × 16 px i en webbläsarflik, utan att en designad logotyp behövs.

Ikon från en befintlig logotyp

En PNG-logotyp på 1024 × 1024 med transparent bakgrund, inställd på “Anpassa hela bilden”, ger transparenta flikikoner och en apple-touch-icon i din varumärkesfärg.

Bred logotyp

För ett ordmärke på 1200 × 300 behåller en centrerad beskärning bara bokstäverna i mitten. Att passa in hela bilden behåller allt men gör den pytteliten; en separat kvadratisk logotyp ser oftast bättre ut.

Vanliga frågor

Behöver jag fortfarande favicon.ico?

Den behövs fortfarande. Vissa webbläsare, flödesläsare och verktyg begär /favicon.ico från webbplatsens rot även utan någon länktagg. Moderna webbläsare använder också PNG-ikonerna som länkas i HTML-koden.

Var lägger jag filerna?

Ladda upp dem till webbplatsens rotmapp, bredvid startsidan, så att /favicon.ico och de andra sökvägarna i HTML-koden fungerar. Om du använder en undermapp ändrar du sökvägarna i länktaggarna och i site.webmanifest.

Varför visas fortfarande min gamla favicon?

Webbläsare mellanlagrar favicons separat och under lång tid. Testa en hård omladdning, öppna /favicon.ico i en ny flik eller kontrollera i ett privat fönster. Att byta namn på filerna, till exempel favicon-v2.ico, tvingar också fram en omladdning.

Skapar det här en SVG-favicon?

Nej. Den skapar PNG- och ICO-filer som fungerar överallt. Om du redan har en SVG-logotyp kan du lägga till den själv med en länktagg av typen image/svg+xml utöver dessa filer.

Integritet

Ikonerna, ICO-filen och ZIP-filen skapas i din webbläsare. Din bild och text laddas inte upp, lagras inte och tas inte med i analyser.