Favicon-eksempler, beste fremgangsmåter og teknikker

Har du noen gang lagt merke til de bittesmå ikonene øverst på nettleserfanene? Hva med å lagre en snarvei til et nettsted eller en side på nettet? Disse bittesmå bildene, eller favorittene, er designet spesielt for det formålet.

Det er en ganske tydelig forskjell mellom hva som gir et godt eller dårlig bittesmå ikon. Du vil bli tilgitt for å tro at designvedtak i liten skala betyr mindre. Men et dårlig designet favicon kan reflektere dårlig på merkevaren din.

I dag ser vi på hva disse ikonene er, grunnleggende designteknikker for dem, og spesifikasjonene du trenger å følge.

Utforsk Envato Elements

Hva er en favoritt?

Bare en favoritt er et lite, gjennomsiktig ikon som brukes til å representere et nettsted, merke eller bedrift. Favicons hjelper deg med å forbedre brukeropplevelsen ved å tilby en konsistent markør som forteller besøkende på nettstedet at de er på samme nettsted som de navigerer takket være en jevn visuell.

Begrepet favicon kommer fra "favorittikonet." Denne terminologien stammer fra Internet Explorer-dager da bokmerke-sider ble kalt "Favoritter." Favoritten ble først adoptert av World Wide Web Consortium (W3C) for HTML 4.0, cirka 2000, og det begynte å vises mer konsekvent i nettleservinduer året etter.

Bruk favoritter til å bla raskt mellom nettleserfanene, identifisere et bokmerke eller finne en lagret app eller snarvei på telefonen. Den visuelle identifikatoren er det folk flest bruker for å knytte disse koblingene og sidene til høyre knapp for å få tilgang til dem.

Tradisjonelt brukte favicons et .ico-filformat, men det er mindre et problem nå. Enhver gjennomsiktig filtype vil fungere i de fleste tilfeller; .png er ofte det valgte formatet.

Tekniske hensyn

På en gang var alle favoritter super små 16-piksler. Det er ikke tilfelle lenger med mer HD-skjermbilder og snarveiikoner å vurdere.

HTML 5 inneholder standarder for favoritter med flere størrelser for alle slags bruksområder, fra bittesmå nettleserikoner til datamaskinens dokkingstasjonsikoner til startskjermikoner. Du trenger ikke engang egentlig det 16-piksler kvadratet lenger.

Moderne favicon størrelser og bruk:

• 32 × 32: Standard for de fleste stasjonære nettlesere (erstatter 16 × 16)
• 128 × 128: Chrome-butikk og lite Windows 8-stjerners skjermikon
• 152 × 152: iPad touch-ikon
• 167 × 167: iPad Retina touch-ikon
• 180 × 180: iPhone Retina-ikon
• 192 × 192: Google Developer's webapp-anbefaling
• 196 × 196: Android-skjermikon for Android

Beste praksis

Selv om det virker som et ikon som kan være ubetydelig med tanke på det generelle designet, er det langt fra sant.

En favoritt sier mye om merkevaren og nettstedet ditt. Brukere har forventet dem hvis de ikke kan identifisere dem med navn. Disse små elementene bidrar til den generelle brukeropplevelsen og merkevaren.

Så hvordan kan du få mest mulig ut av et favicon?

Husk disse beste praksisene:

• Et favorittnummer skal koble til merkevareidentiteten din, men er ofte for liten til å inkludere en hel logo. Bruk et identifiserbart element som den første bokstaven i merkenavnet ditt eller et lite merke som du bruker i forbindelse med merkevaren.
• Tenk på form. Plassen for et favicon er som standard firkantet. Hvis du vil ha noe annet, er en transparent bakgrunn nødvendig. Noen systemer kan også runde kantene, noe som gjør det en annen vurdering å huske på.
• Forsikre deg om at filen er liten, men ikke for liten. Last opp en favorittstørrelse som vil gjengis ordentlig på de fleste enheter, men ikke ødelegge det samlede nettstedet.
• Unngå ord eller komplekse elementer i favicon-designen.
• Hold deg til en enkel strømlinjeformet fargepalett for favoritten. Den er for liten til å bli gal av farger. Det er grunnen til at de fleste av disse bittesmå ikonene bruker lite mer enn en bakgrunns- og forgrunnsfarge med mye kontrast mellom de to.

Designteknikker

Siden et favorittabonnement er lite, kan du være tilbøyelig til å designe det på et innfall i Photoshop. Det er ikke den anbefalte ruten for lang levetid.

Den viktigste visuelle designregelen for favicons er å holde designen enkel. Ikke gå over bord med farger eller tekst eller merkeelementer.

Bygg favikonet ditt i et vektorverktøy som Illustrator eller Sketch, og eksporter deretter designet til de nødvendige størrelsene. Dette vil sikre at når skjermoppløsningene endres, vil du ha en favoritt som er testen av tid. (Alt du trenger å gjøre er å eksportere på nytt i en ny størrelse.)

Den viktigste visuelle designregelen for favicons er å holde designen enkel. Ikke gå over bord med farger eller tekst eller merkeelementer. Når du ser på eksemplene i dette innlegget, vil du se at nesten alle disse bittesmå elementene er lesbare med 16 x 16 piksler.

Unngå triks som animasjon; de kommer bare i veien her.

Betrakt det som en designutfordring. Det kan være ganske tøft å lage noe så lite at det er lett å lese.

Lagre filen som en gjennomsiktig png. Det er en god vane som sikrer at du ikke ender med rare kanter eller kanter på favikonet. (Ingenting ser verre ut enn en skvis hvit kant som omgir ikonet.)

Bruk prinsippene for god design. Du vet aldri når favikonet kan brukes til noe i en større og mer synlig størrelse. Lagring av et nettstedmerkemerke, for eksempel, kan bruke en stor versjon av et favicon. Det samme gjelder for dokking og til og med i forhåndsvisning av søkemotorresultater.

Selv om det er lite, representerer dette ikonet ditt merke. Design det godt.

Når du har filen klar, kan du legge den til på nettstedet ditt med bare et par kodelinjer. (Mange WordPress-temaer og nettstedbyggere har allerede et favorittelement inkludert, så du trenger ikke en gang å tenke på dette trinnet.)

Etter å ha lastet opp bildefilen, sett inn følgende kode i overskriften på nettstedet ditt, og merk at "iconpath" og "iconname" refererer til det spesifikke filelementet:

• HTML indeksfil:
• WordPress:

eksempler

Eksemplene nedenfor inkluderer noen merkeelementer med tilhørende favoritter. (Sørg for å klikke gjennom og vise designerne litt kjærlighet på Dribbble-sidene deres.)

Prodigi.team Responsive Logotype

Butterscotch foreslått logo system

Logo Favicon Display

Favicon-mal

TEC Logo Alternativ 2

Konklusjon

Hva favicons mangler i størrelse, utgjør de i brukeropplevelsen. Disse ikonene fungerer som navigasjonsverktøy for besøkende på nettstedet ditt, og de som pleier å forlate for mange nettleserfaner.

Som en generell regel er en favoritt en rask visuell identifikator som kobler brukeren til din digitale tilstedeværelse. Ta vare på det for å sikre at det er den beste og mer nøyaktige representasjonen av merkevaren din.