Verkkosuunnittelussa, kuten luultavasti tiedät, jokainen yksityiskohta on tärkeä. Resurssiisi siirtynyt henkilö ei näe jokaista elementtiä erikseen, vaan näkee koko kuvan pakettina, joka koostuu muista pienistä yksityiskohdista. Jos siis unohdat jotain resurssi kehittämisprosessissa, tämä yksityiskohta voi myöhemmin pilata koko kompleksin, koko koostumuksen.
Tällainen pikkujuttu voi olla esimerkiksi painikkeen tausta, jonkin pienen elementin väärin valittu fontti ja jopa favicon. Todellakin, katso itse - suurilla, tunnetuilla sivustoilla on yksittäinen kuvake, joka osoittaa sen käyttäjän selaimen Kirjanmerkit-osiossa. Ilman sitä resurssin kehittäjät eivät olisi voineet luoda sävellystä, johon he alun perin pyrkivät.
Siksi, kun luot suunnittelua sivustollesi, sinun tulee ottaa huomioon sellainen yksityiskohta kuin favicon. Tässä artikkelissa puhumme siitä, kuinka se sovitetaan resurssin yleiseen tyyliin sekä minkä kokoisia tämän kuvan tulisi olla.
Sivuston kuvake
Määritetään ensin, mikä tämä elementti on. Katso juuri nyt selaimesi välilehden otsikko. Kuten näet, sen vasemmalla puolella on pieni kuva, joka osoittaa resurssin logon yksinkertaistetun version. Sama kuva on myös hakutuloksissa näkyvän sivuston nimen vieressä. Tämä on se, mitä käyttäjä ohjaa nähdessään otsikon.
Monet verkkovastaavat ymmärtävät, että tällaista kuvaa tarvitaan – mutta harvat tietävät, mikä favicon-koko sivustolle on sopivin. Siksi tässä artikkelissa emme vain anna tietoja siitä, kuinka tällainen kuvake tehdään ja kuinka voit asentaa sen resurssiisi, vaan puhumme myös kuvakoosta.
Favikonin tarkoitus
Joten, sivuston otsikon lähellä olevaa kuvaa käytetään tunnistamiseen. Tämä on sen alkuperäinen tarkoitus: ilmaista sivusto, jonka nimen näemme, ja saada se erottumaan muiden silmissä. Tämä tehdään mahdollisimman yksinkertaisesti käyttämällä grafiikkaa: havaitsemme kuvissa olevan tiedon intuitiivisesti paljon nopeammin ja helpommin kuin tekstimuodossa. Faviconit auttavat meitä tekemään juuri sen. Mutta älä unohda, että faviconin koko on käyttäjän silmissä minimaalinen. Tämä ei ole logo sivuston "otsikossa", joka voi sisältää lisätietoa merkintöjen, selvennysten tai yhteystietojen muodossa. Kaiken, mitä voidaan näyttää nimen vieressä olevassa kuvakkeessa, tulee sopia faviconin kokoon mahdollisimman paljon. Ja hän, kuten jo todettiin, on yksinkertaisesti miniatyyri (vain 16 x 16 pikseliä).
Kuinka valitafavicon?
Kuinka verkkovastaava voi suunnitella kuvakkeen sivustolleen? On huomattava, että pelkkä sivuston logon pakkaaminen ei useimmiten toimi. Tietyn resurssin logon muodossa olevissa tunnuksissa näkyy usein erilaisia elementtejä, joita ei aina näytetä oikein pienoismuodossa. On parempi luopua välittömästi tällaisesta yrityksestä.
Faviconin koko ei tietenkään salli puhua pelkästä merkinnän lisäämisestä sinne. Kaikki tekstit ovat yksinkertaisesti näkymättömiä tässä resoluutiossa. Meidän on kehitettävä uusi kuvake, joka välittää sivuston tyylin. Ratkaisujen löytämiseksi käännytään jälleen suurimpiin sivustoihin.
Monet ihmiset käyttävät palvelun nimen tyyliteltyä ensimmäistä kirjainta faviconina. Näin ovat esimerkiksi Bing, Yahoo, Yandex, Wikipedia, Google. On myös toinen lähestymistapa - jos sinulla on lyhyt sivuston nimi, voit asettaa sen kuvakkeen taustaksi. Jotta faviconin koko (pikseleinä se saavuttaa, toistan, 16 x 16 pikseliä) näyttäisi tämän merkinnän oikein, sen tulee olla enintään 3 kirjainta. Näin tekee esimerkiksi Aol-palvelu.
Kuinka luodaan suosikkikuvake?
On olemassa useita tapoja luoda kuvake sivuston nimelle. Tietysti helpointa on työskennellä erilaisten valmiiden ratkaisujen kanssa. Voimme puhua joistakin palveluista tai ohjelmista, joiden avulla voit tehdä kuvakkeen täysimittaisesta kuvasta pienentämällä sitä. Suosittelen kuitenkin sellaisen logon kehittämistä itse. Tämä antaa ensinnäkinmahdollisuus oppia jotain; ja toiseksi se tarjoaa lisää työkaluja. Sinun tarvitsee vain tietää mitä piirtää, ja tietää myös minkä kokoisen faviconin tulee olla lopullisessa versiossa. Puhumme sivuston kuvakkeen koosta hieman myöhemmin, mutta toistaiseksi huomaamme joitain tällaisten kuvien kanssa työskentelyn hienouksia. Erityisesti tällaisen kuvan muotoa tulisi selventää mainitsematta sivuston faviconin kokoa. Kuten kokeneet suunnittelijat huomauttavat, kuva on tallennettava.png-muodossa (24-bittinen) tai. ICO-tiedostona.
Voit tallentaa kuvan esimerkiksi Photoshopilla, johon tunnus piirretään.
Faviconin mitat
Joten, puhutaan nyt siitä, kuinka iso kuva, jonka näemme sivuston nimen vieressä hakutuloksissa, pitäisi olla. Oletuksena, kuten jo mainittiin, sen koko on vain 16 pikseliä (kummallakin puolella). Jos kuitenkin yrität muokata tätä kuvaa Photoshopissa, näet itse, kuinka hankalaa se on. Siksi suosittelemme työskentelemään suurennetun kuvan kanssa, joka voidaan jatkossa yksinkertaisesti pakata reunoja pitkin ja tallentaa haluttuun muotoon.
Multiplatform
Puhuttaessa kuitenkin siitä, kuinka suuri faviconin tulisi olla sivustossasi, on vielä yksi asia, joka on pidettävä mielessä. Kaikki alustat eivät näytä resurssikuvaa samalla tavalla. Esimerkiksi laitteet, joissa on Retina-näyttö, "näkevät" suosikkikuvasi 32 x 32 pikselillä. Ja Safarissa ja uudella Windows-alustalla, ja ylipäätään, näiden kuvakkeiden koko on 64pikseliä.
Siksi suosittelemme, että tallennat kuvakkeen eri versioita ja annat sen muutoksen jatkossa käyttäjän alustan mukaan. Toinen mielenkiintoinen kohta - voit yrittää ladata kuvakkeen suurimmassa muodossa, luotaen siihen, että se "kutistuu" selaimesta riippuen.
Ulkopuoliset toimittajat
Tietenkin on hyvä, jos osaat käyttää Photoshopia ja tiedät, minkä kokoisen faviconin tulee olla ja miten se saavutetaan samalla kun tallennat kuvan. On kuitenkin paljon aloittelijoita, jotka eivät vain ole ennen törmänneet graafisiin muokkauksiin niin läheltä, joten he eivät pysty piirtämään haluttua kuvaa niin helposti. Tällaisten verkkovastaavien auttamiseksi on olemassa useita palveluita, joiden avulla voit luoda automaattisesti sinua kiinnostavan kuvakkeen. Monet niistä ovat jopa ilmaisia, mikä ei vaadi käyttäjältä investointeja.
Joskus sinun tarvitsee vain rekisteröityä töihin, mutta kuten ymmärrät, tämä tehdään kerran - loppujen lopuksi yritykset eivät vaihda suosikkikuvaansa niin usein. Katso Google, joka vaihtaa logoa joka päivä, mutta ei kosketa kuvaketta.
Miten favicon asennetaan?
Yleensä sivustosi määrittäminen siten, että se näyttää tarvitsemasi kuvan oikein, on hyvin yksinkertaista. Riittää, kun suoritat sarjan yksinkertaisia vaiheita, joiden avulla hakukoneet ja yksinkertaiset selaimet voivat lukea tiedot.
Tämän tekemiseksi tuloksena oleva kuva on tallennettava sovelluksellanimeltä favicon.ico ja sijoitetaan resurssi juureen. Siinä kaikki, nyt kuvasi tunnistetaan automaattisesti, ja jonkin ajan kuluttua se linkitetään sivustollesi.
Tämän sidoksen lisäksi voit lisätä vielä yhden rivin, joka "ehdottaa", missä kuvake sijaitsee. Se näyttää tältä:
Asenna koodi sivuston otsikkoon.
Johtopäätökset
Joten artikkelimme lukemisen jälkeen selvitit, minkä kokoisen faviconin tulisi olla sivustolle ja mikä se on. Uskon myös, että ymmärsit, että oikean kuvakkeen löytäminen resurssiisi on välttämätöntä, koska se vaikuttaa käsiisi sekä lisääntyvän tunnettuuden että kilpailijoiden joukossa ylimääräisen erottuvuuden vuoksi. Ainakin suurimmat sivustot tekevät samoin, mikä voidaan ottaa malliesimerkkinä. Ja lisäksi se ei aiheuta paljon vaivaa - kun olet tehnyt faviconin kerran ja asentanut sen oikein sivustollesi, voit unohtaa sen seuraaviksi kuukausiksi.
Kokeile siis vapaasti, keksi jotain uutta, kokeile - niin kaikki järjestyy!
