Cara Membuat & Mengatur Ikon Bookmark iOS Retina-Ready untuk Situs Web
Pengembang web dan pemilik situs web menaruh perhatian: Anda perlu mengatur ikon bookmark iOS retina-ready. Ikon bookmark disebut Ikon Apple Touch, dan gambar khusus ini menjadi ikon yang ditampilkan di layar beranda pengguna saat mereka mem-bookmark situs web di iPad, iPhone, atau iPod touch di iOS, atau panel bookmark Safari untuk OS X. Tanpa satu set file apel-touch-icon kustom, pengguna akan mendapatkan thumbnail yang membosankan dan seringkali jelek dari halaman web itu sendiri, dan tanpa menggunakan ikon retina-ready, ikon bookmark akan terlihat pixelated dan umumnya mengerikan pada iPad baru. layar.
Inilah yang perlu Anda lakukan untuk membuat Retina Apple Touch Icon yang sempurna untuk situs web apa pun dalam beberapa langkah mudah.
1) Buat Ikon Situs iOS Retina-Ready
Gunakan template atau desain Anda sendiri. Saya menggunakan kit ikon retina DIY yang mudah disebutkan dalam posting sebelumnya, ini adalah file PSD yang membuat desain ikon iOS yang tampak bagus semudah klik atau dua. Tempelkan di situs web atau logo perusahaan dan Anda cukup baik untuk pergi. Jika Anda tidak memiliki sesuatu untuk mengedit file PSD, Photoshop CS6 beta sangat bagus dan gratis untuk diunduh dan digunakan sampai versi final keluar nanti di tahun itu.
2) Simpan sebagai PNG & Beri Nama Ikon Bookmark Situs 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 hamparan gelembung sorotan ke ikon
- " Apple-touch-icon-precomposed.png " akan menampilkan ikon sebagai awalnya dibuat, tanpa overlay sorotan
Gunakan opsi terakhir yang disarankan jika Anda membuat sorotan Anda sendiri, atau jika Anda ingin ikonnya tampak lebih datar tanpa gelembung yang ada di mana-mana yang muncul di sebagian besar ikon default Apple.
3) Unggah Ikon Sentuh Bookmark Situs Web ke Direktori Web Basis
Gunakan klien SFTP (OS X termasuk FTP di Finder, dan CyberDuck atau Filezilla gratis) untuk menyalin file apple-touch-icon.png ke direktori web root. Ini biasanya lokasi yang sama tempat file indeks utama situs berada. Setelah diunggah, konfirmasikan itu di lokasi yang tepat dengan membuka browser web dan pergi ke "http://SITEURL.com/apple-touch-icon.png" dan pastikan itu dimuat.
Berikut ini contoh ikon bookmark retina siap-512 × 512 dari OSXDaily.com:
Perhatikan bahwa tanpa bendera yang di-dekomposisi, ikon di atas akan menampilkan gelembung sorotan. Anda dapat melihat perbedaan antara keduanya dengan membandingkan ikon yang sebenarnya dengan ikon 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 mengkonfirmasi aspek retina) dan buka Safari. Segarkan situs web tempat Anda mengunggah ikon, lalu ketuk ikon panah dan pilih "Tambahkan ke Homescreen" beri nama bookmark, lalu kembali ke Layar Beranda untuk mengonfirmasi bahwa itu ada di sana.
Meskipun 512 x 512 piksel, ikon retina akan diperkecil dengan baik pada iPhone lama dan perangkat non-retina. Jika Anda benar-benar ingin, Anda dapat menggunakan CSS dan HTML untuk menampilkan ikon ukuran yang berbeda ke perangkat yang berbeda, tetapi itu benar-benar tidak diperlukan.
Sekarang jika seseorang membookmark situs web Anda di iPad dengan layar retina, itu akan terlihat jauh lebih baik di layar beranda mereka. Itu benar-benar semua ada untuk itu. Dan ya, kami telah menulis tentang ikon Apple touch sebelumnya, tetapi perlu disebutkan lagi sekarang bahwa iPad 3 menuntut ikon dan grafis resolusi yang lebih tinggi secara signifikan.
