Panduan Favicon Transparan

Tab browser, bilah bookmark, dan peluncur seluler berada pada latar belakang yang tidak dapat diprediksi — putih, abu-abu tua, wallpaper buram, atau warna merek.

favicon dengan kotak putih yang dipanggang tampak seperti stiker dalam mode gelap. Alfa transparan memungkinkan tampilan chrome UI di sekitar tanda Anda.

Transparansi bukanlah kesia-siaan. Ini adalah bagaimana antarmuka modern memadukan ikon ke dalam desain tab Material, Fluent, dan Safari.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Ekspor logo Anda sebagai PNG-32 dengan alfa, atau SVG tanpa lapisan persegi panjang latar belakang.

Kebanyakan bug kotak putih berasal dari file sumber, bukan konverter favicon. Periksa lapisan Photoshop atau isi Figma sebelum menyalahkan alat tersebut.

Jika Anda harus memulai dari JPG, potong latar belakang secara manual atau terima isian padat — JPG tidak memiliki saluran alfa.

Entri terkompresi PNG di dalam .ico mempertahankan alfa penuh. Entri BMP yang tidak terkompresi di dalam pembuat enkode lama sering kali menurunkan transparansi.

Gunakan generator yang memilih kompresi PNG per frame ketika ukurannya melebihi 64×64. Itu adalah praktik standar pada perkakas tahun 2026.

Verifikasi transparansi dengan membuka .ico pada latar belakang desktop terang dan gelap di pratinjau File Explorer.

Raster ICO bersifat statis — rancang tanda yang terbaca pada tab terang dan gelap tanpa menulis ulang piksel.

SVG dapat beradaptasi: menyematkan <style>@media (prefers-color-scheme: dark) { ... }</style> untuk membalikkan isian atau menukar warna aksen.

Beberapa tim menyediakankan mode gelap SVG ditambah fallback netral .ico untuk klien yang tidak pernah mengambil SVG. Itu mencakup jalur adaptif dan warisan.

Hanya logomark biru: sumber PNG transparan → .ico multi-ukuran → terlihat benar pada tab Safari putih dan tab Firefox gelap.

Tanda kata hitam: tambahkan garis terang halus atau gunakan mode gelap SVG CSS; hitam murni menghilang pada tab gelap.

Logo lencana melingkar: pertahankan bantalan 10% di dalam kanvas persegi sehingga tepi anti-alias tidak terpotong.

Ikon bergaya emoji: warna datar dengan sudut transparan; hindari gradien yang berbanding 16×16.

Apakah setiap browser menghormati ICO alpha? Browser modern melakukannya ketika frame dikompresi PNG.

Apakah transparansi akan merusak kontras dalam hasil penelusuran? Google mungkin menempatkan ikon Anda berwarna putih; tetap menguji keterbacaan.

Bisakah saya menggunakan pendar semi transparan? Cahaya lembut jarang bertahan 16×16 — menyederhanakan efek.

Apakah isian putih baik-baik saja? Hanya jika tanda merek Anda sengaja berupa ubin persegi padat.

Kotak putih setelah ekspor ICO: sumber mengaktifkan lapisan latar belakang, atau alat menggunakan pengkodean BMP. Ekspor ulang PNG-32 dan buat ulang.

Ikon tidak terlihat pada tab gelap: mesin terbang gelap pada latar belakang transparan. Meringankan SVG atau menambahkan goresan halus.

Piksel pinggiran di sekitar logo: masalah alfa yang telah dikalikan sebelumnya — mengekspor ulang dari alat desain dengan alfa standar.

Transparansi dalam Chrome tetapi tidak dalam Edge: Edge menyimpan cache ICO lama. Refresh paksa atau ubah nama file satu kali.

Tanda siluet dengan satu atau dua warna paling bertahan dalam penurunan skala. Bayangkan burung Twitter, bukan tekstur fotografis.

Gaya garis luar memerlukan lebar guratan setidaknya 2 piksel pada ukuran 16×16 di master Anda — guratan yang lebih tipis akan hilang.

