Konversi Gambar

ImageConver · Day 17 · Platform icon guide

iOS App Icon Sizes Guide

Plan iOS and iPadOS app icon assets around Apple’s current 1024×1024 source workflow, system-applied masks, Xcode asset catalogs, and optional layered appearances. Legacy point-size tables still matter when maintaining projects configured for all sizes.

Choose the project context and priority to receive a focused starting workflow.

Jawaban langsung

Apa yang dihasilkan halaman ini dan di mana tempatnya

Plan iOS and iPadOS app icon assets around Apple’s current 1024×1024 source workflow, system-applied masks, Xcode asset catalogs, and optional layered appearances. Legacy point-size tables still matter when maintaining projects configured for all sizes. This guide addresses native iOS and iPadOS app identity. Apple touch icons for websites, watchOS, visionOS, tvOS, macOS, notification artwork inside an app, and App Store promotional graphics have separate workflows.

Icon work is a delivery system, not a single resize. A platform may use the same identity in a store, launcher, notification, settings screen, browser tab, installed web app, shortcut, or operating-system search result. Each context can apply a different mask, density, cache, compositing rule, or validation step. The recommended icon system should therefore be treated as a tested derivative of an editable brand master.

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. 1

    Periksa sumbernya

    Confirm the target platforms, deployment range, Xcode version, and whether the project uses single size or all sizes.

  2. 2

    Pilih pengaturan

    Prepare clean square source artwork without a baked system mask.

  3. 3

    Hasilkan aset

    Configure the AppIcon asset catalog or current Icon Composer workflow.

  4. 4

    Validasi pengiriman

    Inspect generated variants, build warnings, small-context legibility, and App Store submission output.

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

  • Apple tooling and appearance support evolve with Xcode and operating-system releases.
  • A static table cannot describe every platform, extension, or alternate icon configuration.
  • Resizing one image does not replace design review at small visual sizes.
  • Only Xcode and current distribution validation can confirm a project’s exact requirements.

Kasus penggunaan

Dimana halaman ini cocok untuk produksi

Pengiriman produk

Set up a new iOS application icon.

Pekerjaan kompatibilitas

Maintain an older all-sizes asset catalog.

Tinjauan kualitas

Audit iPhone and iPad small-context variants.

Serah terima pengembang

Plan a transition to current layered Apple icon tooling.

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.

Decision framework

Build the icon set from requirements, not habit

Write down the supported operating systems, browser engines, application targets, project tooling, and distribution channels before selecting files. A list copied from an old blog can be internally consistent yet wrong for a current project. Official platform documentation and the project’s own build warnings are the controlling evidence.

Separate master artwork from delivery derivatives. The master remains editable and high resolution; platform files are reproducible outputs. Keep appearance variants and semantic layers distinct when the platform expects them. Do not ask a resize operation to invent foreground, background, monochrome, dark, or tinted design intent.

Use the table as a starting inventory, then remove assets the project genuinely does not consume and add only requirements supported by official documentation or validated target behavior. Every retained asset needs an owner, source, generation method, configuration reference, and test surface.

Run a release audit after integration. Confirm each generated file is present in the built package or deployed location, referenced by the correct metadata, served with the expected MIME type, and visible after a clean installation. Capture screenshots or build evidence for the supported target matrix.

Recheck guidance when platform tooling changes. Icon pipelines are unusually sensitive to new masks, appearance systems, asset-catalog formats, installation criteria, and store validation. Record the review date and do not present historical dimensions as timeless requirements.

ContextStarting assetValidation
Current iOS/iPadOS1024×1024 square source or current layered workflowXcode asset catalog and archive
Legacy notification20pt at @2x and @3xSmall-context legibility
Legacy Settings29pt at @2x and @3xTarget device families
Legacy Home Screen60pt @2x/@3x and iPad variantsBuild warnings and device test

Production checklist

Document the asset inventory and test matrix

Create an inventory before implementation. For each asset, record its platform context, logical purpose, pixel or point dimensions, scale factor, filename, source-art revision, background and alpha policy, configuration reference, and the application or browser that consumes it. This prevents two files with similar dimensions from being treated as interchangeable when their semantics differ.

Define a representative test matrix rather than checking only the developer’s primary device. Include the minimum and maximum supported operating-system versions, relevant density classes, at least one light and dark environment, required appearance or theme variants, and the installation or distribution channel. For web applications, include a clean browser profile and a reinstall after cache changes. For native applications, include a release-style build rather than only an editor preview.

Review small contexts independently. Open exported pixels at 100% scale, place them beside typical neighboring icons, and check silhouette, contrast, edge clarity, and recognition without relying on the app name. Record defects against the editable master so the next iteration changes the design source rather than painting corrections into generated derivatives.

Keep generation reproducible. Save the approved master, generator version or script, settings, official references, review date, and validation evidence together. Checksums can identify the exact files reviewed. If a platform rejects or transforms an asset, preserve the rejection message and resulting presentation because that evidence is more useful than guessing from a generic size list.

Plan maintenance ownership. Someone must recheck platform documentation, build warnings, installation behavior, and store validation when supported targets or tooling change. Retire obsolete files only after proving they are no longer referenced by source code, manifests, asset catalogs, deployment templates, cached application data, or release automation.

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

iOS App Icon Sizes Guide FAQ

What is the current primary iOS icon size?

Apple supports a 1024×1024 source for iOS and iPadOS workflows, with Xcode generating smaller system variants where configured.

Why do old tables list many sizes?

Earlier and compatibility asset catalogs map point sizes and scale factors to separate PNG files for notifications, Settings, Spotlight, Home Screen, and App Store use.

Should the source contain rounded corners?

No. Apple applies platform masks. Pre-masking can create artifacts and incorrect edges.

What are dark and tinted icons?

They are appearance variants supported by current Apple icon workflows. They require intentional design, transparency, and validation rather than automatic recoloring alone.

Is the 180×180 touch icon part of an Xcode app icon?

No. That size commonly refers to a website touch icon, not the native AppIcon asset catalog.

Can I use transparency?

Requirements differ by appearance and tooling. Follow current Apple and Xcode guidance and validate the actual asset catalog.

How do I know the icon set is complete?

Build with the intended Xcode version, resolve asset-catalog warnings, inspect the archive, and test every supported device family and appearance.

Referensi utama

Dokumentasi platform saat ini

  1. Apple: Configuring your app icon using an asset catalog
  2. Apple Human Interface Guidelines: App icons
  3. Apple: Configuring Web Applications

Terakhir ditinjau: 20 Oktober 2026. Persyaratan platform dan perubahan alat; memverifikasi aset penting rilis terhadap dokumentasi utama saat ini.