{"id":484,"date":"2013-08-23T19:12:29","date_gmt":"2013-08-23T17:12:29","guid":{"rendered":"http:\/\/www.hongisto.info\/wp\/?p=484"},"modified":"2013-09-12T09:59:26","modified_gmt":"2013-09-12T07:59:26","slug":"apple-ikonit-ja-favicon","status":"publish","type":"post","link":"https:\/\/www.hongisto.info\/wp\/2013\/08\/apple-ikonit-ja-favicon\/","title":{"rendered":"Apple ikonit ja Favicon"},"content":{"rendered":"

Vaikka itse ikonit ei suoranaisesti liity hakukoneisiin ja sivujen l\u00f6ytymiseen, niin moni SEO ty\u00f6kalu ikonien puutteesta huomauttelee.
\nTutkin asiaa ja hakukoneet ei n\u00e4ihin tosiaankaan reagoi.<\/p>\n

Miksi sitten nettisivuille kannattaa laittaa niin Apple ikonit sek\u00e4 Favikoni.
\nIkoneiden k\u00e4ytt\u00f6\u00f6 liittyy enemm\u00e4nkin sivuston k\u00e4ytett\u00e4vyyteen jos henkil\u00f6 bookmarkkaa sivun vaikka puhelimeensa, tablettiin tai tietokonee selaimeen.
\nK\u00e4ytt\u00f6tarkoituksia on monia ja kuvakkeen voi luoda moneen eri paikkaan.
\nT\u00e4ll\u00f6in sivusto antaa paljon kuvaavamman ja yksil\u00f6llisen kuvakkeen k\u00e4ytt\u00e4jille joka edesauttaa sit\u00e4, ett\u00e4 henkil\u00f6t bookmarkkaa sivuja ja k\u00e4ytt\u00e4\u00e4 sit\u00e4 bookmarkattua kuvaketta vieraillaakseen sivustolla useammin.<\/p>\n

Kuinka sitten kuvakkeet luodaan?
\nT\u00e4ll\u00e4 hetkell\u00e4 Applella on k\u00e4yt\u00f6ss\u00e4 monia eri laitteita eri kuvasuhteilla sek\u00e4 n\u00e4ytt\u00f6koolla.
\nT\u00e4m\u00e4n vuoksi Apple ikoneitakin t\u00e4ytyy tehd\u00e4 useampia jotta ne toimivat Applen eri laitteissa hyvin.
\nKuvakokoja on kaikkiaan kirjoitushetkell\u00e4 viisi. Periaatteessa kuvakokoja on nelj\u00e4, mutta Applen Retina n\u00e4yt\u00f6lle on omat kuvakoot jonka vuoksi on luontevaa luoda kaikki 5 kuvaa.
\nKuvat tallennetaan png<\/strong> formaattiin.<\/p>\n

Voit yksinkertaisesti luoda kuvank\u00e4sittelyohjelmalla nelikulmaisen kuvan jossa mitat menee:<\/p>\n

– 57×57 (N\u00e4it\u00e4 kokoja tulee kaksi eri kuvatiedostoa)
\n– 72×72
\n– 114×114
\n– 144×144<\/p>\n

Nime\u00e4 kuvat seuraavasti:<\/p>\n

apple-touch-icon.png (T\u00e4ss\u00e4 tiedostossa k\u00e4ytet\u00e4\u00e4n 57×57 kuvaa)<\/strong>
\napple-touch-icon-57×57.png (muihin kuin Retina n\u00e4yt\u00f6ille)<\/strong>
\napple-touch-icon-72×72.png (Muihin kuin Retina n\u00e4yt\u00f6ille)<\/strong>
\napple-touch-icon-114×114.png (120×120 venytet\u00e4\u00e4n Retina n\u00e4yt\u00f6lle\/iOS 7, voidaan luoda omakin tiedosto)<\/strong>
\napple-touch-icon-144×144.png (Retinan\u00e4ytt\u00f6)<\/strong><\/p>\n

P\u00e4ivitys 12.9.2013!<\/span>
\nApplen julkaisema uusi iOS7 tuo pari uutta kokoa, joten ikoneita joutuu jatkossa tekem\u00e4\u00e4n nelj\u00e4 utta kuvaa.
\niOS7 uudet koot ovat:<\/p>\n

– 60×60
\n– 76×76
\n– 120×120
\n– 152×152<\/p>\n

Tiedostojen nime\u00e4misk\u00e4yt\u00e4nt\u00f6 on pysynyt samana jossa iOS7 kuvakkeet voi nimet\u00e4 n\u00e4in:<\/p>\n

apple-touch-icon-60×60.png<\/em>
\napple-touch-icon-76×76.png<\/em>
\napple-touch-icon-120×120.png<\/em>
\napple-touch-icon-152×152.png<\/em><\/p>\n

Lopuksi siirr\u00e4\u00e4 kuvat samaan kansioon, jossa sinulla on index tiedostokin.<\/p>\n

Applen laitteet osaavat sivuille ment\u00e4ess\u00e4 tutkia sivuston l\u00f6ytyyk\u00f6 sielt\u00e4 Appleikoneita. Jos l\u00f6ytyy,\u00a0niit\u00e4 my\u00f6s\u00a0k\u00e4ytet\u00e4\u00e4n.
\n(HUOM! Sivuston l\u00e4hdekoodiin ei tarvitse tehd\u00e4 mit\u00e4\u00e4n lis\u00e4yksi\u00e4)<\/span><\/p>\n

Jos v\u00e4ltt\u00e4m\u00e4tt\u00e4 haluat lis\u00e4t\u00e4 Apple ikoneihin viittaavia linkityksi\u00e4 sivuston l\u00e4hdekoodiin, niin se onnistuu allaolevalla koodilla:
\nT\u00e4m\u00e4 koodi liitet\u00e4\u00e4n <head> tagien v\u00e4liin.<\/p>\n

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

Koodeilla viitataan kuvakkeisiin ja niiden ominaisuuksiin.
\nLis\u00e4ksi viittaukset on pakollisia jos tiedostonjen nime\u00e4misess\u00e4 ei ole k\u00e4ytt\u00e4nyt yll\u00e4olevia esimerkkej\u00e4 tai kuvatiedostot sijaitsevat jossain muualla kuin juurikansiossa.<\/p>\n

Applella on kaksi erilaista kuvakemuotoa k\u00e4ytett\u00e4viss\u00e4, joten koodilla voi vaikuttaa siihen miten kuvake n\u00e4kyy:<\/p>\n

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

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

Vahvennettuna<\/strong> kohta siis eroavaisuus.<\/p>\n

Vaihtoehtoisesti -precomposed<\/strong> m\u00e4\u00e4rett\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 my\u00f6s kuvakkeen tiedostonimess\u00e4:<\/p>\n

apple-touch-icon-precomposed.png<\/p>\n

Suositeltavaa ensisijaisesti on k\u00e4ytt\u00e4\u00e4 Precomposed kuvakkeita koska se on Applen laitteissa aina ensisijainen.
\nJotta tuki olisi vanhoillekin laitteille jotka ei tue -precomposed m\u00e4\u00e4rett\u00e4, kannattaa tehd\u00e4 kuvakkeet my\u00f6s ilman -precomposed m\u00e4\u00e4rett\u00e4.<\/p>\n

Yll\u00e4olevissa html koodeissa on se ongelmana, ett\u00e4 sizes<\/span> m\u00e4\u00e4rite ei ole w3c standardin mukainen<\/span> ja t\u00e4m\u00e4n vuoksi suosittelen v\u00e4ltt\u00e4m\u00e4\u00e4n yll\u00e4olevan koodin lis\u00e4yst\u00e4. Muistutan ett\u00e4 ikonit toimivat Applen laitteilla ilman koodilis\u00e4yst\u00e4kin.
\nHakukoneoptimoinnissa on t\u00e4rke\u00e4\u00e4 ett\u00e4 sivusto on w3c standardin mukaiset.<\/span><\/p>\n

Apple ikonit ei kuitenkaan toimi kuin Applen laitteissa, joten viel\u00e4 on luotava favicon tiedosto.
\nUseimmat uusimmat selainversiot osaavat my\u00f6s l\u00f6yt\u00e4\u00e4 favicon tiedoston ilman koodilis\u00e4yksi\u00e4, mutta vanhat selaimet eiv\u00e4t.
\nT\u00e4m\u00e4n vuoksi on suositeltavaa lis\u00e4t\u00e4 <head> tagien v\u00e4liin favikoniin viittaava koodin p\u00e4tk\u00e4: (Favicon koodi on w3c standardien mukainen<\/span>)<\/p>\n

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

Luo\u00a0my\u00f6s favicon.ico tiedosto (Koko 48×48).
\nTallenna t\u00e4m\u00e4 tiedosto my\u00f6s samaan kansioon, jossa sinulla on index tiedostokin.<\/p>\n

Kuvien luomiseen saa k\u00e4ytetty\u00e4 helposti aikaa, joten yksinkertainen tapa on luoda vain yksi kuva esimerkiksi 144×144 koossa.
\nSeuraavaksi mene internetsivuille: http:\/\/iconifier.net\/<\/a>\u00a0jossa voi luoda ilmaiseksi\u00a0kaikki tarvittavat kuvakkeet tekem\u00e4st\u00e4si mallista.<\/p>\n

My\u00f6s Android on ryhtynyt tukemaan Apple ikoneita siten, ett\u00e4 4.2 versiosta eteenp\u00e4in Android k\u00e4ytt\u00e4\u00e4 my\u00f6s Apple ikoneita ilman ett\u00e4 se etsii sivuston l\u00e4hdekoodista viittauksia.
\nVanhemmilla Android versioilla sivuilta pit\u00e4\u00e4 l\u00f6yty\u00e4 koodi viittaukset Apple ikoneihin, jotta Android osaa niit\u00e4 k\u00e4ytt\u00e4\u00e4.<\/p>\n","protected":false},"excerpt":{"rendered":"

Vaikka itse ikonit ei suoranaisesti liity hakukoneisiin ja sivujen l\u00f6ytymiseen, niin moni SEO ty\u00f6kalu ikonien puutteesta huomauttelee. Tutkin asiaa ja hakukoneet ei n\u00e4ihin tosiaankaan reagoi. Miksi sitten nettisivuille kannattaa laittaa niin Apple ikonit sek\u00e4 Favikoni.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[29],"tags":[],"yst_prominent_words":[],"_links":{"self":[{"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/posts\/484"}],"collection":[{"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":4,"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/posts\/484\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/tags?post=484"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.hongisto.info\/wp\/wp-json\/wp\/v2\/yst_prominent_words?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}