Atur “apple-touch-icon.png” untuk Menyesuaikan Situs Web Bookmark iPhone FavIcon

Daftar Isi:

Anonim

Jika Anda memiliki situs web sendiri atau sedang mengembangkannya untuk orang lain, Anda harus menyesuaikan ikon bookmark tersimpan yang muncul di layar utama iOS pengguna. Pada tangkapan layar di atas, Anda akan melihat favicon OSXDaily kustom duduk di layar iPhone.

Menyetel Ikon Apple Touch adalah ide yang bagus karena secara default iOS hanya akan menyimpan thumbnail kecil dari situs tersebut. Thumbnail kecil seringkali sulit dikenali dan umumnya tidak terlihat bagus, jadi mari atur gambar favicon Anda sendiri.

Cara Menyesuaikan dan Mengatur Ikon Apple Touch untuk Situs Web

  • Buat ikon, pastikan berbentuk persegi, yang ada di OSXDaily.com berukuran 512×512 piksel, tetapi Anda dapat memilih ukuran persegi lainnya jika Anda benar-benar ingin – perhatikan bahwa ukuran yang lebih besar cocok untuk tampilan retina
  • Simpan ikon layar utama sebagai file PNG dan beri label: apple-touch-icon.png
  • Masukkan apple-touch-icon.png ke direktori root server web, sehingga dapat diakses di domain.com/apple-touch-icon.png
  • Uji ikon bookmark layar utama situs web Anda dengan mengunjungi situs dari Safari di iOS, lalu ketuk "Tambahkan ke Layar Utama"
  • Lihat layar utama perangkat iOS dan Anda akan melihat bookmark disimpan di sana dengan ikon khusus baru Anda, seperti tangkapan layar di atas

Selama file diberi nama dengan benar dan di direktori root server web, Mobile Safari akan tahu apa yang harus dilakukan dengannya sehingga tidak diperlukan penyesuaian lebih lanjut untuk menampilkan favicon khusus iOS.

Untuk referensi, berikut adalah gambar 'apple-touch-icon.png' khusus kami yang kami gunakan untuk OSXDaily.com, contoh ikon bookmark ini dibuat dan berukuran sesuai untuk tampilan retina ():

Anda akan melihat bahwa file ikon yang sebenarnya tidak menyimpan pembiasan cahaya ke ikon, iOS menanganinya sendiri. Anda dapat menggunakan gambar apa pun yang Anda inginkan, tetapi saya sarankan untuk membuat gambar yang menampilkan UI ikon iOS yang sudah ada.

Ini jelas tidak sama dengan memiliki aplikasi iOS khusus, tetapi pengalaman pengguna seluler yang layak dari web adalah ide yang bagus dan menghindari biaya tinggi untuk mengembangkan aplikasi iOS.

Dan hei, jika Anda khawatir tentang hal-hal seperti ini, Anda mungkin menggunakan Photoshop untuk setidaknya mendesain ikonnya, bukan? Jadi lihat beberapa saat Anda melakukannya.

Atur “apple-touch-icon.png” untuk Menyesuaikan Situs Web Bookmark iPhone FavIcon