Pembuat Favicon: ICO, Ikon PNG, dan Manifest

Favicon adalah ikon kecil yang muncul di tab browser, bookmark, riwayat, dan hasil pencarian di samping nama situs Anda. Di HP, versi yang lebih besar muncul di layar utama saat seseorang menyimpan situs Anda. Ikon yang jelas membuat situs mudah ditemukan di antara puluhan tab yang terbuka dan terlihat lebih profesional.

Setiap tempat butuh ukuran dan format berbeda. Browser masih mencari favicon.ico, perangkat Apple memakai PNG 180 px, Android dan aplikasi web yang bisa dipasang membaca ikon dari web manifest, dan mesin pencari lebih suka ikon minimal 48 px.

Ukuran yang dibutuhkan

Ukuran favicon dijelaskan satu baris saja: 16 dan 32 px untuk tab browser, 48 px untuk Windows dan hasil pencarian, 180 px untuk Apple touch icon, 192 dan 512 px untuk Android dan manifest aplikasi web. Generator ini membuat semuanya, plus versi 64, 96, 128, 256, dan 384 px untuk keperluan lain.

Tambahkan logo, idealnya persegi dan minimal 512 × 512 piksel. PNG berlatar transparan atau SVG memberi hasil paling tajam. Pilih latar transparan atau solid, tambahkan padding jika gambar menyentuh tepi, dan bulatkan sudut jika ingin ikon bergaya aplikasi. Pratinjau menampilkan ikon di 16, 32, 48, dan 180 px di latar terang maupun gelap, jadi Anda bisa menilai tampilannya di tab sungguhan.

Masukkan nama aplikasi dan warna tema untuk manifest, lalu tekan Unduh paket favicon. Anda juga bisa mengunduh favicon.ico saja atau PNG 512 px.

Mulai dari PNG

Untuk membuat favicon dari PNG, mulailah dari versi terbesar yang Anda punya. Memperkecil gambar besar menghasilkan ikon kecil yang tajam, sedangkan memperbesar gambar mungil menghasilkan blur. Jika logo Anda lebar, pertimbangkan memakai simbol atau inisialnya saja, karena teks tidak terbaca di 16 px.

favicon.ico

File favicon.ico dibuat dengan konversi PNG ke ICO yang menyimpan gambar 16, 32, dan 48 px dalam satu file. Browser modern dan Windows membaca ikon terkompresi PNG, sehingga file tetap kecil dan tepinya rapi.

Perangkat Apple

Ukuran Apple touch icon adalah 180 × 180 piksel. iOS mengisi area transparan dengan hitam, jadi saat latar Anda transparan, generator otomatis memberi ikon ini latar solid dengan warna tema Anda.

Android dan aplikasi web

Ikon web manifest di site.webmanifest adalah PNG 192 dan 512 px, termasuk versi maskable untuk Android yang memotong ikon menjadi lingkaran atau persegi membulat. Letakkan bagian penting di 80% area tengah ikon agar tidak ada yang terpotong.

Ekstrak paket dan unggah file ke folder root situs, tempat yang sama dengan halaman utama. Lalu salin cuplikan HTML ke bagian head setiap halaman, atau ke template situs. Cuplikan itu menautkan ICO, PNG 16 dan 32 px, ikon Apple, dan manifest.

Pembuat situs dan CMS sering punya setelan ikon situs sendiri. Dalam hal ini, unggah PNG 512 px di sana, dan platform akan membuat ukuran lainnya sendiri.

Pemecahan masalah

Jika favicon tidak muncul setelah diunggah, browser mungkin memakai versi cache. Buka URL ikon secara langsung, lalu muat ulang halaman dengan hard refresh, atau coba jendela pribadi. Mesin pencari bisa butuh berhari-hari atau berminggu-minggu untuk memperbarui ikon di hasil pencarian.

