Taru Salokangas

View Original

Mikä on favicon ja miten lisäät sen Squarespacessa

Tässä blogipostauksessa näytän miten saat lisättyä faviconin Squarespace -sivuille. Jos et tiedä mikä se on, kannattaa lukea hieman pidemmälle, että homma selviää, nimittäin kyseessä on superpieni, mutta yllättävän merkityksellinen yksityiskohta verkkosivuilla.

Mikä favicon on?

Favicon (lyhenne sanoista favorite icon) eli selaintunniste on se pienen pieni merkki/kuva, joka näkyy selaimen välilehtien nurkassa:

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?

Tämän pienen asian tekemällä saat sivustosi erottumaan paremmin selaimissa ja annat sivuistasi ammattimaisemman kuvan.

Squarespacessa favicon vaihto omaksi on superhelppoa, joten se kannattaa ehdottomasti tehdä.

Faviconin jättämättä laittaminen monesti kielii siitä, että verkkosivut on tehnyt ihminen, jolle verkkosivujen tekeminen ei ole kovin tuttua.

Miten luot Favicon tiedoston?

Favicon on käytännössä kuvatiedosto. Faviconien tekeminen ja niiden soveltuvuus eri selaimille on ollut historian valossa aika työlästä hommaa etenkin Wordpress -sivustoilla - on pitänyt tehdä monia eri versioita eri selaimille jne. Nykyään monet selaimet voivat lukea kuvatiedostoja, joten aiemmin tarvittavan .ico-tiedoston sijasta riittää kuvatiedosto. Joten Squarespacessa faviconin lisääminen on yksinkertaista.

Favicon kuvan resoluutio

Favicon kannattaa tehdä 100px x 100px - 300px x 300px kokoon, vaikka todellisuudessa selaimissa se näkyy koossa 16px x 16px (standardi favicon koko). Squarespaceen voi lisätä vain yhden favicon version.

Faviconin kuvatiedostomuoto ja koko

Squarespace ei hyväksy perinteistä faviconin .ico muotoa, joten kuva pitää tehdä .png tai muodossa. Faviconin koko ei saisi ylittää 100kt.

Näin lisää faviconin Squarespace verkkosivulle:

  1. Kirjaudu Squarespace -tilillesi ja avaa sivusi.

  2. Valitse valikosta asetukset ‘Settings’

  3. Klikkaa kohtaa ‘Favicon’

  4. Lisää oma favicon kuvatiedostosi kohdasta ‘Add a favicon’ ja muista tallentaa se lopuksi painamalla ‘SAVE’.

Joskus favicon ei silti heti näy sivuston ikonina selaimessa, vaikka on se on lisätty tällä tavalla ihan oikein. Voi olla, että pitää odottaa muutama minuutti ja päivittää sivu muutaman kerran (että välimuisti tyhjenee) ennen kuin favicon alkaa näkyä.

Näin helppoa faviconin lisääminen Squarespace sivuilla on!

Pointtina ei ole se, että kuinka hieno favicon on, vaan se, että se on jotain muuta kuin Squarespacen oma favicon (joka on niin monella saitilla!) ja että se jollain tavalla on tunnistettava sinun brändisi/sivustosi visuaalisuuteen.

Eli nyt vaan lisäämään omille Squarespace sivuille Favicon!

Tallenna talteen Pinterestiin: