Bagi para pengembang web mungkin sudah familiar dengan yang namanya favicon. Favicon akan ditampilkan browser sebagai icon untuk pengenal ketika sebuah web di bookmark. Ternyata di product Apple seperti iPod, iPhone atau iPad ketika browsing menggunakan safari terdapat pilihan add to home screen. Pilihan ini akan membuat shortcut icon yang ditaruh di home screen supaya lebih mudah untuk akses ke web tersebut. Lalu, bagaimana dengan icon nya?
Kita tahu ukuran icon di iOS (OS buatan Apple untuk gadget iPod, iPhone, iPad) itu gede-gede dan tidak mungkin akan menjadikan favicon sebagai icon di iOS. Maka iOS akan mengcapture halaman web tersebut dan dijadikan icon di home screen. Tapi apabila ingin mengganti icon hasil capture halaman web tersebut dengan logo web supaya lebih keliatan kece, bisa dengan membuat icon dengan nama file “apple-touch-icon.png”. Eits, tapi ada aturannya, bisa baca disini atau ikuti langkah-langkah berikut:
1. Buat Apple Touch Icon
Siapkan logo web. Karena kita akan membuat 4 ukuran icon yang berbeda, untuk memudahkan membuatnya bisa download template berikut HTML5 Boilerplate Favicon PSD-Template. Dalam template tersebut sudah disediakan tempat untuk icon ukuran 144×144 px (untuk iPad 3), 114×114 px (untuk iPhone 4, iPod Touch 4), 72×72 px (untuk iPad 1-2), 57×57 px (untuk iPhone 3, iPod Touch 3 kebawah).
Setelah selesai me-resize keempat icon sesuai dengan masing-masing ukuran, kemudian kita save masing-masing logo tersebut dengan cara di crop satu-satu atau yang biasa slice bisa di slice dan save for web and device.
Format file .png dengan nama apple-touch-icon-57×57 atau apple-touch-icon-57×57-precomposed, angka 57 diganti sesuai ukuran dimensi logo. Nama icon tanpa -precomposed, iOS akan menambahkan effect glossy di icon tersebut, jika memakai -precomposed iOS tidak akan menambahkan effect apa-apa.
Sehingga kita akan punya file seperti ini:
Dari gambar ada file apple-touch-icon.png (tanpa angka dimensi) itu adalah file apple-touch-icon-57×57-precomposed.png yang saya copy dan di-rename untuk nanti memudahkan pemanggilan.
2. Upload icon di hosting
Semua icon diletakan dalam satu folder yang sama.
3. Link element icon di html
Pemanggilan apple touch icon dengan membuat link element di dalam tag <head>, seperti berikut:
<head> ... <link rel="apple-touch-icon" href="http://hiduptreda.com/apple-touch-icon.png" /> ... </head>
Kita bisa hanya membuat 1 link seperti code diatas atau membuat link spesifik untuk tiap device seperti berikut:
<head> ... <link rel="apple-touch-icon" href="http://hiduptreda.com/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="72x72" href="http://hiduptreda.com/apple-touch-icon-72x72-precomposed.png" /> <link rel="apple-touch-icon" sizes="114x114" href="http://hiduptreda.com/apple-touch-icon-114x114-precomposed.png" /> <link rel="apple-touch-icon" sizes="144x144" href="http://hiduptreda.com/apple-touch-icon-144x144-precomposed.png" /> ... </head>
Jika kita tidak menentukan link icon spesifik, iOS yang akan memilihkan icon yang cocok untuk device tersebut.
Misal memakai iPhone 4, maka kira-kira begini urutannya:
iOS akan mencari filename
1. apple-touch-icon-114×114-precomposed.png
2. apple-touch-icon-114×114.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png
Uji coba
Pada blog ini saya memakai link element contoh pertama yang cuma 1 link, karena lebih simple dan nggak bikin penuh code di tag <head>.
Hmmm.. kece ya??
thanks for info ya
cara yang mudah untuk dipraktekkan bermanfaat sekali. teimah kasih