Pembuat Favicon
Favicon butuh beberapa ukuran: 16, 32, dan 48 px untuk browser, 180 px untuk perangkat Apple, serta 192 dan 512 px untuk ikon aplikasi web. Alat ini membuat semuanya plus favicon.ico multi-ukuran, tanpa unggah.
Cara memakai
- Pilih Teks atau emoji lalu ketik satu sampai tiga karakter, atau pilih Gambar dan masukkan logo (maksimal 50 MB). Gambar yang tidak persegi dipotong dari tengah.
- Pilih warna latar, warna teks, dan bentuk. Centang Latar transparan kalau ingin sudut tembus pandang. Ikon Apple selalu memakai latar penuh.
- Unduh setiap file lewat tombolnya, lalu salin tag link ke bagian head halaman dan isi manifest ke file bernama site.webmanifest. Taruh semua file di folder akar situs Anda.
Cara menghitung
Setiap ukuran digambar di kanvasnya sendiri. Gambar besar diperkecil setengah demi setengah sebelum diubah ke ukuran akhir, supaya garis tipis tetap terbaca di 16 px. Teks diletakkan di tengah berdasarkan tinggi yang diukur, dan otomatis diperkecil kalau tidak muat.
File favicon.ico disusun langsung oleh halaman ini, byte demi byte: header 6 byte, satu entri 16 byte untuk tiap ukuran, lalu file PNG-nya sendiri. Browser modern dan Windows bisa membaca PNG di dalam ICO, sehingga satu file sudah mencakup ukuran 16, 32, dan 48 px.
Tidak ada yang dikirim ke server. Gambar Anda dibaca oleh browser, ikon hanya ada di tab ini, dan langsung tersimpan ke perangkat Anda saat menekan Unduh.
Ukuran mana dipakai di mana
| File | Ukuran (px) | Dipakai untuk |
|---|---|---|
| favicon.ico | 16, 32, 48 | Tab browser, browser lama, Windows |
| favicon-32x32.png | 32 | Tab dan bookmark di layar berkerapatan tinggi |
| apple-touch-icon.png | 180 | Layar utama iPhone dan iPad |
| android-chrome-192x192.png | 192 | Layar utama Android |
| android-chrome-512x512.png | 512 | Layar pembuka Android dan aplikasi yang bisa diinstal |
Di mana menaruh file
Unggah semua file ke folder teratas situs Anda, sehingga situsanda.com/favicon.ico langsung membuka ikonnya. Browser akan meminta /favicon.ico dengan sendirinya walaupun tidak ada tag. Setelah favicon diganti, tab bisa masih menampilkan ikon lama untuk sementara karena browser menyimpannya di cache. Buka alamat ikon secara langsung lalu muat ulang untuk mengecek.
Pertanyaan umum
Apakah logo saya diunggah?
Tidak. Gambar digambar dan dikodekan di dalam tab browser ini. Tidak ada unggahan, tidak perlu akun, dan tidak ada salinan yang disimpan di tempat lain.
File mana yang benar-benar saya perlukan?
Satu favicon.ico di folder akar situs sudah cukup untuk hampir semua browser. Tambahkan PNG 32 px, Apple touch icon 180 px, serta ikon 192 dan 512 px supaya tab, bookmark, layar utama iPhone, dan instalasi di Android ikut tertangani.
Kenapa ikon Apple tidak bulat atau transparan?
iOS membulatkan sudutnya sendiri dan menampilkan area transparan sebagai hitam. Karena itu ikon 180 px selalu berbentuk persegi penuh dengan latar solid agar terlihat rapi di layar utama.
Gambar seperti apa yang sebaiknya saya pakai?
PNG persegi minimal 512 x 512 piksel dengan logo di tengah dan sedikit ruang di sekelilingnya. Gambar yang terlalu detail sulit dibaca di 16 px, jadi tanda sederhana atau satu huruf hasilnya paling bagus.
Kenapa emoji saya terlihat berbeda di perangkat lain?
Emoji digambar dengan font di perangkat Anda sendiri, jadi ikon memakai gaya emoji sistem Anda. Setelah disimpan, PNG-nya tidak berubah lagi, sehingga semua pengunjung melihat gambar yang sama.