Favicon: sivustosi väheksytty työmyyrä
Onko kiire? Siirry lataamaan paketti tästä.
Favicon on asia, jota harvoin jäädään pohtimaan – sehän on vain se pikkuruinen kuvake selaimen kulmassa. Miten monimutkaisesta asiasta voi olla kyse?
Melko monimutkaisesta, itse asiassa. Selaimen välilehti tai otsikkorivi eivät ole lähimainkaan ainoat kohteet, joissa faviconia hyödynnetään, ja mikä tympeintä, lähes kaikki näistä kohteista edellyttävät kuvakkeelta omaa, hyvin täsmällisesti määriteltyä kokoaan. Toisin sanoen: jos sivustoltasi puuttuu joku kokoversio, brändisi näyttäytyy osalle käyttäjistäsi puutteellisena, jopa rumana.
Missä kaikkialla faviconia sitten käytetään, ellei vain selaimen kulmauksessa?
- Selaimen kirjanmerkit- ja suosikit-luetteloissa (kuten “fav”, favorite, kuvakkeen nimessäkin kertoo)
- Selainhistoria-näkymässä
- Hakutuloksissa – jossa se onkin merkittävä etu kilpailijoistasi erottuessa
- Käyttäjien luomissa työpöytä- ja mobiilikuvakkeissa – ajattele tilannetta, jossa asiakkaasi on niin sitoutunut, että haluaa lisätä sivustosi aloitusnäytölleen, ja saakin siitä “palkinnoksi” suttuisen ja ruman, vääränkokoisesta faviconista skaalatun kuvakkeen.
- Selainpohjaisten sovellusten kuvakkeina
- Selainlisäosissa
- RSS-syötteissä
- Sosiaalisen median jaoissa – jälleen brändin kannalta erittäin tärkeä kohde
- Käyttäjän laite-ilmoituksissa (Push-notifikaatiot)
- Sivustojen hallintapaneeleissa
- Joidenkin sähköpostiohjelmien linkkitekstien oheen upotettuna
- Ja siellä tutuimmassa paikassa, selaimesta riippuen välilehdellä tai osoiterivin vieressä – tiedät varmasti tunteen, kun etsit netistä luotettavaa tietoa, ja muuten uskottavan tuntuisella sivustolla on tyhjä ruutu tai WordPressin vakiokuvake faviconin tilalla… onkohan tämä sittenkään ihan virallista tietoa?
SVG – hopealuoti?
Olet ehkä kuullut svg-muotoisesta faviconista – koosta riippumatta aina yhtä skarpilta näyttävästä vektorikuvakkeesta. Ja toden totta, teoriassa svg-formaatti ratkaisisi jotakuinkin kaikki faviconin versiopulmat kertaheitolla.
Valitettavasti yhä edelleen, vuonna 2024, svg-faviconin selaintuki on niin vaihteleva, ettei se (ainakaan toistaiseksi) ratkaise asiaa. Eli ei muuta kuin lusikka kauniiseen käteen ja kokoversioita laatimaan.
Faviconin koko (täsmällisemmin: faviconien koot)
Mitä kokoversioita faviconista sitten tarvitaan ja miksi? Tässä vuonna 2024 relevantit kokoversiot:
- 16×16 px ja 32×32 px: useimmat selaimet
- 48×48 px: Muun muassa Google-hakutulokset
- 167×167 px: Nykyaikaiset iPadit
- 180×180 px: Nykyaikaiset iPhonet
- 192×192 px: Android-sovelluskuvakkeet
- 512×512 px: Muun muassa mobiilisivuston “splash screen” ja WordPressin sivustokuvake
Vanhentuneiden selainten ja erikoisempien käyttökohteiden tuki pidentää tarvittavien kuvakekokojen listaa vielä entisestään, mutta tällä setillä varmistat jo erittäin kattavan selaintuen nykyaikaiselle sivustolle.
Aiemmin yleinen favicon.ico-tiedosto ei enää nykyisillä sivustoilla ole välttämätön, vaan png-tiedostot ja määrittelykoodi on aivan pätevä yhdistelmä, ellei sinulla ole tarve tukea kaikista vanhimpia selaimia.
Lataa favicon-template ja luo faviconisi kuin ammattilainen
Hirveä vaiva pikkuruisen kuvakkeen takia, saatat ajatella, ja olet siinä ihan oikeassa. Ja koska me Design Inspiksellä luomme verkkosivustoja työksemme, emme halua käyttää aikaamme (ja näin ollen asiakkaidemme rahaa) lukuisten eri favicon-versioiden tallenteluun.
Siksi laadimme omaan käyttöömme favicon-pohjan, jolla tallennamme kaikki tarvittavat favicon-versiot kertapainalluksella. Nyt tarjoamme sen sinunkin käyttöösi täysin maksutta – täytä vain allaoleva lomake ja lataa paketti itsellesi!
Templatepaketti sisältää favicon-pohjan Adobe Illustratoriin ja Photoshopiin – kumpaa sitten käytätkään tottuneemmin – sekä pikatoiminnot molempiin tarvittavien kokoversioiden tallentamista varten, valmiin faviconit määrittelevän html-koodinpätkän sivustollesi lisättäväksi ja helpon opastuksen.
Pohjissa on valmiina pienintä, 16×16 pikselin kokoista faviconia mukaileva apuruudukko, jota myötäilemällä kuvakkeesi näyttävät erityisen skarpeilta joka koossa.
Koodinpätkässä puolestaan on bonuksena rivi mobiiliselaimen taustavärin määrittelemiseksi – ominaisuuden selaintuki ei ole kattava, mutta niissä selaimissa, jotka ominaisuutta tukevat, brändivärisi mukaiseksi säädetty selainnäkymän taustaväri luo mukavan natiivisovellusmaisen tunnelman ja auttaa brändiäsi erottumaan edukseen.
Ei Adobe-ohjelmia tai aikaa? Ei hätää: tilaa favicon-suunnittelu ja asennus meiltä edullisesti!
Template on alunperin suunniteltu omaan, Adobe-ympäristöön rakennettuun työnkulkuumme sopivaksi, eikä siitä siksi ole tai ole tulossa muissa sovelluksissa käytettävää versiota.
Jos käytössäsi ei ole Adobe-ohjelmistoja, tai keskityt mielummin työsi kannalta olennaisempiin asioihin, ymmärrämme hyvin. Siksi tarjoamme favicon-muotoilun ja asennuksen sivustollesi erittäin edulliseen kiinteään hintaan 180 € + alv. – jos tämä vaihtoehto kiinnostaa, ota yhteyttä, niin viimeistelemme sivustosi ulkoasun tyylikkäällä faviconilla!
PS. Jos olet kuten minä, ja oletit ettei kattavaa, ajantasaista tietoa faviconeista kuitenkaan löydy suomeksi, vaan käytit esimerkiksi hakufraaseja favicon 2024, favicon template, favicon sizes 2024, favicon formats tai favicon dimensions – olet tullut oikeaan paikkaan.