Panduan Ikon Sentuh Apple

apple-touch-icon adalah aset yang sepenuhnya terpisah dari favicon.ico Anda. Tab browser menggunakan favicon.ico (atau PNG/SVG tertaut Anda). Penginstalan layar utama iOS menggunakan apple-touch-icon. Tanpa apple-touch-icon, Safari mengambil tangkapan layar beresolusi rendah dari area pandang laman Anda dan menggunakannya sebagai ikon layar utama — hasil buram dan bebas merek yang terlihat tidak profesional jika dibandingkan dengan aplikasi asli.

Apple memperkenalkan apple-touch-icon di iOS 1.1.3 pada tahun 2007 dan sejak itu ukuran yang didukung telah berkembang seiring dengan meningkatnya kepadatan layar iPhone dan iPad. Rekomendasi saat ini untuk satu file untuk semua perangkat adalah 180x180 piksel. Ukuran ini ditampilkan pada kepadatan 60pt @3x di iPhone 6 Plus, iPhone X, dan semua model iPhone berikutnya. Model lama (iPhone SE generasi pertama, iPhone pra-Plus) menggunakan 120×120 pada 2x — iOS secara otomatis menurunkan skala file 180×180 agar sesuai.

Untuk cakupan iPad, Apple merekomendasikan 167×167 untuk iPad Pro (3x) dan 152×152 untuk iPad standar. Dalam praktiknya, satu file berukuran 180×180 yang berfungsi sebagai apple-touch-icon mencakup semua kasus ini dengan baik karena iOS diturunkan skalanya dengan pemfilteran bilinear berkualitas tinggi. Jika ketajaman piksel sempurna di iPad Pro adalah prioritasnya, tambahkan tag `<link rel='apple-touch-icon' size='167x167' href='/apple-touch-icon-167x167.png'>` tambahan.

Format PNG wajib untuk apple-touch-icon. iOS mengabaikan .ico, JPEG, SVG, dan GIF untuk ikon layar beranda. Selalu ekspor PNG-32 (dengan saluran alfa) atau PNG-24 (tanpa transparansi, jika ikon Anda memiliki latar belakang solid). Transparansi didukung dan direkomendasikan — ikon latar belakang transparan memungkinkan iOS menerapkan efek sudut membulat dan kilap standar pada versi iOS yang lebih lama.

Margin aman penting bagi apple-touch-icon. Meskipun iOS tidak lagi menerapkan lapisan kilap lama (dihapus di iOS 7), namun ikon tersebut dipotong menjadi bentuk persegi panjang membulat. Pertahankan sisipan logo inti Anda sekitar 10% di semua sisi untuk memastikan tidak ada hal penting yang terpotong di sudut membulat. Area aman kira-kira berukuran 162×162 piksel dalam kanvas 180×180.

Menempatkan file apple-touch-icon di root domain Anda adalah hal yang penting. Meskipun Anda dapat menggunakan URL apa pun melalui tag tautan href, beberapa versi iOS Safari dan beberapa perayap Apple (untuk integrasi mesin pencari Spotlight) akan mencoba mengambil /apple-touch-icon.png atau /apple-touch-icon-precompose.png langsung dari root tanpa membaca tag tautan HTML. Menempatkan file di root memberikan kompatibilitas terbaik.

Varian tag `precomposed` — `<link rel='apple-touch-icon-precompose'>` — memberitahukan versi iOS yang lebih lama untuk tidak menerapkan efek visual tambahan apa pun (kilap, sudut membulat, bayangan jatuh) ke ikon Anda. Apple menghapus efek ini di iOS 7, jadi pada tahun 2026 perbedaan antara `apple-touch-icon` dan `apple-touch-icon-precomposition` tidak relevan untuk iOS modern. Gunakan nilai rel `apple-touch-icon` biasa.

Deklarasi beberapa ukuran didukung menggunakan beberapa tag tautan. Untuk presisi maksimum di seluruh perangkat Apple, Anda dapat mendeklarasikan: `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon-180x180.png'>` untuk iPhone 6 Plus dan versi lebih baru, `<link rel='apple-touch-icon' size='167x167' href='/apple-touch-icon-167x167.png'>` untuk iPad Pro, dan `<link rel='apple-touch-icon' size='152x152' href='/apple-touch-icon-152x152.png'>` untuk iPad lama. iOS memilih kecocokan terdekat.

Apple Watch tidak menggunakan apple-touch-icon untuk ikon aplikasi jam tangan — yang berasal dari app bundle asli. Namun, jika pengguna menavigasi ke situs web Anda dari browser Jam Tangan Apple, Jam Tangan Safari akan menampilkan apple-touch-icon di daftar bookmark. 180×180 PNG yang sama berfungsi di sini tanpa perubahan apa pun.

macOS Safari di Mac juga menggunakan apple-touch-icon saat menambahkan situs web ke Dock sebagai aplikasi web (macOS Sonoma dan versi lebih baru memungkinkan penyematan situs web sebagai aplikasi web dari Safari). apple-touch-icon digunakan sebagai ikon Dock. Hal ini menjadikan apple-touch-icon penting tidak hanya untuk perangkat seluler tetapi juga untuk pengguna Mac di macOS modern.

Saat memperbarui apple-touch-icon, iOS menyimpan ikon lama di perangkat pengguna dan tidak memeriksa pembaruan kecuali pengguna menghapus ikon layar beranda dan menambahkannya kembali, atau menghapus cache Safari. Tidak ada kontrol sisi server atas cache ini — ini adalah perilaku iOS sisi klien. Mengkomunikasikan hal ini kepada pemangku kepentingan membantu menetapkan ekspektasi mengenai seberapa cepat perubahan merek diterapkan ke penyimpanan layar utama yang ada.

Menguji apple-touch-icon Anda dengan benar memerlukan perangkat fisik iOS atau Simulator Xcode iOS. Di perangkat, buka Safari, navigasikan ke situs Anda, ketuk tombol Bagikan, dan pilih 'Tambahkan ke Layar Utama'. Pratinjau dalam dialog akan menampilkan apple-touch-icon Anda. Jika yang ditampilkan hanyalah tangkapan layar, mungkin file tersebut tidak dapat diakses di URL yang dinyatakan atau tag tautan hilang dari HTML Anda.

favicon generator mengeluarkan 180×180 apple-touch-icon.png sebagai bagian dari paket favicon standar. Setelah dibuat, letakkan file di root situs Anda dan tambahkan tag tautan ke HTML `<head>` Anda. Untuk panduan lengkap tentang semua ukuran ikon yang ada di samping apple-touch-icon, lihat referensi favicon sizes explained.