Ikon Apple Touch secara eksplisit menyediakan gambar saat pengunjung menambahkan situs Anda ke layar utama iPhone. Ikon ini terpisah dari favicon tab peramban dan ikon dalam manifes aplikasi web.
Cukup satu ukuran: 180×180
180×180 piksel umum digunakan sebagai sumber resolusi tinggi. iOS dapat memperkecil gambar untuk penempatan yang lebih kecil, sehingga sebagian besar proyek cukup menggunakan satu deklarasi.
Rekomendasi lama mencantumkan delapan berkas, dari 57×57 hingga 152×152, masing-masing dengan atribut sizes tersendiri. Varian tersebut tidak lagi diperlukan: hanya menambah HTML dan permintaan untuk hasil yang sama.
Berkas harus berupa PNG. iOS tidak membaca SVG atau WebP untuk ikon ini, sementara JPEG merusak ketajaman tepi gambar berwarna rata.
Utamakan latar belakang tidak transparan
Latar belakang transparan dapat menghasilkan tampilan tak terduga, tergantung versi dan konteks tampilan. Untuk mengendalikan tampilan layar utama, gunakan gambar dengan latar belakang tidak transparan pilihan Anda.
Perbaikannya adalah menggabungkan ikon dengan latar belakang tidak transparan sebelum ekspor. Pilih warna merek, atau putih polos jika simbolnya berwarna-warni, dan sisakan ruang sekitar 10% di sekeliling gambar agar tidak terlalu padat.
Jangan membulatkan sudut sendiri: iOS menerapkan mask sudut membulatnya sendiri. Berkas yang sudah membulat akan memiliki radius ganda dengan sudut yang tidak rapi.
Tag untuk ditempel
Satu baris di head halaman sudah cukup: link rel="apple-touch-icon" href="/apple-touch-icon.png". Atribut sizes bersifat opsional jika Anda menyediakan satu berkas.
Anda juga dapat menambahkan meta name="apple-mobile-web-app-title" content="Your brand" untuk mengatur label di bawah ikon. Tanpa tag tersebut, iOS menggunakan judul halaman, yang biasanya terlalu panjang dan terpotong.
Letakkan juga salinan berkas di direktori akar sebagai apple-touch-icon.png: seperti favicon.ico, iOS mencarinya di alamat tersebut saat tidak menemukan tag.
Mengapa ikon Anda tidak diperbarui
iOS menyimpan ikon dalam cache secara agresif, dan pintasan yang sudah ada di layar utama tidak pernah berubah sendiri. Untuk menguji versi baru, hapus pintasan, bersihkan data Safari, lalu tambahkan situs lagi.
Jika ikon tetap tidak ada, periksa tiga hal: berkas merespons 200, bukan 404; disajikan dengan tipe konten image/png; dan tidak diblokir aturan robots.txt atau autentikasi.
Pemeriksa LFFavicon menguji tepat kasus-kasus tersebut pada URL publik mana pun dan menampilkan ikon yang benar-benar diambil.
Sumber primer
Pertanyaan umum
Apakah diperlukan beberapa ukuran apple-touch-icon?
Untuk sebagian besar proyek, satu berkas resolusi tinggi 180×180 memungkinkan iOS menghasilkan tampilan lebih kecil. Uji perangkat yang termasuk dalam daftar dukungan Anda.
Apakah Android menggunakan apple-touch-icon?
Chrome di Android dapat menggunakannya sebagai cadangan, tetapi membaca ikon manifes web terlebih dahulu. Selalu deklarasikan ikon 192×192 dan 512×512 dalam manifes karena itulah cara resminya.
Bisakah SVG digunakan sebagai ikon Apple Touch?
Tidak, iOS mengharapkan PNG raster untuk tag ini. Gunakan SVG untuk favicon peramban desktop, yang memberikan ketajaman dan dukungan mode gelap.