Dari logo AI jadi ikon aplikasi, favicon, dan kit merek

Deskripsikan logonya, pilih satu dari empat ide, lalu sempurnakan dengan kata-kata. Vektorisasi jadi SVG, lalu buat ikon aplikasi, paket favicon, dan ikon PWA dari satu file itu, atau ambil semuanya sekaligus sebagai kit merek: favicon, ikon aplikasi, aset Xcode dan Android, PNG hingga 2.048 px, dan SVG yang dioptimalkan, semuanya dibuat dari sumber yang sama dengan nama dan warna yang sama.

Kenapa mulai dari logo vektor?

Setiap file yang dipakai sebuah merek, dari ikon tab browser 16 px sampai gambar app store 1.024 px, sebaiknya berasal dari satu sumber. Kalau sumbernya PNG, setiap ekspor hanyalah pengubahan ukuran piksel: ukuran kecil jadi buram, ukuran besar tetap lembek. Kalau sumbernya SVG yang tersusun dari path, setiap ukuran digambar ulang dari awal. Langkah-langkah di bawah menjadikan satu SVG sebagai pusat dan membuat semua yang lain darinya.

Salah satu contoh logo kami, lalu ikon iOS, ikon adaptif Android, dan favicon yang dibuat alat ekspor kami dari SVG-nya. Favicon ditampilkan diperbesar; di 32 px, setiap piksel berarti.

Langkah 1: deskripsikan logonya dan pilih ide

Buka pembuat logo AI dan tulis apa yang harus ditampilkan logo: "burung hantu yang tersusun dari lingkaran dan segitiga, untuk aplikasi belajar, warna indigo dan kuning amber". Tambahkan nama merek kalau logonya harus memuat nama itu. Pilih chip gaya kalau kamu sudah tahu jenis logo yang kamu mau; panduan gaya logo menjelaskan masing-masing. Setiap kali dikirim, kamu mendapat empat ide, dan harganya sudah tertera di tombol lebih dulu.

Langkah 2: sempurnakan satu ide dengan kata-kata

Pilih ide yang paling mendekati keinginanmu, lalu tulis apa yang mau diubah: "buat huruf R lebih tebal", "kurangi bulunya", "pindahkan matahari ke atas puncak". Penyempurnaan mempertahankan bagian logo yang lain. Lebih baik satu atau dua perubahan yang jelas per penyempurnaan daripada daftar sepuluh perubahan.

Langkah 3: vektorisasi

Pilih Vektorisasi pada logo yang kamu pilih. Logo itu di-tracing jadi SVG dengan setiap warna sebagai path-nya sendiri, dan kamu bisa membandingkannya dengan aslinya sebelum dipakai. Buka di editor SVG untuk mengganti warna sebagian, menghapus bentuk yang nyasar, atau mengubah jarak huruf pada nama.

Cek tiga hal sebelum lanjut. Di ukuran kecil, apakah logonya masih terbaca? Apakah ada bentuk atau huruf yang bersentuhan padahal seharusnya tidak? Dan apakah warnanya persis seperti yang kamu mau? Memperbaikinya di SVG sekarang berarti memperbaiki setiap file yang dibuat darinya.

Langkah 4: buat ikon aplikasi

Pembuat ikon aplikasi membuat dari SVG:

Android: PNG per kepadatan layar dari 48 sampai 192 px, gambar Play Store 512 px, dan XML ikon adaptif dengan foreground di dalam area aman serta layer monokrom untuk ikon bertema;
iOS: AppIcon.appiconset berisi satu gambar 1.024 px yang tidak transparan untuk Xcode.

Pilih warna latar dan padding di sekitar logo. Logo dengan ruang transparan di sekelilingnya membuat ikon monokrom Android punya bentuk yang sebenarnya. Ikon aplikasi Android dan iOS dari satu gambar membahas langkah impornya dan hal yang perlu dicek di perangkat.

Langkah 5: buat favicon dan ikon PWA

Pembuat favicon membuat favicon.ico (16, 32, dan 48 px dalam satu file), favicon.svg kalau artwork-nya berupa path vektor yang bersih, PNG 16 dan 32 px, Apple touch icon 180 px, ikon 192 dan 512 px beserta versi maskable-nya, site.webmanifest, dan HTML untuk ditempel ke <head> halamanmu. File mana yang dipakai browser, dan kenapa favicon tetap butuh ICO, dijelaskan di favicon SVG vs PNG vs ICO; zona aman maskable ada di ikon maskable PWA.

Atau ambil semuanya sekaligus: kit merek

Kit merek menjalankan alat ekspor yang sama pada SVG yang sama dengan satu set pengaturan merek (nama, nama pendek, warna tema, warna latar, dan padding) lalu menaruh hasilnya dalam satu ZIP:

Folder	Isi
`favicon/`	paket favicon dan PWA
`app-icons/`	set ikon aplikasi Android dan iOS
`ios/`	image set Xcode untuk memakai logo di dalam aplikasi
`android/`	VectorDrawable untuk memakai logo di dalam aplikasi
`png/`	PNG transparan, sisi terpanjang 256, 512, 1.024, dan 2.048 px
`svg/`	SVG yang dioptimalkan dan file asli dengan presisi penuh

Setiap folder berisi persis apa yang dibuat alat terpisahnya dari input yang sama, jadi kamu bisa mulai dengan kit lalu nanti membuat ulang satu bagian saja secara terpisah. Harga kit ditampilkan sebelum kamu mengunduhnya.

Sebelum peluncuran

Cari nama dan logo yang mirip di database merek dagang setiap negara tempat kamu berjualan. Logo hasil AI memang baru, tapi tidak ada yang mengeceknya terhadap merek yang sudah terdaftar. Simpan SVG sebagai file induk, dan buat ukuran baru dari SVG itu, jangan pernah dari PNG.