Ikon Aplikasi vs Favicon: Kapan Menggunakan ICO, PNG, atau SVG

Tidak semua ikon dibuat sama. Ikon aplikasi Windows yang Anda lihat di desktop berbeda dari favicon yang muncul di tab browser, dan keduanya berbeda dari ikon touchscreen yang Anda tap di perangkat mobile. Masing-masing memiliki persyaratan format, ukuran, dan resolusi yang berbeda, dan memilih format yang salah bisa menghasilkan ikon buram, terpotong, atau tidak muncul sama sekali.

Artikel ini menjelaskan empat konteks ikon utama—aplikasi desktop Windows, favicon web, ikon touchscreen mobile, dan ikon platform lintas sistem—dan menjelaskan format mana (ICO, PNG, SVG, atau ICNS) yang terbaik untuk masing-masing. Jika Anda tidak yakin apakah harus membuat file ICO atau PNG untuk proyek Anda, atau bertanya-tanya mengapa Windows memerlukan ICO sementara web menggunakan PNG, panduan ini memberikan jawaban yang jelas dan dapat ditindaklanjuti.

Ikon Aplikasi Windows: Mengapa ICO Masih Penting

Aplikasi desktop Windows telah menggunakan format ICO untuk ikon executable sejak Windows 1.0 pada tahun 1985. Meskipun sistem operasi modern mendukung PNG dan format lain untuk beberapa konteks, ICO tetap menjadi format standar untuk file executable Windows (.exe), shortcut (.lnk), dan ikon folder kustom.

ICO dipilih karena fitur uniknya: kemampuan untuk menyimpan beberapa resolusi dan kedalaman warna dalam satu file. Satu file ICO dapat berisi ukuran 16x16, 32x32, 48x48, dan 256x256, masing-masing dioptimalkan untuk konteks tampilan tertentu. Windows memilih ukuran yang sesuai berdasarkan tempat ikon muncul: ikon kecil 16x16 untuk tampilan daftar di Explorer, 32x32 untuk desktop, 48x48 untuk tampilan ikon besar, dan 256x256 untuk tampilan ekstra besar dan pratinjau thumbnail.

Pendekatan multi-ukuran ini berarti Anda bisa, secara teori, mendesain setiap ukuran secara individual untuk memaksimalkan ketajaman. Pada 256x256, logo Anda mungkin menyertakan detail halus, bayangan, dan gradien. Pada 16x16, detail tersebut tidak dapat dibaca, jadi Anda bisa menyederhanakan desain menjadi bentuk tebal yang tetap jelas pada jumlah piksel minimal. Windows menggunakan ukuran yang tepat untuk setiap konteks, jadi pengguna selalu melihat versi yang paling tajam.

Jika Anda mengembangkan aplikasi Windows atau mengemas software sebagai executable, ICO adalah format yang diperlukan untuk ikon aplikasi. File PNG tidak akan ditampilkan dengan benar sebagai ikon executable. Untuk panduan lengkap tentang membuat ICO multi-ukuran, lihat panduan Windows ICO Multi-Size kami.

Favicon Web: ICO, PNG, atau SVG?

Favicon adalah ikon kecil yang muncul di tab browser, bookmark, dan bilah alamat. Mereka mengidentifikasi situs Anda secara visual dan membantu pengguna menemukan tab Anda di antara lusinan tab terbuka. Favicon secara historis berupa file ICO 16x16, tetapi browser modern mendukung beberapa format dan ukuran, yang menimbulkan pertanyaan: format mana yang harus Anda gunakan?

ICO (kompatibilitas maksimum): File ICO multi-ukuran tetap menjadi pilihan paling aman jika Anda ingin mendukung setiap browser dan setiap konteks favicon. Satu file favicon.ico yang ditempatkan di root situs web Anda akan dikenali oleh setiap browser tanpa tag HTML eksplisit. Sertakan 16x16, 32x32, dan 48x48 untuk mendukung tampilan ukuran ikon standar, bilah tab Retina, dan pintasan Windows. ICO berfungsi di IE11, Edge, Chrome, Firefox, Safari, dan setiap browser utama sejak tahun 2000-an.

