Favicon
I fliken ovanför de flesta webbsidor kan, tillsammans med <title> oftast se en liten symbol, en ikon, som kännetecknar sidan. Det kan vara en företagslogotyp eller någonting annat som skall känneteckna sajten.
En favicon lägger du enkelt till genom att lägga till <link rel="icon" href="favicon.ico"> i <head> i ditt dokument, där favicon.ico är namnet på en bildfil i filformatet .ico, som placeras i rotkatalogen/rotmappen. I en webbläsare i datorn kommer faviconen visas i storleken 16*16 eller 32*32 px. Enkelt va? Bara att göra en liten bild i 32*32 pixlar som man lägger i webbsajtens rotkatalog.
Krångel
Visserligen fungerar det fortfarande bra att göra exakt som det står här ovanför, men idag kan det behövas fler storlekar och filformat för att ikonen ska fungera på olika typer av skärmar, med olika upplösning. På mobiltelefoner och paddor bör den dessutom kunna visas tillräckligt stort för att kunna klickas på.
Filformat
Från början var det enda filformatet som kunde användas till favicon .ico, Microsofts format för ikoner i Windows. Idag kan ett flertal olika format användas, men de som brukar rekommenderas är .png eller .svg. Du kan läsa om formaten här.
Som du kan se här på caniuse.com så stöder de flesta webläsare .png, men .svg fungerar till exempel inte i Safari.
Bildstorlekar
En ikon är kvadratisk, så att den ska ha lika många pixlar på båda ledderna är självklart. Från början var alla faviconet 16*16 px, med högre skärmupplösningar behövde detta kompletteras med 32*32 px. Idag rekommenderar Google att man skapar sina favicons i multiplar av 48 pixlar (48, 96, 144, 192) bland annat för att de ska kunna användas som petvänliga ikoner på mobiltelefoner.
Om du använder .svg spelar storleken naturligtvis ingen roll, eftersom .svg är vektorgrafik.
För säkerhets skull kan du lägga till flera olika <link>-taggar till olika filer, för olika användningsområden, du kan till exempel ange vilken fil som ska anvöndas för vilka visningsstorlekar. Med mera.
Mer läsning
Engelska Wikipedia har en bra artikel med exempel på hur man kan skriva.
Googles riktlinjer för favicon är begripliga och lätta att följa.
En underhållande artikel om läget på Faviconfronten 2023 och hans egen frustration över krångel (med kodexempel) har skrivits av utvecklaren Masa Kudamatsu på sajten Medium (han överdriver svårigheterna, men det gör å andra sidan texten roligare).