ImageConver · Day 16 · Browser icon tool
Apple Touch Icon Generator
Generate 180×180, 167×167, and 152×152 Apple touch icon PNG files from one source image, then download a ZIP containing the icons and ready-to-review link markup. Cropping, padding, background color, and output are handled locally in the browser.
Pemrosesan lokal. Gambar sumber tetap ada di tab browser ini. Simpan master yang dapat diedit dan validasi aset yang dihasilkan di alat resmi platform.
Pilih gambar untuk memulai.
Jawaban langsung
Apa yang dihasilkan halaman ini dan di mana tempatnya
Generate 180×180, 167×167, and 152×152 Apple touch icon PNG files from one source image, then download a ZIP containing the icons and ready-to-review link markup. Cropping, padding, background color, and output are handled locally in the browser. Apple touch icons represent a website saved to an Apple device Home Screen. They are separate from native iOS application icons, App Store assets, favicons, launch screens, and complete progressive web app manifests.
Pekerjaan ikon adalah sistem pengiriman, bukan pengubahan ukuran tunggal. Suatu platform dapat menggunakan identitas yang sama di toko, peluncur, notifikasi, layar pengaturan, tab browser, aplikasi web yang diinstal, pintasan, atau hasil pencarian sistem operasi. Setiap konteks dapat menerapkan masker, kepadatan, cache, aturan pengomposisian, atau langkah validasi yang berbeda. Oleh karena itu, paket yang dihasilkan harus diperlakukan sebagai turunan teruji dari master merek yang dapat diedit.
Mulailah dengan karya seni sumber bersih. Pertahankan subjek utama tetap di tengah, hapus teks yang tidak perlu, hindari detail garis rambut, dan nilai desain berdasarkan ukuran tampilan sebenarnya terkecil. Jangan menambahkan penutup luar platform atau bayangan sistem ke sumbernya kecuali pedoman resmi saat ini secara eksplisit mengharuskan perlakuan tersebut. Pratinjau besar dapat menyembunyikan masalah yang terlihat jelas pada ukuran 16, 32, atau 48 piksel.
Dimensi file saja tidak membuktikan kebenarannya. Konfirmasikan ruang warna, perilaku alfa, jalur file, tipe MIME, metadata manifes atau katalog aset, deklarasi tujuan, penamaan, perilaku cache, dan presentasi perangkat sebenarnya. Pertahankan file sumber dan dokumentasikan pengaturan generator mana yang menghasilkan aset rilis yang ditinjau.
Alur kerja
Proses ikon empat langkah yang terkontrol
- 1
Periksa sumbernya
Choose a clear square or near-square PNG, JPG, or WebP source.
- 2
Pilih pengaturan
Select contain or cover fitting, padding, and a background color.
- 3
Hasilkan aset
Preview the 180-pixel result and generate all three PNG sizes.
- 4
Validasi pengiriman
Inspect the ZIP, place files at stable URLs, and add the supplied link markup to the site head.
Kualitas visual
Kesesuaian, detail, transparansi, dan pengakuan
Pembingkaian dan bantalan
Mode Fit mengubah arti. Berisi menyimpan sumber lengkap dan dapat menambahkan latar belakang di sekitarnya; penutup memenuhi kotak dan dapat memotong tepinya. Padding berguna untuk tanda di tengah, tetapi jika terlalu banyak akan membuat ikon terlihat kecil. Bandingkan masker dan pratinjau kecil sebelum menerima nilai.
Detail berukuran kecil
Perampingan raster menghilangkan detail. Goresan tipis, penghitung kecil, tekstur fotografi, dan jenis huruf dapat kabur atau hilang. Ikon kecil terbaik sering kali berupa gambar yang disederhanakan daripada versi karya seni pemasaran yang diperkecil secara mekanis. Tinjau keluaran piksel sebenarnya pada skala 100%.
Perilaku latar belakang
Transparansi tidaklah netral. Browser, peluncur, toko, atau sistem operasi mungkin menggabungkan piksel transparan dengan warna yang tidak Anda pilih. Karya seni platform full-bleed harus menggunakan latar belakang yang disengaja dimana panduan mengharapkannya, sementara format seperti ICO mungkin sengaja mempertahankan alpha.
Kontras warna dan pengenalan penting di lingkungan terang, gelap, berwarna, dan bertema. Uji ikon di dekat ikon pesaing dan pada berbagai latar belakang. Pembuatan otomatis tidak dapat menentukan apakah suatu merek bersifat khas, dapat diakses, disahkan secara hukum, atau konsisten dengan aturan merek saat ini.
Batasan penting
Apa yang tidak dapat dijamin oleh pembuatan ikon otomatis
- The tool does not create native App Store or Xcode asset catalogs.
- Safari and device behavior can change, so test on supported physical devices.
- Fine text and edge details may become unreadable at Home Screen sizes.
- Transparent areas are flattened to the selected background to avoid unpredictable presentation.
Kasus penggunaan
Dimana halaman ini cocok untuk produksi
Pengiriman produk
Create Home Screen artwork for a web application.
Pekerjaan kompatibilitas
Replace a blurry touch icon with correctly sized PNG assets.
Tinjauan kualitas
Prepare iPhone and iPad-specific icon files from one brand master.
Serah terima pengembang
Package repeatable icon assets for a website deployment.
Pelaksanaan
Konfigurasi, caching, dan pemeriksaan rilis
Simpan file yang dihasilkan pada URL yang stabil dan sadar cache. Manifes atau deklarasi HTML yang mengarah ke file yang hilang tidak dapat diselamatkan jika PNG yang tepat ada di komputer pengembang. Verifikasi status HTTP, jenis konten, dimensi, byte file, dan perilaku asal yang sama atau lintas asal jika relevan.
Perlakukan file konfigurasi sebagai kode yang dapat ditinjau. Periksa setiap entri manifes, catatan katalog aset, nama folder, faktor skala, token tujuan, dan nama file sebelum penggabungan. Fragmen yang dihasilkan sengaja menghindari tebakan nama aplikasi, URL awal, pengidentifikasi bundel, warna tema, atau pengaturan proyek milik aplikasi sebenarnya.
Pembatalan cache memerlukan pemeriksaan rilis. Aplikasi web, browser, peluncur, sistem build, dan penyimpanan yang terinstal dapat mempertahankan sumber daya ikon lama. Gunakan jalur berversi atau kebijakan cache yang disengaja, bangun kembali aplikasi, instal ulang bila perlu, dan bedakan sumber daya lama dari sumber daya yang dibuat secara tidak benar.
Validasi geometri dan alur kerja. Geometri mencakup pemangkasan, zona aman, pemusatan, perlakuan tepi, dan kejelasan ukuran kecil. Alur kerja mencakup kontrol sumber yang benar, pengaturan berulang, konfigurasi platform, output build, penerapan, dan rollback. File yang menarik secara visual masih bisa gagal karena proyek mereferensikan nama file yang berbeda.
Pribadi
Pemrosesan lokal dan penanganan aset
Browser membaca sumber yang dipilih dengan API file lokal, menggambar turunan ke kanvas, mengkodekan data PNG, dan menyusun ZIP atau ICO yang diminta dalam memori. ImageConver tidak mengirimkan piksel sumber ke titik akhir konversi ikon dalam alur kerja ini.
Pemrosesan lokal mengurangi paparan transfer tetapi tidak membuat perangkat bersama menjadi pribadi. Unduhan browser, daftar file terbaru, folder tersinkronisasi, cadangan, ekstensi, dan pratinjau sistem operasi mungkin menyimpan salinan. Gunakan tempat kerja yang disetujui untuk merek yang belum dirilis atau karya seni produk rahasia.
URL objek yang dihasilkan bersifat sementara dan dicabut ketika diganti atau disetel ulang. Pindahkan aset yang telah ditinjau ke penyimpanan proyek terkontrol, pertahankan master yang dapat diedit, dan tutup tab setelah menangani materi sensitif.
Pertanyaan umum
Apple Touch Icon Generator FAQ
What is the main Apple touch icon size?
A 180×180 PNG is the common modern iPhone touch icon. The ZIP also includes 167×167 and 152×152 variants for established iPad workflows.
Is an Apple touch icon the same as an iOS app icon?
No. A touch icon belongs to a website saved to the Home Screen. A native app icon is configured through Xcode and App Store tooling.
Should the artwork include rounded corners?
Do not bake in a device-specific corner mask. Supply square artwork and let the platform present it.
Can the source have transparency?
Yes, but the generator composites it onto the selected solid background because transparent presentation can vary.
Which fit mode should I use?
Contain preserves the complete artwork with padding. Cover fills the square and may crop the source edges.
Are images uploaded?
No. Decoding, resizing, PNG encoding, ZIP creation, and download occur in the active browser tab.
Do I still need a favicon?
Yes. Touch icons and favicons serve different browser and operating-system contexts, so provide both.
Referensi utama
Dokumentasi platform saat ini
- Apple: Configuring Web Applications
- Apple Human Interface Guidelines: App icons
- MDN: CanvasRenderingContext2D drawImage
Terakhir ditinjau: 20 Oktober 2026. Persyaratan platform dan perubahan alat; memverifikasi aset penting rilis terhadap dokumentasi utama saat ini.