Gradien jarang bertahan 16×16; ratakan ke warna merek solid untuk varian favicon meskipun situs web mempertahankan gradien.

Padding: sisakan 10–15% ruang kosong di dalam kanvas persegi agar masker OS tidak memotong sudut.

Uji latar belakang #ffffff dan #1e1e1e di alat pratinjau sebelum peluncuran.

Figma: ekspor PNG pada 512×512 dengan transparansi diaktifkan; nonaktifkan Sertakan isian kotak pembatas.

Photoshop: gunakan Save for Web PNG-24 dengan transparansi; buang ICC jika ukuran file penting.

Ilustrator: ekspor SVG dengan atribut presentasi, lalu sederhanakan dengan SVGO sebelum menggunakan favicon.

Sketsa: pastikan latar belakang Artboard tidak diekspor sebagai lapisan persegi panjang putih.

Ekspor gratis Canva terkadang mengurangi transparansi — verifikasi di Pratinjau pada macOS sebelum memercayai file tersebut.

Ikon tab browser adalah fokus utama, tetapi sumber PNG transparan juga meningkatkan pengomposisian splash PWA di Android.

Beberapa pembaca RSS menampilkan feed favicon pada baris berwarna — campuran transparansi; kotak putih terlihat seperti serangga.

Ekspor PDF dan cetak CSS mengabaikan favicon sepenuhnya. Jangan mengandalkan transparansi favicon untuk pencitraan merek cetak.

Gunakan utilitas pratinjau favicon kami atau kotak-kotak editor gambar apa pun untuk mengenali piksel pinggiran semi-transparan sebelum diterapkan.

Perbesar hingga 400% pada setara 32×32. Lingkaran cahaya abu-abu di sekitar logo berarti latar belakang belum sepenuhnya dihapus.

Ekspor ulang dari vektor ketika lingkaran cahaya masih ada — penghapusan manual di editor raster jarang berskala ke setiap frame ICO.

Logo fotografi jarang berfungsi sebagai favicon bahkan dengan alfa — sederhanakan menjadi monogram atau simbol.

Tepian yang sangat anti-alias pada foto yang sibuk menciptakan lingkaran cahaya yang bising pada ukuran 16×16. Siluet vektor memperbaikinya.

Jika pedoman merek mengharuskan ubin persegi penuh, gunakan desain bebas opasitas daripada melawan transparansi.

Kampanye musiman mungkin menggunakan ikon sementara yang tidak transparan; kembali setelah kampanye untuk menghindari kebingungan pengguna.

Pengecualian adalah merek dagang sah dengan warna latar belakang wajib — ikuti nasihat merek mengenai praktik terbaik transparansi.

Buat halaman pengujian HTML dengan latar belakang terang dan gelap berdampingan; muat aset favicon Anda sebagai tag img besar untuk diperiksa.

Hamparkan render 16×16 pada tangkapan layar tab browser sebenarnya untuk mengetahui masalah kontras lebih awal.

Bagikan tautan halaman pengujian dalam tinjauan desain alih-alih menyediakan lampiran PNG yang buram melalui email.

Ketika transparansi melewati halaman lab, promosikan file yang sama ke produksi tanpa mengekspor ulang.

Simpan halaman lab di wiki internal Anda sehingga kontraktor mengulangi langkah QA yang sama di setiap penugasan.

Perancang loop ketika QA gagal — bug transparansi hampir selalu diperbaiki di sumber, bukan di konverter.

Bandingkan ICO dan PNG secara berdampingan di halaman lab — ketidakcocokan berarti generator mengeluarkan alfa dalam satu format.

Tes ulang setelah setiap perubahan tema OS di macOS dan Windows — pengguna lebih sering beralih ke mode gelap daripada yang diperkirakan tim.

Tambahkan URL halaman lab ke template permintaan penarikan Anda sehingga QA transparansi tidak pernah dilewati secara tidak sengaja.