Oletko koskaan kiinnittänyt huomiota niihin pieniin kuvakkeisiin selaimen välilehtien yläosissa? Entä kun tallennat pikakuvakkeen verkkosivustolle tai sivulle verkossa? Nuo pikkuruiset kuvat eli faviconit on suunniteltu erityisesti tätä tarkoitusta varten.

On aika selvä ero sen välillä, mikä on hyvä tai huono pikkuruinen kuvake. Voisi luulla, että suunnittelupäätöksillä on pienessä mittakaavassa vähemmän väliä. Huonosti suunniteltu favicon voi kuitenkin heijastua huonosti brändiisi.

Tänään tarkastelemme, mitä nämä kuvakkeet ovat, niiden perussuunnittelutekniikoita ja spesifikaatioita, joita sinun on noudatettava.

Mikä on Favicon?

Yksikertaisesti sanottuna favicon on pieni, läpinäkyvä kuvake, jota käytetään edustamaan verkkosivustoa, brändiä tai yritystä. Faviconit auttavat parantamaan käyttäjäkokemusta tarjoamalla johdonmukaisen merkin, joka kertoo verkkosivuston kävijöille, että he ovat samalla sivustolla navigoidessaan johdonmukaisen visuaalisen ilmeen ansiosta.

Termi favicon tulee sanoista ”suosikkikuvake”. Tämä terminologia juontaa juurensa Internet Explorerin ajoilta, jolloin kirjanmerkkejä sisältäviä sivuja kutsuttiin ”suosikeiksi”. World Wide Web Consortium (W3C) otti favicon-kuvakkeen ensimmäisen kerran käyttöön HTML 4.0:ssa noin vuonna 2000, ja se alkoi esiintyä johdonmukaisemmin selainikkunoissa seuraavana vuonna.

Käytä favicon-kuvakkeita selaimen välilehtien väliseen nopeaan siirtymiseen, kirjanmerkin tunnistamiseen tai tallennetun sovelluksen tai pikakuvakkeen etsimiseen puhelimessa. Visuaalisen tunnisteen avulla useimmat ihmiset yhdistävät nämä linkit ja sivut oikeaan painikkeeseen, jolla niihin pääsee käsiksi.

Traditionaalisesti suosikkikuvakkeet käyttivät .ico-tiedostomuotoa, mutta se on nykyään harvinaisempaa. Mikä tahansa läpinäkyvä tiedostotyyppi toimii useimmissa tapauksissa; .png on usein valittu tiedostomuoto.

Teknisiä näkökohtia

Aikanaan kaikki faviconit olivat superpieniä 16 pikselin neliöitä. Näin ei ole enää, kun on otettava huomioon yhä useammat teräväpiirtoiset retina-näytöt ja pikakuvakkeet.

HTML 5 sisältää standardit favikoneille, joissa on useita eri kokoja kaikenlaisiin käyttötarkoituksiin, pienistä selainkuvakkeista tietokoneen telakointiaseman kuvakkeisiin ja kotinäytön kuvakkeisiin. Tuota 16 pikselin ruutua ei enää oikeastaan edes tarvita.

Nykyaikaiset favicon-koot ja käyttö:

• 32×32: Standardi useimmille työpöytäselaimille (korvaa 16×16)
• 128×128: Chrome-kauppa ja pieni Windows 8:n tähtinäytön kuvake
• 152×152: iPad touch -kuvake
• 167×167: iPad Retina touch -kuvake
• 180×180: iPhone Retina -kuvake
• 192×192: Google Developer -verkkosovellussuositus
• 196×196: Androidin aloitusnäytön kuvake

Parhaat käytännöt

Vaikuttaa siltä, että kuvake, joka on niin saattaa olla merkityksetön kokonaissuunnittelun kannalta, mutta se ei suinkaan pidä paikkaansa.

Suosikkikuvake kertoo paljon brändistäsi ja verkkosivustostasi. Käyttäjät ovat tottuneet odottamaan niitä, jos he eivät voi tunnistaa niitä nimeltä. Nämä pienet elementit vaikuttavat osaltaan yleiseen käyttäjäkokemukseen ja brändiin.

Miten voit siis ottaa faviconista kaiken irti?

Pitäkää nämä parhaat käytännöt mielessä:

