Pembangun web dan pemilik tapak web memberi perhatian: anda perlu menetapkan ikon penanda halaman iOS sedia retina. Ikon penanda halaman dipanggil Apple Touch Icon dan imej tersuai ini menjadi ikon yang dipaparkan pada skrin utama pengguna apabila mereka menanda halaman tapak web pada iPad, iPhone, atau iPod touch dalam iOS, atau panel penanda halaman Safari untuk OS X.Tanpa set fail ikon epal-sentuh tersuai, pengguna akan mendapat lakaran kecil halaman web itu sendiri yang membosankan dan selalunya hodoh, dan tanpa menggunakan ikon sedia retina, ikon penanda halaman akan kelihatan berpiksel dan secara amnya mengerikan pada skrin iPad baharu.

Inilah perkara yang anda perlu lakukan untuk mencipta Ikon Apple Touch yang sempurna retina untuk mana-mana tapak web dalam beberapa langkah mudah.

1) Cipta Ikon Laman Web iOS Sedia Retina

Gunakan templat atau reka bentuk anda sendiri. Saya menggunakan kit ikon retina DIY mudah yang disebut dalam catatan sebelumnya, ia adalah fail JPA yang menjadikan mereka bentuk ikon iOS kelihatan bagus semudah satu atau dua klik. Tampal dalam tapak web atau logo syarikat dan anda boleh pergi. Jika anda tidak mempunyai sesuatu untuk mengedit fail JPA, Photoshop CS6 beta adalah sangat baik dan percuma untuk dimuat turun dan digunakan sehingga versi akhir keluar pada akhir tahun ini.

2) Simpan sebagai PNG & Namakan Ikon Penanda Halaman Laman Web Retina

Ikon mestilah PNG dan ia mesti dinamakan satu daripada dua perkara. Setiap nama fail menawarkan penampilan ikon yang sedikit berbeza seperti yang dipaparkan pada skrin utama pengguna:

• “apple-touch-icon.png” akan menambah tindanan gelembung serlahan pada ikon
• “apple-touch-icon-precomposed.png” akan memaparkan ikon seperti yang dibuat pada asalnya, tanpa tindanan serlahan

Gunakan pilihan -precomposed yang terakhir jika anda mencipta sorotan anda sendiri atau jika anda mahu ikon kelihatan lebih rata tanpa gelembung di mana-mana yang muncul pada kebanyakan ikon lalai Apple.

3) Muat naik Ikon Sentuh Penanda Halaman Laman Web ke Direktori Web Asas

Gunakan klien SFTP (OS X termasuk FTP dalam Finder dan CyberDuck atau Filezilla adalah percuma) untuk menyalin fail apple-touch-icon.png ke direktori web akar. Ini biasanya lokasi yang sama dengan lokasi fail indeks utama tapak. Setelah dimuat naik, sahkan ia berada di lokasi yang betul dengan membuka penyemak imbas web dan pergi ke "http://SITEURL.com/apple-touch-icon.png" dan pastikan ia dimuatkan.

Berikut ialah contoh ikon penanda halaman sedia retina 512×512 daripada OSXDaily.com:

Perhatikan bahawa tanpa bendera -precomposed, ikon di atas akan memaparkan gelembung serlahan. Anda boleh melihat perbezaan antara keduanya dengan membandingkan ikon sebenar dengan yang ditunjukkan dalam tangkapan skrin sebagai penanda halaman.

4) Gunakan Peranti iOS dan Tanda Halaman Tapak

Ini adalah bahagian paling mudah, ambil peranti iOS (sebaik-baiknya iPad 3 untuk mengesahkan aspek retina) dan buka Safari.Muat semula tapak web yang anda muat naik ikon itu, kemudian ketik ikon anak panah dan pilih "Tambah ke Skrin Utama" namakan penanda halaman, kemudian kembali ke Skrin Utama untuk mengesahkan ia ada di sana.

Walaupun bersaiz 512 x 512 piksel, ikon retina akan dikecilkan dengan baik pada iPhone lama dan peranti bukan retina. Jika anda benar-benar mahu, anda boleh menggunakan CSS dan HTML untuk memaparkan ikon bersaiz berbeza pada peranti yang berbeza, tetapi ia sebenarnya tidak perlu.

Sekarang jika seseorang menanda halaman tapak web anda pada iPad dengan paparan retina, ia akan kelihatan lebih baik pada skrin utama mereka. Itu sahaja yang ada padanya. Dan ya, kami telah menulis tentang ikon sentuhan Apple sebelum ini, tetapi patut disebut sekali lagi sekarang bahawa iPad 3 memerlukan ikon dan grafik peleraian yang jauh lebih tinggi.