Logotyp vetenskapsrådet
logo_mobile

Favicon för webbplatser

En favicon är en liten ikon som visas i webbläsarens flik och bokmärken för att identifiera en specifik webbplats.

En väl utformad favicon kan hjälpa till att förbättra webbplatsens igenkännlighet och hjälpa användare att enklare hitta tillbaka till sidan bland andra flikar eller bokmärken.

  • Webbplatsens använder organisationens ikon/symbol/logotyp
  • Det går att favoritmarkera webbsidan och rätt ikon används
  • Rätt ikon används när man skapa en genväg på hemskärmen i mobil
  • Faviconen ska vara visuellt lik webbplatsen och ha en design som passar bra med dess varumärke och grafiska profil.
  • Faviconen är inte samma eller lätt att förväxla med andra webbplater för vetenskapsrådet
  • Ikonen har transparent bakgrund
  • Webbplatsen har ett manifest som pekar ut de större ikonerna
  • Ikonerna är infogade via Kodtillägg
  • Alla sökvägar till ikoner och manifest fungerar
  • Det går att favoritmarkera webbsidan och rätt ikon används
  • Koden skapar inga valideringsproblem
  • Faviconen ska vara i ett format som fungerar bra på olika plattformar, till exempel .ico, .png eller .svg.
  • Faviconen ska vara av rätt storlek för att visas korrekt i webbläsare och andra enheter.
    • apple-touch-icon, 180x180 (minst)
    • icon, 32x32
    • icon, 16x16
    • icon, 192x192
    • icon, 512x512
  • Faviconen ska vara lätt att uppdatera och underhålla när webbplatsens design och varumärke förändras över tid

Ikoner

Här kan du ladda ner ikoner om din webbplats ska VR:s symbol.

favicon.ico

favicon-32x32.png

favicon-16x16.png

android-chrome-512x512.png

android-chrome-192x192.png

apple-touch-icon.png

favicon.1024.png

favicon.1024.bakgrund.png

Beskrivande manifestfil

För att ge webbplatsen ett enhetligt utseende och möjliggöra korrekt visning av ikoner och färger i olika webbläsare bör en manifest.json-fil inkluderas på webbplatsen. Manifest-filen beskriver vilka ikoner och färger som ska användas på webbplatsen och gör det möjligt för webbläsare att automatiskt välja rätt bild och färg för exempelvis bakgrundsfärg.



{
    "name": "Din webbplats namn",
    "short_name": "Kortnamn",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}


Exempel inlänkning. Sökvägen till ikonerna varierar berodende på webbserver.


<link rel="icon" type="image/png" sizes="16x16" href="/webdav/images/Ikoner/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/webdav/images/Ikoner/favicon-32x32.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/webdav/images/Ikoner/apple-touch-icon.png">
<link rel="manifest" href="/webdav/files/System/manifest.json">

Att tänka på

Eftersom en favicon är så liten är det viktigt att använda enkla former som är lätta att identifiera även i miniatyrstorlek. Runda former, kvadrater eller cirkulära emblem fungerar ofta bra. Ikonen ska även ha tillräcklig kontrast så att den är tydlig även i lågupplösta eller monokroma situationer.

Om din webbplats har en logo eller andra grafiska element som är kända för användarna, kan du använda dessa i faviconen för att göra den mer igenkännbar.

Testa på olika enheter och webbläsare

Faviconen bör fungera bra på olika enheter och webbläsare, så det är viktigt att testa den på olika plattformar för att se till att den ser bra ut överallt. Börja med att favoritmarkera webbsidan i webbläsaren. Testa sedan att skapa en länk på hemskärmen på din telefon.