• Faviconin pitäisi liittyä brändi-identiteettiisi, mutta se on usein liian pieni, jotta se sisältäisi kokonaisen logon. Käytä tunnistettavaa elementtiä, kuten tuotemerkkisi nimen ensimmäistä kirjainta tai pientä merkkiä, jota käytät tuotemerkin yhteydessä.
• Ajattele muotoa. Faviconille varattu tila on oletusarvoisesti neliön muotoinen. Jos haluat jotain muuta, läpinäkyvä tausta on välttämätön. Jotkin järjestelmät voivat myös pyöristää reunoja, joten sekin on syytä ottaa huomioon.
• Varmista, että tiedosto on pieni, mutta ei liian pieni. Lataa favicon-koko, joka renderöityy kunnolla useimmilla laitteilla, mutta ei haittaa koko verkkosivustoa.
• Vältä sanoja tai monimutkaisia elementtejä favicon-suunnittelussa.
• Pidä kiinni yksinkertaisesta virtaviivaisesta väripaletista faviconissa. Se on liian pieni hullutellaksesi värien kanssa. Siksi useimmissa näissä pienissä kuvakkeissa käytetäänkin vain taustaväriä ja etualaväriä, joiden välillä on paljon kontrastia.

Suunnittelutekniikat

Koska favicon on pieni, saatat olla taipuvainen suunnittelemaan sen hetken mielijohteesta Photoshopissa. Se ei ole suositeltava reitti pitkäikäisyyden kannalta.

Rakenna favicon vektorityökalulla, kuten Illustratorilla tai Sketchillä, ja vie muotoilu sitten tarvittaviin kokoihin. Näin varmistat, että näytön resoluutioiden muuttuessa sinulla on favicon, joka kestää aikaa. (Sinun tarvitsee vain viedä se uudelleen uudessa koossa.)

Visuaalisen suunnittelun ykkössääntö faviconissa on pitää muotoilu yksinkertaisena. Älä liioittele värien, tekstin tai brändielementtien kanssa. Kun katsot tämän postauksen esimerkkejä, huomaat, että lähes kaikki nämä pikkuruiset elementit ovat luettavissa 16 x 16 pikselin koossa.

Vältä animaation kaltaisia temppuja; ne ovat tässä vain tiellä.

Katso sitä suunnitteluhaasteena. Voi olla aika vaikeaa luoda jotain niin pientä, että sitä on helppo lukea.

Tallenna tiedosto läpinäkyvänä png-tiedostona. Se on hyvä tapa, jolla varmistat, ettei faviconiin päädy outoja reunoja tai rajoja. (Mikään ei näytä pahemmalta kuin kuvaketta ympäröivä rosoinen valkoinen reuna.)

Käytä hyvän suunnittelun periaatteita. Koskaan ei voi tietää, milloin favicon-kuvaketta saatetaan käyttää johonkin isompaan, näkyvämpään kokoon. Esimerkiksi verkkosivuston kirjanmerkin tallentaminen voi käyttää faviconista isoa versiota. Sama pätee telakointiin ja jopa hakukoneiden hakutulosten esikatselussa.

Kaikkakin tämä kuvake on pieni, se edustaa brändiäsi. Suunnittele se hyvin.

Kun tiedosto on valmis, voit lisätä sen verkkosivuillesi vain parilla rivillä koodia. (Monissa WordPress-teemoissa ja verkkosivuston rakentajissa on favicon-elementti jo mukana, joten sinun ei tarvitse edes miettiä tätä vaihetta.)

Kuvatiedoston lataamisen jälkeen lisää seuraava koodi verkkosivustosi otsikkoon huomioiden, että ”iconpath” ja ”iconname” viittaavat tiettyyn tiedostoelementtiisi:

Esimerkkejä

Alla olevissa esimerkeissä on mukana joitain tuotemerkkielementtejä, joissa on niihin liittyvät faviconit. (Muista klikata läpi ja näyttää suunnittelijoille rakkautta heidän Dribbble-sivuillaan.)

Prodigi.team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

Favicon malli

TEC-logon vaihtoehto 2

Yhteenveto

Mitä faviconeista puuttuu koossa, ne korvaavat sen käyttäjäkokemuksella. Nämä kuvakkeet toimivat navigointivälineinä sivustosi kävijöille ja niille, joilla on taipumus jättää liian monta selaimen välilehteä auki.

Yleissääntönä favicon on nopea visuaalinen tunniste, joka yhdistää käyttäjän digitaaliseen läsnäoloosi. Ole huolellinen sen kanssa varmistaaksesi, että se on paras ja tarkin edustus brändistäsi.