Generator favicon
Ubah gambar, SVG, huruf, atau emoji menjadi favicon.ico, setiap ukuran ikon PNG, ikon sentuh Apple, dan manifes aplikasi web, semuanya dalam satu ZIP. Gratis, dan berkas tidak pernah meninggalkan perangkat Anda.
Pratinjau
- 16
- 32
- 48 px
Tab peramban
Layar beranda: iPhone dan Android
Tambahkan favicon ke situs Anda
Unggah berkas dari ZIP ke folder ikon Anda, lalu tempelkan tag ini di dalam elemen head pada setiap halaman. Tag ini mengikuti folder, nama, dan warna tema yang Anda tetapkan.
Cara kerja
Generator favicon membuat ikon kecil yang ditampilkan oleh peramban, hasil pencarian, dan ponsel untuk sebuah situs web. Alat ini menghasilkan favicon.ico dalam beberapa ukuran (16, 32, dan 48 piksel), ikon PNG dari 16 hingga 512 piksel, ikon sentuh Apple 180 piksel, ikon maskable untuk Android, serta site.webmanifest dari gambar, SVG, huruf, atau emoji Anda. Semuanya dibuat di peramban Anda, beserta tag HTML untuk ditempelkan ke halaman situs.
- Pilih sumber
Pilih gambar atau SVG, atau ketik huruf maupun emoji. Setiap pratinjau diperbarui secara langsung.
- Sesuaikan gaya ikon
Atur latar belakang, radius sudut, dan jarak tepi, lalu periksa pratinjau tab peramban dan layar beranda.
- Unduh dan tambahkan
Buat paket, unggah berkas ke situs Anda, dan tempelkan tag HTML ke dalam elemen head halaman Anda.
Isi paket
| File | Piksel | Digunakan untuk |
|---|---|---|
| favicon.ico | 16, 32, 48 | Tab peramban dan markah buku. Peramban juga meminta /favicon.ico secara otomatis. |
| favicon-16x16.png, favicon-32x32.png, favicon-48x48.png | 16, 32, 48 | Kolom ikon situs pada tema dan pembuat situs yang memerlukan berkas PNG |
| favicon-96x96.png | 96 | Hasil pencarian Google dan layar kepadatan tinggi |
| apple-touch-icon.png | 180 | Layar beranda iPhone dan iPad |
| icon-192.png, icon-512.png | 192, 512 | Layar beranda Android dan aplikasi web terinstal |
| icon-maskable-192.png, icon-maskable-512.png | 192, 512 | Peluncur Android yang memotong ikon menjadi lingkaran atau bentuk lain |
| favicon.svg | Apa pun | Ikon tab yang tetap tajam di setiap ukuran pada peramban modern. Disertakan jika Anda memulai dari SVG. |
| site.webmanifest | Teks | Nama aplikasi, warna, dan daftar ikon aplikasi |
| favicon-tags.html | Teks | Tag HTML untuk ditempelkan di dalam head |
Setiap ukuran digambar dari desain 512 piksel yang sama dan diperkecil secara bertahap, sehingga ikon kecil tetap halus. File ICO berisi gambar PNG, yang dapat dibaca oleh semua peramban terkini dan Windows.
Ikon maskable dan zona aman
Android memotong ikon aplikasi menjadi lingkaran, persegi bersudut tumpul, atau bentuk lain yang dipilih oleh pembuat ponsel. Ikon maskable mengisi seluruh persegi dengan latar belakangnya dan menjaga logo tetap berada di dalam zona aman: sebuah lingkaran terpusat dengan diameter 80% dari ikon. Pengaturan ukuran logo akan mengubah skala logo dalam ikon maskable; pada 56% atau kurang, bahkan logo berbentuk persegi akan tetap berada sepenuhnya di dalam lingkaran tersebut.
Mengapa ikon Apple memiliki latar belakang solid
iPhone dan iPad membulatkan sudut apple-touch-icon secara mandiri dan menampilkan bagian transparannya sebagai warna hitam. Oleh karena itu, ikon Apple berupa persegi penuh dengan warna solid: warna latar belakang Anda, atau latar belakang ikon aplikasi yang Anda pilih saat latar belakang transparan.
Gambar Anda tetap berada di perangkat ini
Ikon, manifes, dan ZIP dibuat di peramban Anda. Tidak ada yang diunggah, serta tidak ada akun, tanda air, maupun batasan.
Pertanyaan yang sering diajukan
Ukuran favicon apa saja yang Anda perlukan untuk situs web?
Peramban menggunakan ikon 16 dan 32 piksel untuk tab dan markah buku; keduanya disimpan dalam favicon.ico bersama versi 48 piksel. Tambahkan PNG 96 piksel untuk Google Search, apple-touch-icon 180 piksel untuk iPhone dan iPad, serta ikon 192 dan 512 piksel dalam manifes aplikasi web untuk Android dan aplikasi web terpasang, idealnya juga dalam versi maskable. Generator ini membuat semuanya dalam satu ZIP.
Bagaimana cara menambahkan favicon ke HTML situs web Anda?
Unggah file dari ZIP ke folder akar situs atau folder yang Anda tentukan di alat ini. Lalu, tempelkan tag dari kotak HTML di halaman ini ke dalam elemen head setiap halaman: tautan ke favicon.ico, PNG 96 piksel, apple-touch-icon.png, site.webmanifest, serta tag meta theme-color. Tag yang sama juga ada di favicon-tags.html dalam ZIP.
Bisakah Anda membuat favicon dari emoji?
Ya. Pilih Emoji lalu ketik atau tempelkan satu emoji. Alat ini menggambarnya secara terpusat pada setiap ukuran, dengan latar belakang transparan atau berwarna. Alat ini menggunakan fon emoji perangkat Anda, sehingga tampilannya sesuai dengan yang terlihat di layar Anda, dan ikon yang diunduh mempertahankan tampilan tersebut di setiap perangkat.
Apakah gambar yang Anda unggah diproses secara privat di alat ini?
Ya. Gambar dibaca dan digambar di peramban Anda, begitu pula ikon dan file ZIP. Tidak ada yang diunggah ke server, sehingga logo yang belum dipublikasikan tetap berada di perangkat Anda.
Apa batasan generator favicon ini?
Alat ini membuat satu desain untuk semua ukuran, sehingga tidak menambahkan karya seni terpisah untuk 16 piksel, ikon mode gelap, atau favicon animasi. Emoji serta font Serif, Monospace, dan System menggunakan font pada perangkat Anda, sehingga tampilannya dapat berbeda di komputer lain; font Sans serif menampilkan huruf Latin secara konsisten di mana pun. Gambar sumber yang kecil akan terlihat buram pada 180 dan 512 piksel, jadi mulailah dengan gambar berukuran 512 piksel atau SVG.
Apakah Anda masih memerlukan file favicon.ico?
File tersebut tetap menjadi pilihan paling aman. Peramban meminta /favicon.ico ketika halaman tidak memiliki tag ikon, dan beberapa peramban lama, pembaca umpan, serta alat lainnya hanya membaca file tersebut. File favicon.ico dari alat ini memuat gambar berukuran 16, 32, dan 48 piksel dalam satu file, sehingga tampil tajam pada layar berdensitas normal maupun tinggi.
Apa itu ikon yang dapat dimasker?
Ikon yang dapat dimasker adalah ikon aplikasi untuk peluncur Android yang memotong ikon menjadi lingkaran, persegi bersudut tumpul, atau bentuk lainnya. Latar belakangnya mengisi seluruh persegi dan logo tetap berada di dalam zona aman, yaitu lingkaran terpusat dengan diameter 80% dari ikon. Pratinjau pada halaman ini menampilkan zona aman dan dua masker umum.