Apple web-ikonit

Näin luot kotisivullesi web-ikonit Applen iPhonelle ja iPadille

Pientä vinkkiä pukkaa oman verkkosivuston ylläpitäjille. Väsäsin tässä itse muutama viikko sitten Photoshopilla sopivat kuvakkeet, jotka näkyvät Applen mobiililaitteiden käyttäjille. Kuvake näkyy muun muassa Safarin kirjanmerkkivalikossa sekä silloin, kun käyttäjä lisää blogini suoraan kotinäkymään. Kyseessä yksinkertainen kikka, jolla voi viimeistellä muuten valmista kokonaisuutta ja tuoda mukaan tiettyä ammattimaisuutta.

Koko operaatio on varsin yksinkertainen ja Applelta löytyy siihen ihan viralliset ohjeet, joiden pohjalta olen tämän artikkelin koonnut. Linkit löytyvät jutun lopusta.

web-ikonit-Apple

Ensimmäisenä tarvitaan kolme ikonia, jotka ovat kooltaan 76 x 76, 120 x 120 ja 152 x 152 pikseliä. Pienintä käytetään iPad 2:ssa ja ensimmäisen sukupolven iPad minissä. Keskikokoinen toimii iPhone 5-, 5c-, 5s- ja iPod Touch -laitteissa (Retina). Suurin ikoni tarvitaan Retina-näytöllä varustetuille iPadeille. Kuvakkeet tulee Applen ohjeiden mukaan tallentaa .png-muotoon, mutta niitä ei tarvitse niin sanotusti muotoilla valmiiksi esimerkiksi kulmista pyöristämällä. Applen ohjelmisto hoitaa tämän ja riittää, kun kuvat vain täyttävät kokonaan käytettävissä olevan tilan

Kuvakkeiden valmistuttua saadaan ne käyttöön lisäämällä seuraavat HTML-lauseet:

<link rel="apple-touch-icon" sizes="76x76" href="IKONIN OSOITE">

<link rel="apple-touch-icon" sizes="120x120" href="IKONIN OSOITE">

<link rel="apple-touch-icon" sizes="152x152" href="IKONIN OSOITE">

Yllä nähtävä koodi lisätään <head></head>-tagien väliin. Jos julkaisujärjestelmänä on WordPress, lisätään tarvittavat koodin pätkät header.php-tiedostoon.


Omilla ikoneilla voi helposti tuoda sivustolle lisää persoonallisuutta. Applen mobiililaitteet ovat nykyään niin suosittuja, että niiden tukeminen kannattaa. Kustomoituilla ikoneilla oma sivusto erottuu paremmin muun sisällön joukosta ja näyttää viimeistellymmältä työpöydällä. Itse en henkilökohtaisesti mielelläni lisää kotinäkymääni linkkejä, jos niillä ei ole omaa ikonia. Kyseessä on toki vain kosmeettinen tekijä, mutta haluan pitää työpöytäni tyylikkäänä.

Vastaa