Har du nogensinde lagt mærke til de små ikoner øverst i browserfanerne? Hvad med når du gemmer en genvej til et websted eller en side online? Disse små billeder, eller favicons, er designet specielt til dette formål.

Der er en ret tydelig forskel på, hvad der gør et godt eller dårligt lille ikon til et godt eller dårligt lille ikon. Man kan godt tro, at designbeslutninger i den lille skala betyder mindre. Men et dårligt designet favicon kan afspejle dit brand dårligt.

I dag ser vi på, hvad disse ikoner er, grundlæggende designteknikker for dem og de specifikationer, du skal følge.

Hvad er et favicon?

Simpelt sagt er et favicon et lille, gennemsigtigt ikon, der bruges til at repræsentere et websted, et brand eller en virksomhed. Favicons er med til at forbedre brugeroplevelsen ved at give en ensartet markering, der fortæller de besøgende på webstedet, at de er på det samme websted, mens de navigerer takket være et ensartet visuelt udtryk.

Tegnet favicon kommer af “favorite icon” (yndlingsikon). Denne terminologi stammer fra Internet Explorer-dagene, hvor bogmærkede sider blev kaldt “favoritter”. Favicon blev først vedtaget af World Wide Web Consortium (W3C) for HTML 4.0 omkring 2000, og det begyndte at blive vist mere konsekvent i browservinduer det følgende år.

Brug favicons til hurtigt at bladre mellem browserfaner, identificere et bogmærke eller finde en gemt app eller genvej på din telefon. Den visuelle identifikator er det, som de fleste mennesker bruger til at forbinde disse links og sider med den rigtige knap for at få adgang til dem.

Traditionelt har favicons brugt et .ico-filformat, men det er et mindre problem nu. Enhver gennemsigtig filtype vil fungere i de fleste tilfælde; .png er ofte det foretrukne format.

Tekniske overvejelser

På et tidspunkt var alle favicons super små firkanter på 16 pixler. Det er ikke længere tilfældet med flere retina-skærme med høj opløsning og genvejsikoner at tage hensyn til.

HTML 5 indeholder standarder for favicons med flere størrelser til alle mulige anvendelser, fra små browserikoner til ikoner for computerdockingstationer til ikoner for hjemmeskærmen. Du har ikke engang rigtig brug for den 16-pixel firkant længere.

Moderne favicon-størrelser og -anvendelse:

• 32×32: Standard for de fleste desktop-browsere (erstatter 16×16)
• 128×128: Chrome-butik og lille Windows 8-stjerneskærmikon
• 152×152: iPad touch-ikon
• 167×167: iPad Retina touch-ikon
• 180×180: iPhone Retina-ikon
• 192×192: Google Developer-anbefaling af webapps
• 196×196: Android-ikonet for startskærmen

Bedste praksis

Selv om det ser ud som om et ikon, der er så måske er ubetydeligt i forhold til det overordnede design, er det langt fra sandt.

Et favicon siger en masse om dit brand og dit website. Brugerne er kommet til at forvente dem, hvis de ikke kan identificere dem ved navn. Disse små elementer bidrager til den overordnede brugeroplevelse og brand.

Så hvordan kan du få mest muligt ud af et favicon?

Hold disse bedste praksis i tankerne:

• Et favicon skal knytte sig til din brandidentitet, men er ofte for lille til at indeholde et helt logo. Brug et identificerbart element som f.eks. det første bogstav i dit brandnavn eller et lille mærke, som du bruger i forbindelse med brandet.
• Tænk på formen. Pladsen til et favicon er som standard firkantet. Hvis du ønsker noget andet, er det nødvendigt med en gennemsigtig baggrund. Nogle systemer kan også afrunde kanterne, så det er endnu en overvejelse, du skal have i tankerne.
• Sørg for, at filen er lille, men ikke for lille. Upload en favicon-størrelse, der vil blive gengivet korrekt på de fleste enheder, men som ikke vil forplumre det overordnede websted.
• Undgå ord eller komplekse elementer i favicon-designet.
• Hold dig til en enkel strømlinet farvepalet til faviconet. Det er for lille til at blive skør med farver. Derfor bruger de fleste af disse små ikoner ikke meget mere end en baggrunds- og forgrundsfarve med stor kontrast mellem de to.

Designteknikker

Da et favicon er lille, er du måske tilbøjelig til at designe det efter et indfald i Photoshop. Det er ikke den anbefalede vej for at opnå en lang levetid.

Oprettér dit favicon i et vektorværktøj som Illustrator eller Sketch, og eksporter derefter designet til de nødvendige størrelser. På den måde sikrer du, at du i takt med at skærmopløsningerne ændrer sig, har et favicon, der kan holde til tidens tand. (Du skal blot eksportere igen i en ny størrelse.)

Den vigtigste regel for visuelt design af favicons er, at designet skal være enkelt. Lad være med at gå over gevind med farver eller tekst eller mærkeelementer. Hvis du ser på eksemplerne i dette indlæg, vil du se, at næsten alle disse små elementer kan læses ved 16 x 16 pixel.

Undgå tricks som animation; de kommer kun i vejen her.

Se det som en designudfordring. Det kan være ret svært at skabe noget, der er så lille, at det er let at læse.

Spar filen som en gennemsigtig png. Det er en god vane, der sikrer, at du ikke ender med at få mærkelige kanter eller grænser på faviconet. (Intet ser værre ud end en takkede hvid kant omkring ikonet.)

Brug principperne for godt design. Du ved aldrig, hvornår faviconet kan blive brugt til noget i en større, mere synlig størrelse. Hvis du f.eks. gemmer et bogmærke på et websted, kan du bruge en stor version af et favicon. Det samme gælder for docking og endda i previews af søgemaskineresultater.

Selv om det er lille, repræsenterer dette ikon dit brand. Design det godt.

Når du har filen klar, kan du tilføje den til dit websted med blot et par linjer kode. (Mange WordPress-temaer og hjemmesidebyggere har allerede et favicon-element inkluderet, så du behøver ikke engang at tænke på dette trin.)

Når du har uploadet billedfilen, skal du indsætte følgende kode i overskriften på dit websted og bemærke, at “iconpath” og “iconname” henviser til dit specifikke filelement:

Eksempler

Eksemplerne nedenfor omfatter nogle brandelementer med tilhørende favicons. (Sørg for at klikke dig videre og vise designerne lidt kærlighed på deres Dribbble-sider.)

Prodigi.team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

Logo Favicon Display

Favicon-skabelon

TEC-logo-mulighed 2

Slutning

Hvad favicons mangler i størrelse, gør de op med hensyn til brugeroplevelse. Disse ikoner tjener som navigationsværktøjer for besøgende på dit websted og dem, der har tendens til at lade for mange browserfaner stå åbne.

Som en generel regel er et favicon en hurtig visuel identifikator, der forbinder brugeren med din digitale tilstedeværelse. Vær omhyggelig med det for at sikre, at det er den bedste og mest præcise repræsentation af dit brand.