Pengembang web dan pemilik situs web memperhatikan: Anda perlu menyetel ikon bookmark iOS yang siap retina. Ikon bookmark disebut Apple Touch Icon, dan gambar khusus ini menjadi ikon yang ditampilkan di layar utama pengguna saat mereka menandai situs web di iPad, iPhone, atau iPod touch di iOS, atau panel bookmark Safari untuk OS X.Tanpa kumpulan file ikon sentuh apel khusus, pengguna akan mendapatkan gambar mini yang membosankan dan seringkali jelek dari halaman web itu sendiri, dan tanpa menggunakan ikon siap retina, ikon bookmark akan terlihat berpiksel dan umumnya mengerikan di layar iPad baru.

Inilah yang perlu Anda lakukan untuk membuat Ikon Apple Touch retina yang sempurna untuk situs web apa pun dalam beberapa langkah mudah.

1) Membuat Ikon Situs Web iOS Siap Retina

Gunakan templat atau desain sendiri. Saya menggunakan kit ikon retina DIY mudah yang disebutkan di posting sebelumnya, ini adalah file PSD yang membuat desain ikon iOS yang terlihat bagus semudah satu atau dua klik. Tempel di situs web atau logo perusahaan dan Anda siap melakukannya. Jika Anda tidak memiliki sesuatu untuk mengedit file PSD, Photoshop CS6 beta sangat bagus dan gratis untuk diunduh dan digunakan hingga versi final keluar di akhir tahun.

2) Simpan sebagai PNG & Beri Nama Ikon Bookmark Situs Web Retina

Ikon harus berupa PNG, dan harus diberi nama salah satu dari dua hal. Setiap nama file menawarkan tampilan ikon yang sedikit berbeda seperti yang ditampilkan di layar beranda pengguna:

• “apple-touch-icon.png” akan menambahkan overlay gelembung sorotan ke ikon
• “apple-touch-icon-precomposed.png” akan menampilkan ikon seperti aslinya dibuat, tanpa hamparan sorotan

Use the last -precomposed option jika Anda membuat sorotan Anda sendiri, atau jika Anda ingin ikon tampil lebih datar tanpa gelembung di mana-mana yang muncul di sebagian besar ikon default Apple.

3) Unggah Ikon Sentuh Bookmark Situs Web ke Direktori Web Dasar

Gunakan klien SFTP (OS X menyertakan FTP di Finder, dan CyberDuck atau Filezilla gratis) untuk menyalin file apple-touch-icon.png ke direktori web root. Ini biasanya lokasi yang sama dengan lokasi file indeks utama situs. Setelah diunggah, pastikan itu berada di lokasi yang tepat dengan membuka browser web dan masuk ke “http://SITEURL.com/apple-touch-icon.png” dan pastikan itu dimuat.

Berikut adalah contoh ikon bookmark 512×512 retina-ready dari OSXDaily.com:

Perhatikan bahwa tanpa -precomposed bendera, ikon di atas akan menampilkan gelembung sorot. Anda dapat melihat perbedaan antara keduanya dengan membandingkan ikon yang sebenarnya dengan yang ditampilkan di tangkapan layar sebagai bookmark.

4) Gunakan Perangkat iOS dan Tandai Situs

Ini adalah bagian termudah, ambil perangkat iOS (sebaiknya iPad 3 untuk mengonfirmasi aspek retina) dan buka Safari.Segarkan situs web tempat Anda mengunggah ikon, lalu ketuk ikon panah dan pilih "Tambahkan ke Layar Utama" beri nama bookmark, lalu kembali ke Layar Utama untuk mengonfirmasi bahwa bookmark ada di sana.

Meskipun berukuran 512 x 512 piksel, ikon retina akan diperkecil dengan baik pada iPhone lama dan perangkat non-retina. Jika Anda benar-benar menginginkannya, Anda dapat menggunakan CSS dan HTML untuk menampilkan ikon dengan ukuran berbeda ke perangkat yang berbeda, tetapi sebenarnya tidak diperlukan.

Sekarang jika seseorang mem-bookmark situs web Anda di iPad dengan tampilan retina, itu akan terlihat jauh lebih baik di layar beranda mereka. Itu benar-benar semua yang ada untuk itu. Dan ya, kami telah menulis tentang ikon sentuh Apple sebelumnya, tetapi perlu disebutkan lagi sekarang karena iPad 3 menuntut ikon dan grafik dengan resolusi yang jauh lebih tinggi.