Har du någonsin uppmärksammat de små ikonerna högst upp i webbläsarens flikar? Vad sägs om när du sparar en genväg till en webbplats eller sida på nätet? Dessa små bilder, eller favicons, är utformade speciellt för det ändamålet.

Det finns en ganska tydlig skillnad mellan vad som utgör en bra eller dålig liten ikon. Man skulle vara förlåten om man trodde att designbeslut i den lilla skalan spelar mindre roll. Men en dåligt utformad favicon kan ge en dålig bild av ditt varumärke.

I dag tittar vi på vad dessa ikoner är, grundläggande designtekniker för dem och de specifikationer du behöver följa.

Vad är en favicon?

En favicon är helt enkelt en liten, transparent ikon som används för att representera en webbplats, ett varumärke eller ett företag. Favicons bidrar till att förbättra användarupplevelsen genom att tillhandahålla en konsekvent markering som talar om för webbplatsbesökare att de befinner sig på samma webbplats när de navigerar tack vare ett konsekvent visuellt uttryck.

Tecknet favicon kommer från ”favorite icon” (favoritsymbol). Terminologin härstammar från Internet Explorers tid då bokmärkta sidor kallades ”favoriter”. Favicon antogs först av World Wide Web Consortium (W3C) för HTML 4.0, omkring år 2000, och började dyka upp mer konsekvent i webbläsarfönster året därpå.

Använd favicons för att snabbt bläddra mellan webbläsarflikar, identifiera ett bokmärke eller hitta en sparad app eller genväg på din telefon. Den visuella identifieraren är vad de flesta människor använder för att associera dessa länkar och sidor med rätt knapp för att komma åt dem.

Traditionellt sett använde favicons ett .ico-filformat, men det är ett mindre problem nu. Alla transparenta filtyper fungerar i de flesta fall; .png är ofta det vanligaste formatet.

Tekniska överväganden

En gång i tiden var alla favicons superlilla fyrkanter med 16 pixlar. Det är inte längre fallet med fler högupplösta retinaskärmar och genvägsikoner att ta hänsyn till.

HTML 5 innehåller standarder för favicons med flera olika storlekar för alla typer av användningsområden, från små webbläsarikoner till datorer med dockningsstation och hemskärmsikoner. Du behöver egentligen inte ens den där fyrkanten på 16 pixlar längre.

Moderna faviconstorlekar och användning:

• 32×32: Standard för de flesta stationära webbläsare (ersätter 16×16)
• 128×128: Chrome-butik och liten ikon för stjärnskärmen i Windows 8
• 152×152: iPad touch-ikon
• 167×167: iPad Retina touch-ikon
• 180×180: iPhone Retina-ikon
• 192×192: Rekommendation av webbapplikationer för Google Developer
• 196×196: Android-ikonen för hemskärmen

Bästa metoder

Som det verkar som om en ikon som är så liten kan vara obetydlig när det gäller den övergripande designen, är det långt ifrån sant.

En favicon säger en hel del om ditt varumärke och din webbplats. Användarna har kommit att förvänta sig dem om de inte kan identifiera dem med namn. Dessa små element bidrar till den övergripande användarupplevelsen och varumärket.

Hur kan du då få ut det mesta av en favicon?

Håll de här bästa metoderna i åtanke:

• En favicon bör kopplas till din varumärkesidentitet, men är ofta för liten för att innehålla en hel logotyp. Använd ett identifierbart element som första bokstaven i ditt varumärkesnamn eller ett litet märke som du använder i samband med varumärket.
• Tänk på formen. Utrymmet för en favicon är som standard kvadratiskt. Om du vill ha något annat är en transparent bakgrund nödvändig. Vissa system kan också avrunda kanterna, vilket gör att det är ytterligare ett övervägande att ha i åtanke.
• Se till att filen är liten, men inte för liten. Ladda upp en favicon-storlek som kan återges korrekt på de flesta enheter, men som inte fördärvar hela webbplatsen.
• Undvik ord eller komplexa element i favicon-designen.
• Håll dig till en enkel, strömlinjeformad färgpalett för faviconet. Den är för liten för att man ska kunna bli galen i färgerna. Därför använder de flesta av dessa små ikoner inte mycket mer än en bakgrunds- och förgrundsfärg med mycket kontrast mellan de två.

Designtekniker

Då en favicon är liten kan du vara benägen att designa den på ett infall i Photoshop. Det är inte den rekommenderade vägen för lång livslängd.

Bygg din favicon i ett vektorverktyg som Illustrator eller Sketch och exportera sedan designen till de nödvändiga storlekarna. På så sätt kan du se till att du har en favicon som klarar sig bra när skärmupplösningarna ändras. (Allt du behöver göra är att exportera om i en ny storlek.)

Den viktigaste regeln för visuell design för favicons är att hålla designen enkel. Gå inte för långt med färg eller text eller varumärkeselement. Om du tittar på exemplen i det här inlägget ser du att nästan alla dessa små element är läsbara på 16 x 16 pixlar.

Undvik knep som animationer; de är bara i vägen här.

Se det som en designutmaning. Det kan vara ganska svårt att skapa något som är så litet att det är lätt att läsa.

Spara filen som en transparent png. Det är en bra vana som garanterar att du inte får konstiga kanter eller gränser på faviconet. (Ingenting ser värre ut än en ojämn vit kant som omger ikonen.)

Använd principerna för god design. Du vet aldrig när favicon kan användas för något i en större och mer synlig storlek. När man sparar ett bokmärke på en webbplats kan man till exempel använda en stor version av en favicon. Samma sak gäller för dockning och till och med i förhandsgranskningar av sökmotorresultat.

Även om den är liten representerar den här ikonen ditt varumärke. Utforma den väl.

När du har filen klar kan du lägga till den på din webbplats med bara några rader kod. (Många WordPress-teman och webbplatsbyggare har redan ett favicon-element inkluderat så du behöver inte ens tänka på det här steget.)

När du har laddat upp bildfilen infogar du följande kod i rubriken på din webbplats och noterar att ”iconpath” och ”iconname” hänvisar till ditt specifika filelement:

Exempel

Exemplen nedan innehåller några varumärkeselement med tillhörande favicons. (Se till att klicka dig vidare och visa designerna lite kärlek på deras Dribbble-sidor.)

Prodigi.team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

Mall för favicon

TEC-logotyp alternativ 2

Slutsats

Vad favicons saknar i storlek, tar de igen i användarupplevelse. Dessa ikoner fungerar som navigeringsverktyg för besökare på din webbplats och de som tenderar att lämna för många webbläsarflikar öppna.

Som allmän regel är en favicon en snabb visuell identifierare som länkar användaren till din digitala närvaro. Var försiktig med den för att se till att den är den bästa och mest exakta representationen av ditt varumärke.