Sederhanakan. Di 16 × 16 piksel, garis halus dan teks kecil menghilang. Pakai simbol tegas, satu huruf, atau versi sederhana logo Anda, dengan kontras yang kuat. Cek pratinjau terang dan gelap: logo gelap di latar transparan bisa lenyap di tema browser gelap, alasan bagus untuk menambahkan latar solid atau garis tepi terang.

Konsistensi juga penting. Pakai warna yang sama dengan brand Anda, yang bisa diambil dengan alat ambil warna kami, dan jaga ikon tetap dikenali di semua ukuran.

Gambar diproses di browser dan tidak pernah diunggah. File SVG dibersihkan dari script dan referensi eksternal sebelum dirender. Input PNG, JPG, WebP, GIF, dan SVG didukung. Alat ini gratis, tanpa batas, dan tidak memakai kredit EnhancerPro.

Langkah berikutnya

Jika logo Anda hanya ada sebagai gambar piksel, alat ubah gambar ke SVG kami bisa membuat versi vektornya, dan alat SVG ke PNG kami mengekspor logo vektor di ukuran apa pun.

Tab browser

Browser desktop biasanya menampilkan ikon 16 atau 32 px di tab, dan versi 32 px di layar beresolusi tinggi. Chrome dan Edge juga memakai ikon PNG yang lebih besar untuk pintasan dan halaman tab baru. Karena ukurannya mungil, cek pratinjau 16 px dengan teliti; jika ikon tampak keruh, sederhanakan gambarnya atau tambah sedikit padding.

Hasil pencarian

Mesin pencari menampilkan favicon di samping situs Anda di hasil pencarian seluler dan desktop. Mereka lebih suka ikon persegi berukuran kelipatan 48 px yang bisa dijangkau crawler. Menautkan ikon di head halaman utama, seperti di cuplikan yang dihasilkan, adalah cara standar agar ikon mudah ditemukan.

Layar utama

Saat orang menambahkan situs Anda ke layar utama HP, iPhone memakai Apple touch icon dan HP Android memakai ikon dari manifest. Keduanya paling bagus dengan latar solid dan sedikit padding, agar simbol tidak menyentuh sudut membulat yang ditambahkan sistem.

Mode gelap

Banyak orang memakai tema browser gelap. Logo hitam di latar transparan menghilang di sana. Pratinjau gelap di alat ini langsung menunjukkannya. Warna latar solid, garis tepi terang, atau versi logo dua warna menjaga ikon tetap terlihat di mana saja.

Memperbarui ikon yang sudah ada

Saat mengganti favicon, pertahankan nama file agar tautan yang ada tetap berfungsi. Browser menyimpan cache ikon dengan agresif, jadi ikon baru mungkin butuh waktu untuk muncul bagi pengunjung lama. Menambahkan query versi, misalnya favicon.ico?v=2, ke tautan di HTML memaksa browser mengambil file baru.

Daftar cek sebelum publikasi

Sebelum publikasi, cek empat hal. File favicon.ico terbuka di browser pada domain-anda/favicon.ico. Cuplikan HTML ada di head halaman utama. Ikon Apple punya latar solid dan terlihat bagus saat situs ditambahkan ke layar utama iPhone. Nama dan warna tema di manifest sesuai brand Anda. Dengan semua itu, ikon akan tampil konsisten di tab, bookmark, hasil pencarian, dan layar utama, dan pengunjung langsung mengenali situs Anda.

Menyimpan file sumber

Simpan logo asli dan ZIP bersama di proyek Anda. Saat nanti mengganti warna atau mendesain ulang logo, Anda bisa membuat ulang set lengkapnya dalam semenit dengan setelan yang sama, dan setiap ukuran tetap konsisten. Catat juga warna tema yang dipakai, agar manifest dan ikon kembali sesuai brand. Folder rapi berisi logo, setelan, dan file hasil menghemat waktu siapa pun yang mengelola situs setelah Anda, termasuk diri Anda sendiri di masa depan.