Generator Favicon
Buat favicon dalam semua ukuran dari satu gambar.
Letakkan logo Anda di sini atau klik untuk memilih
PNG, SVG, JPG, WebP, atau ICO. Logo persegi berukuran 512 × 512 px atau lebih memberi hasil terbaik. File diproses di browser Anda dan tidak pernah diunggah. Gambar tetap ada di browser ini sampai Anda menghapusnya.
Ctrl+OpilihCtrl+Vtempel
Favicon adalah ikon kecil yang ditampilkan browser di tab dan bookmark; ponsel memakai versi yang lebih besar saat seseorang menambahkan situs Anda ke layar utama. Letakkan satu logo dan generator ini membuat setiap file yang dibutuhkan situs web — favicon.ico, favicon PNG, ikon Apple touch, ikon Android, dan web manifest — dengan pratinjau langsung dan HTML untuk ditempel ke halaman Anda. Semuanya berjalan di browser Anda, jadi logo tidak pernah keluar dari perangkat; gratis dan tanpa perlu mendaftar.
Cara membuat favicon
- Letakkan logo Anda (PNG, SVG, JPG, atau WebP) di mana saja di halaman, tempel dengan Ctrl+V, atau klik untuk memilihnya. Gambar yang Anda tambahkan di alat gambar lain sudah ada di daftar, seperti saat Anda meninggalkannya di sana: klik thumbnail-nya untuk memakainya. Logo contoh memungkinkan Anda mencoba tanpa file.
- Logo langsung dibingkai untuk Anda: simbol dari logo yang lebar, atau logo tanpa tepi kosongnya. Tarik kotak persegi di atas logo untuk mengubahnya, atau pilih Seluruh logo. Pilih latar (warna logo Anda sendiri muncul lebih dulu), padding, dan bentuknya; pratinjau diperbarui seiring Anda mengatur.
- Klik Unduh semua (ZIP), taruh file-file itu di folder root situs Anda, lalu klik Salin HTML dan tempel tag-tagnya ke <head> halaman Anda.
Fitur
- favicon.ico dengan ikon 16, 32, dan 48 px, ditambah favicon PNG 16 dan 32 px
- apple-touch-icon.png (180 px) dan ikon Android Chrome (192 dan 512 px)
- site.webmanifest dengan nama aplikasi dan warna tema Anda, serta tag HTML untuk <head> Anda
- Menemukan simbol dari logo yang lebar secara otomatis; tarik kotak persegi untuk memakai bagian lain, atau muatkan seluruh logo
- Latar: transparan, warna logo Anda sendiri, atau warna apa pun; padding dari 0 hingga 30%; bentuk persegi, sudut membulat, atau lingkaran
- Pratinjau langsung untuk setiap ukuran, tab browser, dan layar utama, dalam mode terang dan gelap
- Dimulai dari PNG, SVG, JPG, WebP, atau ICO; semua file dalam satu ZIP
Apakah privasi terjaga?
Ya. Ikon dibuat di browser Anda oleh mesin gambar WebAssembly; logo dan file-filenya tidak pernah keluar dari perangkat Anda. Logo tetap ada di browser ini sampai Anda menghapusnya dari daftar.
Pertanyaan umum
Ukuran favicon apa saja yang saya butuhkan?
Empat file sudah mencakup hampir semuanya: favicon.ico dengan 16, 32, dan 48 px untuk tab browser, bookmark, dan pintasan Windows; apple-touch-icon.png 180 px untuk layar utama iPhone dan iPad; serta PNG 192 dan 512 px, yang dicantumkan di site.webmanifest, untuk Android dan aplikasi web yang bisa dipasang. ZIP berisi semuanya, ditambah PNG 16 dan 32 px untuk browser yang lebih suka PNG.
Bagaimana cara menambahkan favicon ke HTML saya?
Taruh file-file itu di folder root situs Anda, sehingga /favicon.ico bisa dibuka, lalu klik Salin HTML dan tempel tag-tagnya ke <head> setiap halaman. Browser mencari /favicon.ico bahkan tanpa tag apa pun; tag-tag itu menambahkan ukuran PNG, ikon Apple, dan manifest.
Mengapa apple-touch-icon.png punya latar?
Karena iPhone dan iPad menampilkan piksel transparan sebagai hitam dan membulatkan sudutnya sendiri, jadi ikon Apple selalu berupa persegi penuh yang tidak transparan: warna latar Anda, atau putih jika latarnya transparan. Ikon lainnya mempertahankan transparansi dan bentuknya.
Bisakah saya memakai logo SVG?
Bisa. Browser Anda menggambar SVG pada ukurannya sendiri, atau pada 1024 px jika lebih kecil, dan setiap ikon dibuat dari gambar itu. SVG yang menautkan file lain (gambar, font, atau stylesheet) tidak bisa digambar sepenuhnya sebagai gambar, jadi alat ini memberi tahu Anda alih-alih membuat ikon yang tidak lengkap; ekspor dulu sebagai PNG, atau sematkan gambarnya.
Saya sudah mengganti favicon, tetapi browser masih menampilkan yang lama. Kenapa?
Browser menyimpan favicon di cache untuk waktu yang lama. Muat ulang halaman dengan Ctrl+F5 (Cmd+Shift+R di Mac), atau buka situs di jendela pribadi, untuk melihat ikon yang baru.