PNG (kesederhanaan modern): Browser modern (Chrome, Firefox, Safari, Edge) sepenuhnya mendukung favicon PNG, dan banyak pengembang lebih suka PNG karena kesederhanaannya. Anda dapat menyertakan beberapa deklarasi <link rel="icon"> dengan ukuran berbeda (16x16, 32x32, 180x180 untuk Apple touch icon) dan browser akan memilih ukuran yang sesuai. PNG lebih mudah untuk diedit, didukung secara luas oleh tool desain, dan menghasilkan ukuran file yang lebih kecil dengan kompresi yang baik. Kekurangannya adalah Anda memerlukan tag HTML eksplisit di <head> untuk setiap ukuran, dan browser lama (IE) tidak mendukung PNG untuk favicon.

SVG (masa depan yang dapat diskalakan): SVG favicon adalah ideal secara teoritis: satu file vektor yang diskalakan dengan sempurna ke ukuran berapa pun, menghasilkan ketajaman sempurna pada setiap DPI. Chrome, Firefox, dan Edge mendukung <link rel="icon" type="image/svg+xml" href="/id/favicon.svg">. Masalahnya adalah dukungan tidak universal: Safari di iOS tidak mendukung SVG favicon (sampai Safari 15 di iOS 15), dan beberapa konteks sistem operasi (Windows taskbar, pintasan desktop) tidak merender SVG dengan benar. SVG adalah tambahan yang bagus jika Anda sudah menyediakan fallback ICO atau PNG, tetapi tidak boleh menjadi satu-satunya favicon Anda.

Untuk panduan lengkap tentang menerapkan favicon yang berfungsi di semua browser dan perangkat, baca panduan tag HTML favicon kami.

Ikon Touchscreen Mobile: Apple Touch Icon dan Android

Ikon mobile berfungsi berbeda dari favicon desktop. Ketika pengguna menambahkan situs Anda ke layar home mereka di iOS atau Android, sistem operasi meminta ikon beresolusi tinggi untuk ditampilkan bersama aplikasi native. Ikon ini harus tajam pada layar Retina dan super-Retina, yang berarti ukuran piksel yang jauh lebih besar daripada favicon web.

Apple Touch Icon (iOS, iPadOS): iOS mencari <link rel="apple-touch-icon" href="/id/apple-touch-icon.png"> di HTML Anda. File PNG harus berukuran 180x180 piksel untuk mendukung iPhone dan iPad beresolusi tertinggi. iOS menerapkan efek visual sendiri (sudut membulat, bayangan, gradien glossy opsional), jadi artwork Anda harus berupa persegi datar dengan sudut persegi. Jangan pra-render sudut membulat atau efek; biarkan iOS menambahkannya secara konsisten dengan ikon aplikasi lain. PNG dengan latar belakang transparan juga berfungsi, tetapi iOS akan mengisi transparansi dengan hitam, jadi sebagian besar desainer menggunakan latar belakang berwarna solid.

Android Chrome (Web App Manifest): Android menggunakan file manifest (manifest.json) untuk mendefinisikan ikon aplikasi web. Manifest mencantumkan beberapa ukuran PNG (biasanya 192x192 dan 512x512) dan Android memilih ukuran yang sesuai untuk perangkat dan konteks. Tidak seperti iOS, Android tidak menerapkan efek visual otomatis, jadi Anda memiliki kontrol penuh atas penampilan ikon. Jika Anda ingin sudut membulat atau bayangan, render dalam PNG Anda.

ICO tidak digunakan untuk touch icon mobile. Gunakan PNG berkualitas tinggi dan sertakan ukuran yang cukup besar (180x180 minimum, 512x512 untuk hasil terbaik) untuk menangani layar kepadatan piksel tinggi.