Generator favicon: favicon.ico, ikon Apple dan Android

Cara memakai

Pilih Ikon dari: Sebuah gambar, atau Huruf atau emoji di atas warna.
Pilih gambarnya, atau ketik Huruf atau emoji. Atur Warna latar dan Warna huruf.
Atur Warna tema dan Nama situs, lalu klik Buat ikon.
Unduh ZIP. Letakkan berkasnya di folder paling atas situs Anda, dan tempelkan Tag HTML ke bagian head setiap halaman.

Berkas dan ukurannya

favicon.ico memuat tiga gambar, berukuran 16, 32 dan 48 piksel, sehingga tab peramban, penanda dan Windows masing-masing menemukan ukuran yang pas. apple-touch-icon.png berukuran 180 piksel untuk layar utama iPhone atau iPad. android-chrome-192x192.png dan android-chrome-512x512.png adalah ikon Android yang tercantum di manifes. site.webmanifest menamai aplikasi dan memberi warnanya.

Transparansi dan latar belakang

Favicon mempertahankan area transparannya, sehingga logo berada di atas warna apa pun yang ditampilkan peramban. Ikon Apple dan Android diisi dengan warna latar, karena sudut transparan pada ikon Apple touch tampak hitam di iPhone dan iPad.

Ke mana berkas-berkas itu pergi

Letakkan berkasnya di folder paling atas situs web Anda, agar alamat /favicon.ico dan /site.webmanifest berfungsi. Peramban menyimpan ikon di cache dalam waktu lama: setelah perubahan, tambahkan nomor versi pada tautan, atau hapus cache, untuk melihat ikon yang baru.

Contoh: huruf FT di atas biru tua

Pilih Huruf atau emoji di atas warna, ketik FT dan pertahankan latar biru tua. Alat menggambar huruf di tengah persegi membulat, dan menyesuaikannya dengan persegi, sehingga tetap terbaca bahkan pada favicon 16 piksel.

Pertanyaan yang sering diajukan

Apakah gambar saya diunggah saat saya membuat favicon?

Tidak. Ikon digambar di peramban Anda dan dikemas ke berkas ZIP di perangkat Anda. Anda bisa memeriksanya dengan mematikan koneksi internet setelah halaman dimuat, lalu membuat satu set ikon.

Berkas mana yang dipakai peramban untuk ikon tab?

Peramban memakai favicon.ico, atau tag tautan di halaman yang mengarah ke berkas PNG atau SVG. Tag yang dibuat alat ini menyebut favicon.ico dan ikon Apple, sehingga setiap peramban menemukan ikon dengan ukuran yang sesuai.

Mengapa favicon saya tampak buram pada 16 piksel?

Ikon kecil hanya memiliki sedikit piksel, sehingga garis halus dan huruf kecil menjadi buram. Gunakan bentuk sederhana dengan goresan tebal, atau dua huruf paling banyak, dan periksa gambar 16 dan 32 piksel dalam berkas ICO.

Mengapa ikon Apple memiliki warna latar?

Ikon Apple touch dengan sudut transparan menampilkan sudut itu hitam di iPhone dan iPad. Alat mengisi seluruh persegi dengan warna latar yang Anda pilih.

Apa yang masuk ke bagian head halaman?

Tempelkan empat baris dari kotak Tag HTML ke elemen head setiap halaman. Baris itu menautkan favicon.ico, ikon Apple, manifes dan warna tema.

Bagaimana manifes aplikasi web dipakai?

Letakkan site.webmanifest di folder paling atas situs Anda. Peramban membacanya saat pengunjung memasang situs sebagai aplikasi; manifes menamai aplikasi, memberi nama pendek dan warnanya, serta mencantumkan dua ikon Android.

Sumber

Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.