Ikon Apple Touch secara jelas menyediakan imej yang digunakan apabila pelawat menambahkan laman anda pada skrin utama iPhone. Ia berasingan daripada favicon tab pelayar dan ikon yang diisytiharkan dalam manifes aplikasi web.
Satu saiz sahaja: 180×180
180×180 piksel lazim digunakan sebagai sumber resolusi tinggi. iOS boleh mengecilkan imej itu untuk ruang paparan lebih kecil, membolehkan kebanyakan projek mengekalkan satu pengisytiharan sahaja.
Saranan lama menyenaraikan lapan fail, dari 57×57 hingga 152×152, setiap satunya dengan atribut sizes sendiri. Varian itu tidak lagi diperlukan: ia membesarkan HTML dan mencetuskan permintaan tambahan untuk hasil yang sama.
Fail mesti dalam format PNG. iOS tidak membaca SVG atau WebP untuk ikon ini, manakala JPEG merosakkan tepi tajam grafik berwarna rata.
Utamakan latar belakang legap
Latar belakang lutsinar boleh menghasilkan paparan yang tidak dijangka, bergantung pada versi dan konteks. Untuk mengawal rupa pada skrin utama, sediakan grafik pada latar belakang legap pilihan anda.
Penyelesaiannya ialah meratakan ikon pada latar belakang legap sebelum eksport. Pilih warna jenama atau putih jika simbol anda berwarna-warni, dan tinggalkan kira-kira 10% ruang di sekeliling grafik supaya tidak terlalu padat.
Jangan bulatkan bucunya sendiri: iOS mengenakan topeng berbucu bulatnya sendiri. Fail yang sudah dibulatkan menghasilkan jejari berganda dan bucu yang tidak kemas.
Tag untuk ditampal
Satu baris dalam head halaman anda sudah mencukupi: link rel="apple-touch-icon" href="/apple-touch-icon.png". Atribut sizes adalah pilihan apabila anda menyediakan satu fail sahaja.
Anda juga boleh menambah meta name="apple-mobile-web-app-title" content="Your brand" untuk mengawal label di bawah ikon. Tanpa tag itu, iOS menggunakan tajuk halaman yang biasanya terlalu panjang lalu dipotong.
Letakkan juga salinan fail di akar dengan nama apple-touch-icon.png: seperti favicon.ico, iOS mencarinya pada alamat itu apabila tiada tag ditemukan.
Mengapakah ikon anda enggan dikemas kini
iOS menyimpan ikon dalam cache dengan agresif, dan pintasan yang sudah berada pada skrin utama tidak berubah sendiri. Untuk menguji versi baharu, padam pintasan, kosongkan data Safari, kemudian tambah laman semula.
Jika ikon masih tiada, semak tiga perkara: fail memberikan respons 200 dan bukannya 404, disampaikan dengan jenis kandungan image/png dan tidak disekat oleh peraturan robots.txt atau pengesahan.
Penyemak LFFavicon menguji keadaan ini pada mana-mana URL awam dan memaparkan ikon yang benar-benar diambilnya.
Sumber utama
Soalan lazim
Adakah beberapa saiz apple-touch-icon diperlukan?
Untuk kebanyakan projek, satu fail resolusi tinggi 180×180 membolehkan iOS menghasilkan paparan lebih kecil. Uji peranti yang termasuk dalam senarai sokongan anda.
Adakah Android menggunakan apple-touch-icon?
Chrome pada Android boleh menggunakannya sebagai sandaran, tetapi membaca ikon manifes web terlebih dahulu. Sentiasa isytiharkan ikon 192×192 dan 512×512 dalam manifes; itulah kaedah rasmi.
Bolehkah SVG digunakan sebagai ikon Apple Touch?
Tidak, iOS menjangkakan PNG raster untuk tag ini. Kekalkan SVG untuk favicon pelayar desktop, yang mendapat manfaat ketajaman dan sokongan mod gelap.