Setel "apple-touch-icon.png" untuk Menyesuaikan iPhone Situs Web Bookmark FavIcon

Jika Anda memiliki situs web sendiri atau mengembangkannya untuk orang lain, Anda harus menyesuaikan ikon bookmark yang disimpan yang muncul di layar beranda iOS pengguna. Pada gambar di atas Anda akan melihat favicon OSXDaily khusus yang ada di layar iPhone.

Mengatur Ikon Apple Touch adalah ide yang bagus karena secara default iOS hanya akan menyimpan thumbnail kecil dari situs. Thumbnail kecil sering kali sulit diidentifikasi dan umumnya tidak terlihat bagus, jadi mari kita atur gambar favicon Anda sendiri.

Cara Menyesuaikan dan Mengatur Ikon Apple Touch untuk Situs Web

  • Buat ikon, pastikan itu persegi, yang di sini di OSXDaily.com adalah 512 × 512 piksel, tetapi Anda bisa memilih ukuran persegi lainnya jika Anda benar-benar ingin - perhatikan lebih besar sesuai untuk menampilkan retina
  • Simpan ikon homescreen sebagai file PNG dan beri label: apple-touch-icon.png
  • Jatuhkan apple-touch-icon.png ke dalam direktori root webserver, sehingga dapat diakses di domain.com/apple-touch-icon.png
  • Uji ikon bookmark homescreen situs web Anda dengan mengunjungi situs dari Safari di iOS, lalu ketuk "Tambahkan ke Layar Utama"
  • Lihatlah layar beranda perangkat iOS dan Anda akan melihat bookmark disimpan di sana dengan ikon khusus baru Anda, seperti tangkapan layar di atas

Asalkan nama file benar dan di direktori root webservers, Mobile Safari akan tahu apa yang harus dilakukan dengan itu sehingga tidak ada penyesuaian lebih lanjut diperlukan untuk mendapatkan favicon spesifik iOS muncul.

Untuk referensi, berikut adalah gambar 'apple-touch-icon.png' yang kami gunakan untuk OSXDaily.com, ikon bookmark contoh ini dibuat dan berukuran tepat untuk retina display (pelajari lebih lanjut tentang retina bookmark ikon creation di sini):

Anda akan melihat bahwa file ikon yang sebenarnya tidak memiliki refraksi cahaya yang disimpan ke ikon, iOS menangani ini sendiri. Anda dapat menggunakan gambar apa pun yang Anda inginkan, tetapi saya akan merekomendasikan membuat satu yang menangkap UI yang sudah dikenal dari ikon iOS yang ada.

Ini jelas tidak sama dengan memiliki aplikasi iOS khusus, tetapi pengalaman pengguna ponsel yang layak dari web adalah ide yang baik dan itu menghindari apa yang bisa menjadi harga tinggi mengembangkan aplikasi iOS.

Dan hei, jika Anda khawatir tentang hal-hal seperti ini, Anda mungkin menggunakan Photoshop untuk setidaknya merancang ikon, kan? Jadi periksa beberapa tips untuk mempercepat Photoshop saat Anda melakukannya.