Mikä on favicon ja miten lisäät sen Squarespace-sivuille?
Oletko huomannut selaimen välilehdessä näkyvän pienen kuvakkeen verkkosivun nimen vieressä? Se on favicon, eli selaintunniste. Vaikka kyseessä on todella pieni yksityiskohta, sillä on yllättävän suuri merkitys verkkosivujesi viimeistellyn ilmeen kannalta.
Tässä blogipostauksessa käydään läpi, mikä favicon on, millainen favicon kannattaa tehdä ja miten lisäät oman faviconin Squarespace-sivuille. Homma on onneksi todella helppo.
Mikä on favicon?
Favicon (lyhenne sanoista favorite icon) on pieni kuvake, joka edustaa verkkosivustoasi selaimessa ja joissakin muissa yhteyksissä.
Yleisimmin favicon näkyy selaimen välilehdessä verkkosivun otsikon vieressä:
Favicon näkyy myös hakukonetulosten listauksissa verkkosivun nimen edessä:
Kaikilla Squarespace verkkosivuilla favicon on oletuksena Squarespacen musta neliö:
Favicon näyttäytyy hieman eri tavalla riippuen mikä selain ja mikä laite on käytössä. Esimerkiksi mobiililaitteissa favicon ei yleensä näy selaimessa, mutta hakutuloksien yhteydessä kuitenkin samalla tavalla kuin desktop näkymissäkin.
Miksi favicon kannattaa lisätä verkkosivuille?
Favicon on yksi niistä pienistä yksityiskohdista, joilla saat verkkosivuistasi viimeistellymmät ja paremmin brändisi näköiset.
Oma favicon kannattaa lisätä ainakin kolmesta syystä:
Brändisi jää paremmin mieleen. Kun faviconissa näkyy logosi, tunnuksesi tai brändiisi sopiva symboli, sivustosi on helpompi tunnistaa.
Sivustosi erottuu selaimen välilehdissä. Jos kävijällä on monta välilehteä auki, tunnistettava favicon auttaa löytämään sivustosi uudelleen.
Verkkosivusi näyttävät viimeistellymmiltä. Oma favicon on pieni mutta tärkeä osa yhtenäistä visuaalista ilmettä.
Ja mikä parasta, Squarespacessa faviconin lisääminen vie vain muutaman minuutin!
Millainen on hyvä favicon?
Faviconin ei tarvitse olla monimutkainen tai erityisen hieno. Tärkeintä on, että se on selkeä, tunnistettava ja sopii verkkosivujesi visuaaliseen ilmeeseen.
Koska favicon näkyy selaimessa todella pienessä koossa, yksinkertainen kuvake toimii yleensä paremmin kuin paljon yksityiskohtia sisältävä logo.
Jos yrityksesi logossa on pitkä teksti, koko logoa ei kannata yrittää mahduttaa faviconiin. Käytä mieluummin esimerkiksi logon symbolia, yrityksesi alkukirjainta tai muuta tunnistettavaa simppeliä graafista elementtiä.
Faviconin koko ja resoluutio
Faviconista kannattaa tehdä 200 × 200 pikselin kokoinen neliönmuotoinen kuva.
Vaikka favicon näkyy selaimen välilehdessä usein vain noin 16 × 16 pikselin kokoisena, kuvatiedosto kannattaa tehdä tätä suuremmaksi, jotta se pysyy mahdollisimman tarkkana eri käyttötarkoituksissa.
Faviconin tiedostomuoto
Suosittelen käyttämään PNG-tiedostoa.
PNG on hyvä valinta erityisesti siksi, että se tukee läpinäkyvää taustaa. Näin faviconin ympärille ei jää ylimääräistä valkoista laatikkoa, jos se ei kuulu kuvakkeen tyyliin.
Pidä myös tiedostokoko mahdollisimman pienenä laadun kärsimättä.
Vinkki: Testaa faviconia sekä vaalealla että tummalla taustalla. Selainten välilehtien taustavärit voivat vaihdella, joten kuvakkeen pitäisi erottua molemmissa.
Näin lisäät faviconin Squarespace-sivuille
Kun favicon-kuvasi on valmis, sen lisääminen Squarespaceen on helppoa.
Kirjaudu Squarespace-tilillesi ja avaa verkkosivustosi hallintapaneeli.
Avaa Settings (Asetukset).
Etsi asetuksista kohta Favicon.
Lataa oma favicon-kuvasi.
Tallenna muutokset.
Valmista! Nyt verkkosivuillasi pitäisi olla oma favicon Squarespacen oletuskuvakkeen sijaan.
Miksi favicon ei näy Squarespacessa?
Jos uusi favicon ei näy heti selaimen välilehdessä, ei hätää. Tämä on melko tavallista.
Selaimet tallentavat favicon-kuvakkeita välimuistiin, joten vanha kuvake saattaa näkyä vielä jonkin aikaa, vaikka uusi olisi lisätty oikein.
Kokeile näitä:
Päivitä verkkosivu selaimessa.
Avaa sivusto yksityisessä selausikkunassa.
Kokeile avata sivusto toisella selaimella.
Tarkista, että favicon on tallennettu Squarespacen asetuksiin.
Jos favicon näkyy selaimessa mutta Google näyttää edelleen vanhaa kuvaketta, kyse voi olla siitä, ettei Google ole vielä päivittänyt hakutuloksissa näkyvää faviconia. Päivittyminen voi kestää useita päiviä tai pidempäänkin.
Voiko faviconin vaihtaa myöhemmin?
Kyllä voi! Voit vaihtaa faviconin Squarespacessa milloin tahansa.
Jos esimerkiksi uudistat yrityksesi visuaalisen ilmeen tai vaihdat logoa, kannattaa samalla päivittää favicon vastaamaan uutta ilmettä.
Vaikuttaako favicon hakukoneoptimointiin?
Favicon ei itsessään ole tunnettu suora Googlen sijoitustekijä.
Se on kuitenkin osa sivustosi visuaalista tunnistettavuutta, ja Google voi näyttää faviconin hakutuloksissa. Selkeä ja tunnistettava kuvake voi auttaa käyttäjää huomaamaan ja tunnistamaan sivustosi muiden hakutulosten joukosta.
Pieni yksityiskohta, jolla viimeistelet Squarespace-sivusi
Faviconin lisääminen on yksi helpoimmista tavoista tehdä Squarespace-sivuistasi hieman viimeistellymmät ja enemmän oman brändisi näköiset.
Eikä faviconin tarvitse olla mikään graafisen suunnittelun mestariteos. Tärkeintä on, että se on tunnistettava ja sopii verkkosivujesi ilmeeseen.
Jos sivustollasi näkyy edelleen Squarespacen oletuskuvake, nyt on hyvä hetki vaihtaa se omaan!
Pieni muutos, mutta ehdottomasti tekemisen arvoinen.
Toinen vastaava pieni, mutta merkityksellinen asia verkkosivuilla on sivujen 404-sivu
Katso simppeli, mutta kattava ja idearikas ohjeistus 404-sivun tekemiseen Squarespacessa:
Mikä 404-sivu on – ja miksi sillä on väliä?
404-sivu on virhesivu, joka näkyy, kun kävijä yrittää avata sivustollasi osoitteen, jota ei ole olemassa. Tämä voi tapahtua esimerkiksi silloin, kun sivu on poistettu, URL-osoite on muuttunut tai linkki on kirjoitettu väärin.
Ilman omaa 404-sivua Squarespace näyttää geneerisen virheilmoituksen. Se ei ole brändätty, eikä ohjaa kävijää eteenpäin välttämättä sinne mikä on järkevää.
Hyvin tehty 404-sivu:
ohjaa kävijän takaisin oikeaan paikkaan
vahvistaa brändiäsi
tekee virhetilanteestakin sujuvan kokemuksen
Eli käytännössä: pieni sivu, iso vaikutus.
Miksi 404-tilanteita ylipäätään syntyy?
404-sivu tulee vastaan esimerkiksi silloin kun:
olet poistanut sivun tai muuttanut sen osoitetta
vanha linkki löytyy vielä Googlesta tai somesta
sivustollasi on rikkinäinen linkki
käyttäjä kirjoittaa osoitteen väärin
Näitä tilanteita ei voi täysin välttää – mutta niiden vaikutuksen voi hoitaa tyylikkäästi.
Käännä virhe kilpailueduksi
Kun rakennat oman 404-sivun, voit muuttaa “mitäs ihmettä” -hetken hyödylliseksi kokemukseksi. Voit ohjata kävijän esimerkiksi:
brändiisi sopivalla tavalla etusivulle
suosituimpiin palveluihin
yhteydenottoon
Ja samalla jättää hyvän fiiliksen.
Mitä tämä ohje sisältää?
Tässä ohjeessa opit:
miten luot ja määrität 404-sivun Squarespacessa (versio 7.1)
miten muotoilet siitä toiminnallisesti toimivan
millaiset tekstit oikeasti toimivat (valmiit mallipohjat mukana)
+ saat liudan esimerkkejä inspiraatioksi.
Tämän ohjeistuksen sisältö:
Video: 404-sivun luominen ja käyttöönotto – video (13 min)
Mallitekstit, ohjeet ja inspiraatio – kirjallinen materiaali
Ohjeet on suunniteltu Squarespace 7.1 -sivuston käyttäjille.
Lisää tämä setti sun ostoskoriin ja tee 404-sivusta osa vaikuttavaa verkkosivukokemusta.
Tämä on digitaalinen tuote, joka on käytettävissä heti oston jälkeen. Kun hyväksyt toimituksen aloitettavaksi heti, menetät samalla kuluttajansuojalain mukaisen 14 päivän peruuttamisoikeuden.
