Cara membuat favicon yang tidak buram di layar Retina

Dulu satu favicon.ico kecil sudah cukup untuk seluruh web. Sudah bertahun-tahun tidak lagi begitu, dan menganggapnya masih cukup adalah alasan begitu banyak ikon terlihat buram.

Oleh PulsarKit · Diterbitkan 8 September 2026 · Diperbarui 16 Oktober 2026

Satu file ikon kecil sejak awal tidak akan cukup untuk semua layar

Tab browser, pintasan di layar utama ponsel, dan ikon aplikasi di layar laptop dengan kerapatan piksel tinggi masing-masing meminta ukuran piksel yang berbeda. Satu ikon kecil yang diregangkan agar pas untuk semuanya akan terlihat tajam di salah satu tempat itu dan kurang tajam di tempat lain. File favicon.ico tradisional, yang masih diminta browser dari root situs, tetap menjadi bagian dari jawabannya. Namun file itu dibuat untuk web pada masa ketika resolusi layar jauh lebih rendah daripada sekarang, dan sejak awal tidak dimaksudkan sebagai satu-satunya file yang terlibat.

Mengapa set ikon lengkap terdiri dari begitu banyak file terpisah

Set yang benar, seperti yang dibuat Pembuat favicon dari satu gambar sumber, mencakup beberapa kegunaan sekaligus, bukan sekadar beberapa ukuran untuk kegunaan yang sama. Ada PNG 16 dan 32 piksel untuk tab browser pada kerapatan piksel normal dan tinggi, ikon 180 piksel untuk saat seseorang menambahkan situs ke layar utama iPhone, serta ikon 192 dan 512 piksel yang wajib dicantumkan di manifest progressive web app; tanpa keduanya, aplikasi itu tidak bisa dipasang sama sekali. Setiap ukuran ada karena memang ada yang meminta ukuran itu. Ini bukan pengulangan tanpa alasan. Lewatkan salah satunya, dan tempat yang memakainya akan beralih ke pengganti yang lebih buram, atau tidak menampilkan apa pun.

Satu file yang sengaja tidak dibiarkan transparan

Saat seseorang menambahkan situs ke ponselnya, iOS tidak menempatkan ikon layar utama yang transparan di atas latar belakang yang masuk akal. iOS mengisi setiap area transparan dengan hitam pekat, sehingga logo yang rapi di atas latar belakang transparan berubah menjadi kotak gelap yang jelek begitu muncul di layar utama. Transparansi ikon untuk tempat itu perlu diratakan ke warna latar belakang sungguhan lebih dulu, dengan sengaja, alih-alih dibiarkan transparan seperti ukuran lain dalam set. Semua ikon lain boleh tetap transparan di bagian yang memang transparan pada gambar sumber, karena tab browser atau pintasan desktop menampilkannya dengan benar.

Mengapa sumber vektor menghasilkan ikon 16 piksel yang lebih tajam

Logo yang dibuat sebagai SVG (logo bitmap datar bisa diubah menjadi vektor dengan PNG ke SVG) bisa digambar ulang dari bentuk vektornya pada setiap ukuran target, alih-alih dibuat sekali dalam ukuran besar lalu diperkecil berulang kali untuk setiap varian yang lebih kecil. Perbedaannya paling terlihat pada ukuran terkecil dalam set. Logo yang diperkecil dari satu bitmap induk berukuran besar cenderung menjadi gumpalan tak jelas pada 16 piksel, dan garis tipis serta detail halus menghilang. Versi yang digambar dari jalur vektor pada ukuran kecil yang sama tetap punya garis yang tegas, karena versi itu tidak pernah berupa gambar besar yang diperkecil, melainkan digambar pada ukuran tersebut sejak awal. Itu juga sebabnya satu ikon yang dibuat secara manual diproses lewat SVG ke PNG dengan dimensi piksel yang tepat, bukan lewat alat ubah ukuran gambar. Pada logo dengan tulisan tipis atau garis tepi yang halus, inilah perbedaan antara ikon yang masih bisa dikenali di deretan tab dan noda abu-abu.

Ikon maskable ada karena Android tidak mengikuti bentuk ikon

Android memotong tepi ikon aplikasi yang terpasang mengikuti bentuk apa pun yang dipilih perangkat atau launcher tertentu: lingkaran, persegi bersudut membulat, atau squircle. Hal itu dilakukan tanpa peduli bentuk asli ikon, sehingga ikon persegi biasa bisa kehilangan bagian penting tepat di tepinya, hanya bergantung pada bentuk yang kebetulan diterapkan. Ikon maskable menghindari masalah itu dengan menempatkan seluruh isi pentingnya di dalam kira-kira delapan puluh persen bagian tengah gambar. Dengan begitu tersisa margin aman di setiap tepi, yang boleh dipotong bentuk apa pun tanpa menghilangkan apa pun yang penting dalam desain.

Kesalahan umum: sumber yang terlalu kecil dan set yang tidak pernah ditautkan

Set ikon yang buram jarang disebabkan oleh alat pembuatnya. Setiap ukuran dibuat dari gambar induk 512 piksel, jadi sumber yang lebih kecil akan diregangkan hingga mencapai ukuran itu, dan sumber di bawah sekitar 260 piksel harus diperbesar dua kali lipat atau lebih, sehingga ukuran besar menjadi kurang tajam. Mulailah dari minimal 512 × 512, atau lebih baik dari SVG; sumber di bawah 32 piksel langsung ditolak. Keputusan kedua adalah cara logo yang tidak persegi dijadikan persegi: memotong tepi dari tengah membuat logo tetap besar, tetapi bisa memangkas tulisan yang lebar, sedangkan menampilkan seluruh gambar dan mengisi sisi yang kosong dengan warna membuat semuanya tetap terlihat, dengan konsekuensi logo menjadi lebih kecil. Untuk logo yang jauh lebih lebar daripada tingginya, versi persegi yang hanya berisi simbol biasanya menjadi sumber yang lebih baik daripada logo lengkap beserta tulisannya. Kesalahan ketiga terjadi setelah file dibuat. Delapan file, atau sembilan dengan ikon maskable, diletakkan di root situs, dan tag dari head-snippet.html dimasukkan ke bagian head di setiap halaman; jika file berada di subfolder, ubah nilai href di potongan kode itu agar sesuai, karena kalau tidak, tag akan menunjuk ke file yang tidak ada. Terakhir, periksa ikon 16 piksel di tab browser sungguhan, bukan di penampil gambar: pada ukuran itu garis tepi yang tipis atau logo tulisan berubah menjadi noda abu-abu, dan solusinya adalah logo yang lebih sederhana, bukan ekspor yang lebih tajam.

Alat yang dipakai di artikel ini

Pembuat faviconUbah satu logo menjadi set favicon lengkap: semua ukuran PNG, file ICO berisi beberapa ukuran, manifest, dan tag HTML yang tinggal ditempel ke bagian head.

PNG ke SVGUbah PNG menjadi SVG vektor yang bisa diskalakan, langsung di browser. Cocok untuk logo dan ikon datar dengan sedikit warna, bukan untuk foto.

SVG ke PNGUbah file SVG ke PNG pada skala berapa pun atau ukuran piksel persis, langsung di browser. Skrip dan tautan eksternal dihapus sebelum apa pun digambar.