# Favicon ## Vad det är En favicon är den ikon som en webbplats anger som sin egen, så att webbläsaren kan visa den i fliken, i adressfältet, bredvid ett bokmärke och i historiken. Ordet är en förkortning av engelskans favorites icon, efter bokmärkesmenyn Favoriter i Internet Explorer, den första webbläsaren som letade efter en sådan ikon. Den kallas också webbplatsikon eller flikikon. I HTML anges den med ett `link`-element vars `rel` är `icon`; äldre kod skriver `shortcut icon`, en stavning som standarden fortfarande godtar av historiska skäl. En sida kan ange flera ikoner på en gång, var och en med en `type`, ett värde för `sizes` och en valfri `media`-fråga, och webbläsaren väljer den som passar det ställe där den ska rita. Storlekarna anges i enhetspixlar, så `32x32` betyder trettiotvå fysiska bildpunkter i varje led, och nyckelordet `any` är reserverat för ett skalbart format som SVG. När två kandidater passar lika bra vinner den som angavs sist. När en sida inte anger någon ikon alls får en webbläsare som hämtar sidan över HTTP eller HTTPS ändå fråga efter `/favicon.ico` i webbplatsens rot: en vana från slutet av 1990-talet som HTML-standarden numera skriver ned som tillåtet beteende. Filen `.ico` bakom den vanan är en behållare snarare än en enda bild. En fil kan rymma flera bitmappar i olika storlekar, och webbläsaren tar den ram som passar; den registrerade mediatypen är `image/vnd.microsoft.icon`. I dag är PNG och SVG de vanliga alternativen, och i princip är varje format som webbläsaren kan avkoda tillåtet: en av den här webbplatsens egna sidor anger en WebP. Faviconen är den minsta medlemmen i en familj av ikoner som lätt flyter ihop. Hemskärmsikonen från Apple, `apple-touch-icon`, är en separat PNG som iOS letar efter under sitt eget namn. En installerad webbapp hämtar oftast sina ikoner från webbappsmanifestet, bl.a. en så kallad maskable-variant som ritas med en säker marginal så att plattformen kan beskära den till en cirkel eller en kvadrat med rundade hörn. Den stora bild som en chattapp visar när någon klistrar in en länk är en delningsbild, som anges med helt annan kod, och ingen webbläsare använder den i en flik. ## Varför det spelar roll Valet gäller hur många ikonfiler som ska levereras, ur vilken källa och vem som håller dem i takt med varandra. Det ser ut som en designdetalj. I praktiken är det en liten bit infrastruktur som berör varje plattform där webbplatsen syns. Igenkänningen är den del som en köpare ser först. Vid sexton CSS-pixlar i en rad med tjugo flikar är faviconen den enda delen av varumärket som läsaren tittar på medan hen arbetar någon annanstans, och en allmän sidsymbol på den platsen ser ut som en webbplats som ingen gjorde klar. Samma ikon märker bokmärket, posten i historiken och, hos flera sökmotorer, själva sökträffen. Kostnad och korrekthet är den del som en utvecklare ser. Varje yta har sin egen konvention: en ICO eller PNG för fliken, en PNG på 180 pixlar för hemskärmen hos Apple, en uppsättning kvadratiska PNG-filer i manifestet för installationer, och en mörk flikrad där ett mörkt märke försvinner. Den snabba vägen är en favicongenerator som skriver trettio filer och ett kodblock att klistra in. Det fungerar, men inklistrad kod bär med sig inklistrade påståenden, och ett värde i `sizes` som beskriver någon annans filer är fel från första dagen. Cachningen är den del som ingen planerar för. Webbläsare behåller ikoner mycket längre än sidor, och standarden säger uttryckligen att de inte är skyldiga att uppdatera en ikon när listan över angivna ikoner ändras. Ett nytt varumärke når därför återkommande besökare enligt webbläsarens schema snarare än webbplatsens. Gissningen i roten har också ett eget pris: varje första besök frågar efter `/favicon.ico`, så en webbplats som saknar filen skriver en 404 i sina loggar för varje ny läsare, och en webbplats bakom en inloggning kan svara på gissningen med en fråga om lösenord. Vilket format ska det då vara? En SVG är en enda liten fil som skalar till varje storlek och kan byta färger med `prefers-color-scheme`. En detaljerad teckning klarar sig däremot bättre som raster, med ICO-filen kvar för program som inte läser något annat. De flesta webbplatser behöver både en favicon och en apple-touch-ikon, eftersom varje plattform bara läser sin egen. ## Så ser det ut i praktiken Den här webbplatsens ikoner kommer från teckningar, inte från en generator. [Den visuella identiteten byggdes ur två handgjorda teckningar](/sv/portfolio/built-the-visual-identity-from-two-drawings-164/), och skript framställer allt som härleds ur dem: favicon-uppsättningen i de storlekar som krävs, touch-ikonerna och startbilderna i varje enhetsstorlek. Genereringen är en task som vem som helst kan köra. En kontroll av föråldrade filer jämför commitdatumet för varje härledd fil med källans och fallerar när en härledd fil har committats först, och härledda filer redigeras aldrig för hand. Sidan anger priset: ett hårt beroende av verktygskedjan för genereringen. [Kolofonen](/sv/credits/) namnger verktygen bakom den kedjan: Python, som styr ImageMagick och genererar ikonuppsättningen ur en teckning av märket. Webbplatsens egna mallar visar de val som följde. Varje sida anger en PNG på 180 pixlar och en ICO med tre ramar på 16, 32 och 48 pixlar. Märket i fliken var tidigare ett kraftigt kugghjul, enligt teorin att en enkel siluett klarar sexton pixlar bättre än en detaljerad teckning. Renderade sida vid sida över en ljus och en mörk flikrad höll den detaljerade teckningen men inte kugghjulet, så fliken visar nu en rasterrendering av den teckning av en hjärna som är företagets märke. Manifestet listar samma två filer i roten, och dess ikonuppsättning läses från disken ur de mappar som generatorn skriver, med varje storlek tagen ur filnamnet, så en ny storlek dyker upp i listan utan att någon skriver in den. ## Var det går fel **Den gamla ikonen överlever ett nytt varumärke.** Webbplatsen levererar en ny fil under samma namn, och återkommande besökare ser det gamla märket i flera veckor, eftersom webbläsaren behåller sin egen kopia och inte är skyldig sidan någon uppdatering. Publicera den nya ikonen under ett nytt filnamn, uppdatera `link`-elementen och behandla `/favicon.ico` i roten som en reserv som ändras sist. **De angivna storlekarna beskriver en annan fil.** Kod som har kopierats från ett exempel listar storlekar som filen aldrig har innehållit, och webbläsaren väljer en kandidat på falska grunder och skalar fel ram. Den här webbplatsens manifest påstod en gång att dess ICO hade sju ramar när generatorn skrev tre, och listade en SVG med tre pixelstorlekar, något som en vektorfil inte har. Skriv `sizes` utifrån själva filen, eller härled värdet ur det som generatorn har skrivit. **En gissad sökväg ger något annat än en ikon.** iOS frågar efter `/apple-touch-icon.png` i roten av en webbplats när en sida inte anger någon ikon för Apple, och webbläsare gör samma sak med `/favicon.ico`. På en server där okända sökvägar faller igenom till en annan applikation får gissningen en omdirigering, en inloggningssida eller, på en av den här webbplatsens sidor som serveras från en andra värddator, en 401. Att ange ikonen uttryckligen gör gissningen till en begäran om en fil som finns. **Märket försvinner mot en mörk flikrad.** En svart logotyp på genomskinlig bakgrund försvinner när webbläsaren ritar sina flikar i mörkgrått. Rendera ikonen över både en ljus och en mörk flikrad innan du väljer den, och ge en SVG-favicon en regel för `prefers-color-scheme` eller rastret en egen bakgrund. **Detaljerna blir sörja vid sexton pixlar.** En hel logotyp med ordbild som skalas ned till en flikplats blir en fläck. Testa den verkliga storleken i en verklig flik i stället för designfilen förstorad till 800 %, och välj den del av märket som fortfarande går att läsa där. ## Läs mer - [HTML Standard: link type ”icon”](https://html.spec.whatwg.org/multipage/links.html#rel-icon) — hur en webbläsare väljer bland angivna ikoner, vad `sizes` betyder och när den på egen hand får hämta `/favicon.ico`. - [IANA: image/vnd.microsoft.icon](https://www.iana.org/assignments/media-types/image/vnd.microsoft.icon) — registreringen av mediatypen för ICO. - [Image Resource](https://www.w3.org/TR/image-resource/) — definitionen från W3C av en ikon med `src`, `sizes` och `type`, som webbappsmanifest återanvänder. - [Apple: Configuring Web Applications](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) — konventionen med `apple-touch-icon` och uppslagningen i roten som iOS faller tillbaka på.