Panduan Ikon Sentuh Apple
Apabila seseorang mengetik 'Tambah pada Skrin Utama' pada Safari, iOS menggunakan apple-touch-icon — bukan favicon.ico. Hantar 180×180 PNG, letakkannya dalam akar tapak anda sebagai apple-touch-icon.png dan pautkannya dengan `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>` dalam `<head>` anda. favicon generator mengeksport PNG bersaiz betul daripada mana-mana imej sumber, dan panduan ini menerangkan setiap butiran sistem ikon skrin utama iOS.
apple-touch-icon ialah aset yang berasingan sepenuhnya daripada favicon.ico anda. Tab penyemak imbas menggunakan favicon.ico (atau PNG/SVG terpaut anda). Pemasangan skrin utama iOS menggunakan apple-touch-icon. Tanpa apple-touch-icon, Safari mengambil tangkapan skrin beresolusi rendah bagi port pandangan halaman anda dan menggunakannya sebagai ikon skrin utama — hasil kabur tanpa jenama yang kelihatan tidak profesional di sebelah apl asli.
Apple memperkenalkan apple-touch-icon dalam iOS 1.1.3 pada tahun 2007 dan sejak itu telah mengembangkan saiz yang disokong apabila ketumpatan skrin iPhone dan iPad telah meningkat. Pengesyoran semasa untuk satu fail semua peranti ialah 180×180 piksel. Saiz ini dipaparkan pada ketumpatan 60pt @3x pada 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 automatik menurunkan skala fail 180×180 agar muat.
Untuk liputan iPad, Apple mengesyorkan 167×167 untuk iPad Pro (3x) dan 152×152 untuk iPad standard. Dalam amalan, satu fail 180×180 digunakan sebagai apple-touch-icon merangkumi semua kes ini dengan boleh diterima kerana iOS menurunkan skala dengan penapisan bilinear berkualiti tinggi. Jika ketajaman sempurna piksel pada iPad Pro menjadi keutamaan, tambahkan teg `<link rel='apple-touch-icon' sizes='167x167' href='/apple-touch-icon-167x167.png'>` tambahan.
Format PNG adalah wajib untuk apple-touch-icon. iOS mengabaikan .ico, JPEG, SVG dan GIF untuk ikon skrin utama. Sentiasa eksport PNG-32 (dengan saluran alfa) atau PNG-24 (tanpa ketelusan, jika ikon anda mempunyai latar belakang yang kukuh). Ketelusan disokong dan disyorkan — ikon latar belakang telus membolehkan iOS menggunakan sudut bulat standard dan kesan berkilat pada versi iOS yang lebih lama.
Margin selamat penting untuk apple-touch-icon. Walaupun iOS tidak lagi menggunakan tindanan berkilat lama (dialih keluar dalam iOS 7), ia memangkas ikon kepada bentuk segi empat tepat bulat. Simpan logo teras anda kira-kira 10% pada semua sisi untuk memastikan tiada apa-apa yang penting dipotong oleh sudut bulat. Kawasan selamat adalah kira-kira 162×162 piksel dalam kanvas 180×180.
Meletakkan fail apple-touch-icon pada akar domain anda adalah penting. Walaupun anda boleh menggunakan mana-mana URL melalui href teg pautan, beberapa versi iOS Safari dan beberapa perangkak Apple (untuk penyepaduan enjin carian Spotlight) akan cuba mengambil /apple-touch-icon.png atau /apple-touch-icon-precomposed.png terus daripada akar tanpa membaca teg pautan HTML. Meletakkan fail pada akar memberikan keserasian terbaik.
Varian `precomposed` teg — `<link rel='apple-touch-icon-precomposed'>` — memberitahu versi iOS yang lebih lama supaya tidak menggunakan sebarang kesan visual tambahan (kilat, bucu bulat, bayang jatuh) pada ikon anda. Apple mengalih keluar kesan ini dalam iOS 7, jadi pada tahun 2026 perbezaan antara `apple-touch-icon` dan `apple-touch-icon-precomposed` adalah tidak relevan untuk iOS moden. Gunakan nilai rel `apple-touch-icon` biasa.
Pengisytiharan berbilang saiz disokong menggunakan tag pautan berbilang. Untuk ketepatan maksimum merentas semua peranti Apple, anda boleh mengisytiharkan: `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon-180x180.png'>` untuk iPhone 6 Plus dan kemudian, `<link rel='apple-touch-icon' sizes='167x167' href='/apple-touch-icon-167x167.png'>` untuk iPad Pro dan `<link rel='apple-touch-icon' sizes='152x152' href='/apple-touch-icon-152x152.png'>` untuk iPad lama. iOS memilih perlawanan terdekat.
Apple Watch tidak menggunakan apple-touch-icon untuk ikon apl jam tangan — yang datang daripada app bundle asli. Walau bagaimanapun, jika pengguna menavigasi ke tapak web anda dari penyemak imbas Apple Watch, Safari Watch memaparkan apple-touch-icon dalam senarai penanda halaman. 180×180 PNG yang sama berfungsi di sini tanpa sebarang perubahan.
macOS Safari pada Mac juga menggunakan apple-touch-icon apabila menambahkan tapak web pada Dock sebagai apl web (macOS Sonoma dan kemudiannya membenarkan menyemat tapak web sebagai apl web daripada Safari). apple-touch-icon digunakan sebagai ikon Dok. Ini menjadikan apple-touch-icon penting bukan sahaja untuk mudah alih tetapi juga untuk pengguna Mac pada macOS moden.
Apabila mengemas kini apple-touch-icon, iOS menyimpan cache ikon lama pada peranti pengguna dan tidak menyemak kemas kini melainkan pengguna mengalih keluar ikon skrin utama dan menambahkannya semula atau mengosongkan cache Safari. Tiada kawalan sebelah pelayan ke atas cache ini — ia adalah tingkah laku iOS sebelah klien. Menyampaikan perkara ini kepada pihak berkepentingan membantu menetapkan jangkaan tentang seberapa cepat penjenamaan semula merebak ke simpanan skrin utama sedia ada.
Menguji apple-touch-icon anda dengan betul memerlukan peranti iOS fizikal atau Simulator Xcode iOS. Pada peranti, buka Safari, navigasi ke tapak anda, ketik butang Kongsi dan pilih 'Tambah ke Skrin Utama'. Pratonton dalam dialog harus menunjukkan apple-touch-icon anda. Jika ia menunjukkan tangkapan skrin sebaliknya, sama ada fail itu tidak boleh diakses di URL yang diisytiharkan atau teg pautan tiada daripada HTML anda.
favicon generator mengeluarkan 180×180 apple-touch-icon.png sebagai sebahagian daripada pakej favicon standard. Selepas menjana, letakkan fail pada akar tapak anda dan tambahkan teg pautan pada HTML `<head>` anda. Untuk panduan lengkap kepada semua saiz ikon yang bersebelahan dengan apple-touch-icon, lihat rujukan favicon sizes explained.
Cara ia berfungsi
- 1
Hasilkan 180×180 PNG
Muat naik logo atau tanda jenama anda (512×512 PNG atau SVG sumber) ke [favicon generator](tool:favicon-generator). Pakej ini termasuk apple-touch-icon.png pada tepat 180×180 piksel, sedia untuk digunakan.
- 2
Sapukan padding zon selamat
Pastikan logo anda dimasukkan sekurang-kurangnya 10% (18 piksel) dari setiap tepi kanvas 180×180. Ini menghalang sudut bulat iOS daripada memotong karya seni anda. Penjana menggunakan margin selamat secara automatik.
- 3
Letakkan fail pada akar tapak anda
Salin apple-touch-icon.png ke direktori akar tapak anda — direktori yang sama yang menyediakan index.html atau halaman utama anda. URL yang boleh diakses hendaklah https://yourdomain.com/apple-touch-icon.png.
- 4
Tambahkan teg pautan pada <head>
Di dalam HTML `<head>` anda, tambahkan: `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>`. Untuk berbilang saiz peranti, tambahkan teg tambahan untuk 167×167 dan 152×152 juga.
- 5
Uji dengan Tambah pada Skrin Utama
Pada iPhone atau iPad, buka Safari, navigasi ke tapak anda, ketik Kongsi dan pilih 'Tambah pada Skrin Utama'. Dialog pratonton harus menunjukkan apple-touch-icon anda. Jika ia menunjukkan tangkapan skrin, semak laluan fail dan sintaks teg pautan.
Cuba sekarang
Jana apple-touch-icon anda
Penjana FaviconSoalan lazim
Apakah saiz apple-touch-icon?+
180×180 piksel PNG untuk semua iPhone semasa. Fail tunggal ini juga merangkumi model iPhone yang lebih lama (dikecilkan kepada 120×120) dan iPad (152×152 dan 167×167). Jika ketajaman iPad Pro adalah kritikal, tambahkan teg pautan 167×167 dan 152×152 yang eksplisit sebagai tambahan.
Apakah format yang diperlukan untuk apple-touch-icon?+
PNG sahaja. iOS mengabaikan .ico, JPEG, SVG dan GIF untuk ikon skrin utama. Eksport segi empat sama PNG-32 (dengan alfa) atau PNG-24 (latar belakang pepejal). Ketelusan disokong dan ditunjukkan dengan bersih pada skrin utama iOS.
Di manakah apple-touch-icon.png harus diletakkan?+
Dalam akar tapak anda, boleh diakses di https://yourdomain.com/apple-touch-icon.png. Sesetengah versi perangkak iOS Safari dan Apple mengambil laluan ini terus tanpa membaca teg pautan HTML. Tag pautan href boleh menghala ke mana-mana laluan, tetapi peletakan akar memberikan keserasian maksimum.
Adakah saya masih memerlukan favicon.ico jika saya mempunyai apple-touch-icon?+
ya. apple-touch-icon adalah untuk pemasangan skrin utama iOS sahaja. Tab penyemak imbas, bar penanda halaman, pintasan Windows dan semua konteks bukan iOS masih menggunakan favicon.ico atau PNG/SVG yang dipautkan melalui teg pautan standard. Kedua-dua aset mempunyai tujuan yang sama sekali berbeza.
Apakah perbezaan antara apple-touch-icon dan apple-touch-icon-prekomposisi?+
Varian pragubah memberitahu iOS yang lebih lama untuk tidak menggunakan kesan visual (kilat, sudut bulat). Apple mengalih keluar kesan ini dalam iOS 7 (2013), jadi perbezaan itu tidak relevan pada tahun 2026. Gunakan `rel='apple-touch-icon'` dalam semua projek baharu.
Mengapakah tapak saya menunjukkan tangkapan skrin dan bukannya apple-touch-icon pada iOS?+
Sama ada fail tidak boleh diakses di URL yang diisytiharkan (semak untuk ralat 404), teg pautan tiada daripada HTML `<head>` anda atau format fail bukan PNG. Sahkan URL diselesaikan dengan betul dengan membukanya terus dalam penyemak imbas dan sahkan teg pautan menggunakan `rel='apple-touch-icon'`.
Adakah apple-touch-icon memerlukan pelapik zon selamat?+
ya. iOS klip ikon ke segi empat tepat bulat. Simpan logo teras anda kira-kira 10% pada semua sisi (kira-kira 18 piksel padding pada kanvas 180×180). Ini memastikan sudut bulat tidak pernah memotong bahagian penting tanda jenama anda.