Apple ikonit ja Favicon

Vaikka itse ikonit ei suoranaisesti liity hakukoneisiin ja sivujen löytymiseen, niin moni SEO työkalu ikonien puutteesta huomauttelee.
Tutkin asiaa ja hakukoneet ei näihin tosiaankaan reagoi.

Miksi sitten nettisivuille kannattaa laittaa niin Apple ikonit sekä Favikoni.
Ikoneiden käyttöö liittyy enemmänkin sivuston käytettävyyteen jos henkilö bookmarkkaa sivun vaikka puhelimeensa, tablettiin tai tietokonee selaimeen.
Käyttötarkoituksia on monia ja kuvakkeen voi luoda moneen eri paikkaan.
Tällöin sivusto antaa paljon kuvaavamman ja yksilöllisen kuvakkeen käyttäjille joka edesauttaa sitä, että henkilöt bookmarkkaa sivuja ja käyttää sitä bookmarkattua kuvaketta vieraillaakseen sivustolla useammin.

Kuinka sitten kuvakkeet luodaan?
Tällä hetkellä Applella on käytössä monia eri laitteita eri kuvasuhteilla sekä näyttökoolla.
Tämän vuoksi Apple ikoneitakin täytyy tehdä useampia jotta ne toimivat Applen eri laitteissa hyvin.
Kuvakokoja on kaikkiaan kirjoitushetkellä viisi. Periaatteessa kuvakokoja on neljä, mutta Applen Retina näytölle on omat kuvakoot jonka vuoksi on luontevaa luoda kaikki 5 kuvaa.
Kuvat tallennetaan png formaattiin.

Voit yksinkertaisesti luoda kuvankäsittelyohjelmalla nelikulmaisen kuvan jossa mitat menee:

– 57×57 (Näitä kokoja tulee kaksi eri kuvatiedostoa)
– 72×72
– 114×114
– 144×144

Nimeä kuvat seuraavasti:

apple-touch-icon.png (Tässä tiedostossa käytetään 57×57 kuvaa)
apple-touch-icon-57×57.png (muihin kuin Retina näytöille)
apple-touch-icon-72×72.png (Muihin kuin Retina näytöille)
apple-touch-icon-114×114.png (120×120 venytetään Retina näytölle/iOS 7, voidaan luoda omakin tiedosto)
apple-touch-icon-144×144.png (Retinanäyttö)

Päivitys 12.9.2013!
Applen julkaisema uusi iOS7 tuo pari uutta kokoa, joten ikoneita joutuu jatkossa tekemään neljä utta kuvaa.
iOS7 uudet koot ovat:

– 60×60
– 76×76
– 120×120
– 152×152

Tiedostojen nimeämiskäytäntö on pysynyt samana jossa iOS7 kuvakkeet voi nimetä näin:

apple-touch-icon-60×60.png
apple-touch-icon-76×76.png
apple-touch-icon-120×120.png
apple-touch-icon-152×152.png

Lopuksi siirrää kuvat samaan kansioon, jossa sinulla on index tiedostokin.

Applen laitteet osaavat sivuille mentäessä tutkia sivuston löytyykö sieltä Appleikoneita. Jos löytyy, niitä myös käytetään.
(HUOM! Sivuston lähdekoodiin ei tarvitse tehdä mitään lisäyksiä)

Jos välttämättä haluat lisätä Apple ikoneihin viittaavia linkityksiä sivuston lähdekoodiin, niin se onnistuu allaolevalla koodilla:
Tämä koodi liitetään <head> tagien väliin.

<link rel=”apple-touch-icon” href=”/apple-touch-icon.png” />
<link rel=”apple-touch-icon” sizes=”57×57″ href=”/apple-touch-icon-57×57.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”/apple-touch-icon-72×72.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”/apple-touch-icon-114×114.png” />
<link rel=”apple-touch-icon” sizes=”144×144″ href=”/apple-touch-icon-144×144.png” />

Koodeilla viitataan kuvakkeisiin ja niiden ominaisuuksiin.
Lisäksi viittaukset on pakollisia jos tiedostonjen nimeämisessä ei ole käyttänyt ylläolevia esimerkkejä tai kuvatiedostot sijaitsevat jossain muualla kuin juurikansiossa.

Applella on kaksi erilaista kuvakemuotoa käytettävissä, joten koodilla voi vaikuttaa siihen miten kuvake näkyy:

Standard kuvakkeen koodi olisi:
<link rel=”apple-touch-icon” href=”/apple-touch-icon.png” />

Precomposed kuvakkeen koodi olisi:
<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon.png” />

Vahvennettuna kohta siis eroavaisuus.

Vaihtoehtoisesti -precomposed määrettä voidaan käyttää myös kuvakkeen tiedostonimessä:

apple-touch-icon-precomposed.png

Suositeltavaa ensisijaisesti on käyttää Precomposed kuvakkeita koska se on Applen laitteissa aina ensisijainen.
Jotta tuki olisi vanhoillekin laitteille jotka ei tue -precomposed määrettä, kannattaa tehdä kuvakkeet myös ilman -precomposed määrettä.

Ylläolevissa html koodeissa on se ongelmana, että sizes määrite ei ole w3c standardin mukainen ja tämän vuoksi suosittelen välttämään ylläolevan koodin lisäystä. Muistutan että ikonit toimivat Applen laitteilla ilman koodilisäystäkin.
Hakukoneoptimoinnissa on tärkeää että sivusto on w3c standardin mukaiset.

Apple ikonit ei kuitenkaan toimi kuin Applen laitteissa, joten vielä on luotava favicon tiedosto.
Useimmat uusimmat selainversiot osaavat myös löytää favicon tiedoston ilman koodilisäyksiä, mutta vanhat selaimet eivät.
Tämän vuoksi on suositeltavaa lisätä <head> tagien väliin favikoniin viittaava koodin pätkä: (Favicon koodi on w3c standardien mukainen)

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

Luo myös favicon.ico tiedosto (Koko 48×48).
Tallenna tämä tiedosto myös samaan kansioon, jossa sinulla on index tiedostokin.

Kuvien luomiseen saa käytettyä helposti aikaa, joten yksinkertainen tapa on luoda vain yksi kuva esimerkiksi 144×144 koossa.
Seuraavaksi mene internetsivuille: http://iconifier.net/ jossa voi luoda ilmaiseksi kaikki tarvittavat kuvakkeet tekemästäsi mallista.

Myös Android on ryhtynyt tukemaan Apple ikoneita siten, että 4.2 versiosta eteenpäin Android käyttää myös Apple ikoneita ilman että se etsii sivuston lähdekoodista viittauksia.
Vanhemmilla Android versioilla sivuilta pitää löytyä koodi viittaukset Apple ikoneihin, jotta Android osaa niitä käyttää.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*