Tetapkan "apple-touch-icon.png" untuk Menyesuaikan Laman Web Penanda Halaman iPhone FavIcon

Isi kandungan:

Anonim

Jika anda mempunyai tapak web anda sendiri atau sedang membangunkan tapak web untuk orang lain, anda harus menyesuaikan ikon penanda halaman yang disimpan yang muncul pada skrin utama iOS pengguna. Dalam tangkapan skrin di atas, anda akan melihat favicon OSXDaily tersuai terletak pada skrin iPhone.

Menetapkan Ikon Apple Touch ialah idea yang baik kerana secara lalai iOS hanya akan menyimpan lakaran kecil tapak tersebut. Lakaran kenit kecil selalunya sukar dikenal pasti dan secara amnya tidak kelihatan begitu hebat, jadi mari tetapkan imej favicon anda sendiri.

Cara Menyesuaikan dan Menetapkan Ikon Apple Touch untuk Tapak Web

  • Buat ikon, pastikan ia adalah segi empat sama, yang di sini di OSXDaily.com ialah 512×512 piksel, tetapi anda boleh memilih saiz segi empat sama lain jika anda benar-benar mahu – ambil perhatian yang lebih besar adalah sesuai untuk retina memaparkan
  • Simpan ikon skrin utama sebagai fail PNG dan labelkannya: apple-touch-icon.png
  • Letakkan apple-touch-icon.png ke dalam direktori pelayan web akar, supaya ia boleh diakses di domain.com/apple-touch-icon.png
  • Uji ikon penanda halaman skrin utama tapak web anda dengan melawati tapak daripada Safari dalam iOS, dan kemudian mengetik pada “Tambah pada Skrin Utama”
  • Lihat skrin utama peranti iOS dan anda akan melihat penanda halaman disimpan di sana dengan ikon tersuai baharu anda, seperti tangkapan skrin di atas

Selagi fail itu dinamakan dengan betul dan dalam direktori akar pelayan web, Mobile Safari akan tahu apa yang perlu dilakukan dengannya supaya tiada pelarasan lanjut diperlukan untuk mendapatkan favicon khusus iOS untuk dipaparkan.

Untuk rujukan, berikut ialah imej 'apple-touch-icon.png' tersuai kami yang kami gunakan untuk OSXDaily.com, contoh ikon penanda halaman ini dicipta dan bersaiz sesuai untuk paparan retina ():

Anda akan perasan bahawa fail ikon sebenar tidak mempunyai pembiasan cahaya yang disimpan pada ikon, iOS mengendalikannya sendiri. Anda boleh menggunakan mana-mana imej yang anda mahukan, tetapi saya syorkan anda membuat imej yang menangkap UI biasa bagi ikon iOS sedia ada.

Ini jelas sekali tidak sama dengan mempunyai apl iOS khusus, tetapi pengalaman pengguna mudah alih yang baik daripada web adalah idea yang baik dan ia mengelakkan apa yang boleh menjadi harga tinggi untuk membangunkan apl iOS.

Dan hei, jika anda mengambil berat tentang perkara seperti ini, anda mungkin menggunakan Photoshop untuk sekurang-kurangnya mereka bentuk ikon bukan? Oleh itu, lihat sedikit sementara anda melakukannya.

Tetapkan "apple-touch-icon.png" untuk Menyesuaikan Laman Web Penanda Halaman iPhone FavIcon