Cara menggunakan Pembuat Favicon
- Pilih Teks / emoji lalu ketik huruf atau pilih emoji, atau ganti ke Gambar dan unggah logomu (SVG atau PNG persegi minimal 512 px paling bagus).
- Atur warna, ukuran teks, padding, dan kelengkungan sudut sambil melihat pratinjau tab browser dalam ukuran asli 16 px.
- Masukkan nama situs dan warna tema untuk web manifest.
- Klik Unduh semua (ZIP), unggah file ke folder root situsmu, lalu tempel cuplikan HTML ke dalam
<head>. Di Webflow, unggah favicon 32×32 dan webclip 256×256 di Site settings saja.
Apa itu favicon?
Favicon adalah ikon kecil yang ditampilkan browser di tab, bookmark, dan riwayat, serta yang ditampilkan Google di samping nama situsmu pada hasil pencarian mobile dan desktop. Ponsel juga memakai versi yang lebih besar saat seseorang menambahkan situsmu ke layar utama. Set lengkap saat ini cukup kecil: satu file ICO untuk permintaan lama dan default /favicon.ico, PNG untuk browser modern, Apple touch icon, dua ikon Android/PWA yang dirujuk dari web app manifest, dan SVG jika diperlukan.
Apa saja yang dibuat generator ini
| File | Ukuran | Digunakan oleh |
|---|---|---|
favicon.ico | 16, 32, 48 px dalam satu file | Semua browser, pintasan Windows, dan alat yang meminta /favicon.ico langsung |
favicon-32x32.png | 32 × 32 | Tab browser modern; ukuran yang diminta Webflow |
apple-touch-icon.png | 180 × 180 | Layar utama iPhone/iPad dan Safari |
android-chrome-192x192.png, -512x512.png | 192, 512 | Layar utama Android, instalasi PWA, dan splash screen |
webclip-256x256.png | 256 × 256 | Pengaturan Webclip di Webflow |
site.webmanifest | JSON | Nama, warna, dan daftar ikon untuk situs yang bisa diinstal |
File ICO dibuat langsung di browser kamu: header dan direktori ICO kecil diikuti tiga gambar terkompresi PNG, format yang dibaca oleh setiap browser dan versi Windows saat ini. Tidak ada yang diunggah ke server.
Praktik terbaik untuk favicon
- Desain untuk 16 px. Detail halus dan kata panjang akan hilang di ukuran tab. Satu huruf tebal, tanda sederhana, atau emoji jauh lebih terbaca dibanding logo lengkap dengan tagline.
- Apple touch icon harus tidak transparan. iOS membulatkan sudutnya sendiri dan mengisi piksel transparan dengan warna hitam, jadi alat ini selalu mengekspor ikon 180 px (dan webclip Webflow) sebagai persegi penuh dengan latar belakang solid.
- Cek mode gelap. Logo gelap di latar transparan akan hilang di tab browser gelap. Pratinjau menampilkan kedua tema. Tambahkan warna latar atau padding jika perlu.
- Google Search membutuhkan favicon persegi yang bisa di-crawl dan menyarankan ukuran lebih besar dari 48×48 px, itulah sebabnya cuplikan juga menautkan PNG 192 px. Perubahan bisa memerlukan waktu beberapa hari untuk muncul di hasil pencarian.
- Caching: browser menyimpan cache favicon dengan agresif. Jika kamu mengganti favicon, uji di jendela privat atau tambahkan parameter versi seperti
/favicon.ico?v=2.
Menambahkan favicon di Webflow
Buka Site settings → General lalu gulir ke Favicon & Webclip. Unggah gambar 32×32 px sebagai favicon dan gambar 256×256 px sebagai webclip (dipakai sebagai Apple touch icon), simpan, lalu publikasikan situs. Webflow otomatis membuat tag <link>, jadi kamu tidak perlu cuplikan HTML atau manifest kecuali menambahkannya lewat custom code. Untuk memeriksa hasil yang sudah tayang, Meta Tag Checker melaporkan tag favicon dan Apple touch icon.
Juga dicari sebagai: favicon, generator favicon, favicon.ico, konverter ico, png ke ico, apple touch icon, site.webmanifest, favicon emoji.
Tool yang cocok dipakai bersama Pembuat Favicon
- Generator PWA Manifest — Jadikan website apa pun PWA yang bisa diinstal.
- Pengubah Ukuran Gambar — Ubah ukuran foto ke dimensi piksel atau persentase tertentu, crop agar pas dengan ukuran media sosial, atau muatkan gambar ke dalam bingkai dengan warna latar — semuanya diproses langsung di browser kamu.
- Generator OG Image — Buat gambar preview tautan yang rapi untuk Facebook, LinkedIn, X, Slack, dan WhatsApp dalam hitungan detik.
- Generator Meta Tag — Isi satu formulir dan dapatkan <head> yang lengkap dan valid: title, description, canonical, robots, Open Graph, kartu X/Twitter, warna tema, dan ikon, lengkap dengan pratinjau langsung dan output khusus Webflow.
Pertanyaan yang sering diajukan
Berapa ukuran favicon yang ideal?
favicon.ico 48×48 (atau multi-ukuran 16/32/48), PNG 32×32, Apple touch icon 180×180, serta PNG 192×192 dan 512×512 untuk Android. Generator ini membuat semuanya dari satu sumber.Apakah saya masih perlu file favicon.ico?
/favicon.ico dari root situs meski tidak ada tag <link>, jadi menyimpannya mencegah error 404 dan ikon yang hilang.Ukuran favicon apa yang dibutuhkan Webflow?
favicon-32x32.png dan webclip-256x256.png dari file ZIP.Bisakah saya memakai emoji sebagai favicon?
Kenapa favicon baru saya belum muncul?
?v=2) ke URL ikon. Google Search mungkin butuh beberapa hari atau minggu untuk meng-crawl ulang.