Generator Favicon: Buat favicon.ico, PNG, dan Apple Touch Icon
Buat favicon.ico, favicon PNG, Apple touch icon, dan manifest aplikasi web dari gambar atau teks di browser, lengkap dengan tag HTML untuk disalin.
Letakkan gambar di sini atau pilih gambar
PNG, JPG, WebP, GIF (bingkai pertama), BMP, atau SVG. Gambar persegi berukuran minimal 512 × 512 piksel memberikan hasil terbaik.
Teks digambar dengan font yang terpasang di perangkat ini, sehingga huruf dan emoji bisa terlihat berbeda di komputer atau ponsel lain. File PNG dan ICO yang diunduh mempertahankan tampilan yang Anda lihat di sini.
Pratinjau
16, 32, dan 48 ditampilkan dalam ukuran sebenarnya; ikon yang lebih besar ditampilkan lebih kecil. Pola kotak-kotak menandai area transparan.
Di tab browser
Bilah tab sederhana dalam tema terang dan gelap. Pastikan ikon terlihat di keduanya: logo gelap dengan latar belakang transparan bisa tidak terlihat di bilah tab gelap.
File
Sebagian perangkat Apple menampilkan bagian transparan ikon layar utama sebagai hitam, sehingga apple-touch-icon.png disimpan tanpa transparansi: area transparan diisi dengan warna ini. Pengaturan bentuk tidak diterapkan pada file ini, karena iPhone dan iPad membulatkan sendiri sudut ikon layar utama.
Digunakan dalam tag HTML dan manifest. "/" berarti folder root situs web.
Pengaturan latar belakang, bentuk, padding, dan potong tidak diterapkan pada favicon.svg.
Browser dapat menggunakan warna tema untuk mewarnai bilah alamat atau judul jendela. Warna latar belakang aplikasi ditampilkan saat aplikasi web yang terpasang sedang dibuka.
Pilih gambar atau beralih ke teks untuk memulai.
Isi site.webmanifest
Catatan
- Unggah file ke folder root situs web Anda (folder yang berisi halaman beranda), atau masukkan folder lain di atas agar jalur di HTML dan manifest sesuai.
- favicon.ico berisi gambar 16 × 16, 32 × 32, dan 48 × 48 yang disimpan sebagai data PNG. Browser masa kini serta Windows Vista atau yang lebih baru dapat membacanya; beberapa program yang sangat lama hanya dapat membaca gambar ikon yang tidak terkompresi.
- Sumber yang kecil, seperti gambar 64 × 64, diperbesar untuk ikon yang lebih besar dan terlihat buram. Gunakan gambar berukuran minimal 512 × 512 piksel atau file SVG jika memungkinkan.
- Ikon teks menggunakan font yang terpasang di perangkat tempat Anda membuatnya. File PNG dan ICO mempertahankan tampilan tersebut, tetapi membuat ikon lagi di perangkat lain bisa memberikan hasil yang berbeda.
- File SVG digambar oleh browser Anda. Gambar, font, atau gaya yang dimuat file SVG dari file atau situs web lain tidak dimuat dan mungkin tidak muncul di ikon.
- Browser menyimpan favicon di cache dalam waktu lama. Setelah Anda mengganti favicon, favicon lama masih bisa muncul untuk sementara waktu; hard refresh, jendela pribadi, atau nama file yang diubah di HTML dapat membantu.
- Gambar dan teks diproses di browser Anda dan tidak diunggah ke LeedyBox.
Cara menggunakan
- Pilih "Gambar" lalu pilih atau letakkan logo Anda, atau pilih "Teks atau emoji" lalu ketik hingga tiga karakter.
- Atur latar belakang, bentuk, dan padding, lalu periksa pratinjau dan tab browser dalam tema terang dan gelap.
- Jika perlu, masukkan nama situs web, nama pendek, warna tema, dan folder tempat file akan disimpan.
- Tekan "Buat file favicon", lalu unduh file satu per satu atau semuanya sekaligus sebagai favicon-package.zip.
- Unggah file ke situs web Anda dan tempel tag HTML yang disalin ke bagian head halaman Anda.
Pertanyaan umum
Apakah gambar saya diunggah ke server?
Tidak. Gambar atau teks digambar dan dikonversi di browser Anda, dan file dibuat di perangkat Anda. Tidak ada yang dikirim ke LeedyBox. Saat halaman dimuat, hanya pustaka ZIP yang diunduh, langsung dari leedybox.com.
Gambar apa saja yang dapat saya gunakan, dan apakah ada batasnya?
File PNG, JPG, WebP, GIF (bingkai pertama), BMP, dan SVG. File SVG dapat berukuran hingga 10 MB. Foto yang sangat besar (di atas sekitar 50 megapiksel) bisa gagal diproses di ponsel karena memori yang dibutuhkan. Gambar persegi berukuran minimal 512 × 512 piksel, atau file SVG, memberikan hasil paling tajam.
Mengapa favicon saya terlihat buram atau sulit dibaca?
Ikon 16 piksel memiliki ruang yang sangat sempit. Bentuk sederhana, kontras kuat, dan satu atau dua huruf lebih efektif daripada logo yang detail atau teks panjang. Gambar sumber yang kecil diperbesar untuk ukuran yang lebih besar dan terlihat buram. Periksa pratinjau dan coba padding yang lebih kecil atau versi logo yang lebih sederhana.
File mana yang saya perlukan?
favicon.ico serta file PNG 16 dan 32 piksel digunakan oleh browser desktop, dan apple-touch-icon.png oleh iPhone dan iPad. Ikon 192 dan 512 piksel serta site.webmanifest digunakan saat situs ditambahkan ke layar utama atau dipasang sebagai aplikasi web. Menggunakan semuanya dengan tag HTML mencakup kasus-kasus umum.
Mengapa apple-touch-icon.png tidak memiliki transparansi?
Sebagian perangkat Apple menampilkan bagian transparan ikon layar utama sebagai hitam. Karena itu, alat ini mengisi area transparan dengan warna yang Anda pilih (default putih) dan membiarkan sudutnya tetap persegi, karena iPhone dan iPad membulatkannya sendiri.