Pembuat Favicon

Isi favicons.zip

Unggah satu gambar, dan generator membuat semua file yang dibutuhkan website masa kini, langsung di browser Anda:

File	Ukuran	Dipakai oleh
favicon.ico	16, 32, dan 48 px dalam satu file	Tab browser, bookmark, Windows, dan alat apa pun yang meminta /favicon.ico
favicon-16x16.png	16×16	Tab di layar biasa
favicon-32x32.png	32×32	Tab di layar berdensitas tinggi, pintasan
favicon-48x48.png	48×48	Hasil pencarian Google, pintasan desktop
apple-touch-icon.png	180×180	"Tambahkan ke Layar Utama" di iPhone dan iPad
android-chrome-192x192.png	192×192	Layar utama Android
android-chrome-512x512.png	512×512	Situs yang diinstal sebagai aplikasi (PWA) dan layar pembukanya
site.webmanifest	—	Memberi tahu Android/Chrome lokasi dua ikon besar
README-favicon.html	—	Tag HTML untuk ditempel

Gambar sumber yang paling cocok

• Persegi, sederhana, tegas. Di 16 px Anda hanya punya 256 piksel. Logo lengkap dengan slogan jadi noda; satu huruf atau simbol tetap terbaca. Banyak brand memakai versi logo yang disederhanakan khusus untuk favicon.
• Minimal 512×512. Ikon terbesar berukuran 512 px, jadi sumber yang lebih kecil akan diperbesar dan tampak buram. Logo SVG paling ideal — dirender dalam resolusi tinggi sebelum diperkecil.
• PNG transparan atau SVG. Transparansi dipertahankan di .ico dan PNG kecil, sehingga ikon tampak rapi di tema browser terang maupun gelap.
• Tidak persegi? Gambar dimasukkan ke dalam persegi tanpa dipotong, dengan ruang transparan di sisi-sisinya. Jika ingin memenuhi persegi, potong dulu atau buat versi bulat dengan Potong Lingkaran.

Latar ikon Apple touch

iOS tidak mendukung transparansi pada ikon layar utama — area transparan berubah hitam. Karena itu apple-touch-icon.png (180×180) selalu diberi latar penuh. Bawaannya putih; gunakan kolom warna di samping area unggah untuk memasang warna brand Anda (color picker bisa mengambilnya dari logo). Ukuran lainnya tetap transparan.

Tempat menaruh file

1. Ekstrak lalu unggah semua file ke root situs Anda, sehingga https://situsanda.com/favicon.ico membuka ikon tersebut.
2. Tempel tag dari README-favicon.html ke dalam <head> setiap halaman (atau template header tema Anda):

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

3. Jika situs berada di subfolder, sesuaikan path-nya.

Di WordPress, Tampilan → Sesuaikan → Identitas Situs → Ikon Situs mengurus ini dengan satu gambar 512×512 — pakai android-chrome-512x512.png. Blogger, Shopify, Wix, dan Squarespace juga punya kolom "favicon" serupa.

site.webmanifest yang disertakan hanya mencantumkan ikon. Jika ingin pengunjung bisa menginstal situs Anda sebagai aplikasi, tambahkan name, short_name, theme_color, background_color, dan "display": "standalone".

"Favicon sudah diganti, tapi yang lama masih muncul"

Favicon di-cache lebih bandel daripada hampir apa pun di sebuah situs.

• Buka https://situsanda.com/favicon.ico secara langsung lalu muat ulang paksa (Ctrl + F5, atau Cmd + Shift + R di Mac).
• Tambahkan versi pada tautan, misalnya href="/favicon.ico?v=2", agar browser menganggapnya file baru.
• Bersihkan cache CDN atau plugin cache jika Anda memakainya.
• Bookmark dan pintasan layar utama tetap memakai ikon lama sampai dibuat ulang.
• Google baru memperbarui ikon di hasil pencarian setelah merayapi ulang halaman beranda Anda, yang bisa memakan waktu berhari-hari hingga berminggu-minggu. Google meminta ikon persegi dengan sisi kelipatan 48 px — PNG 48×48 dan .ico sudah memenuhinya.

Alat terkait

• Hapus latar foto sebelum dijadikan ikon: Hapus Background.
• Logo berformat WebP? Ubah ke PNG jika aplikasi Anda tidak bisa membukanya.
• Butuh gambar 512×512 biasa untuk toko atau profil? Ubah ukuran ke 512×512.