Apa itu Generator Favicon?

Generator favicon ini membuat semua ukuran yang dibutuhkan situs Anda — dari gambar yang diunggah, inisial yang diketik, atau sebuah emoji. Pilih sumber dan dapatkan file ICO ukuran 16×16, 32×32, dan 48×48, sebuah SVG yang bisa diskalakan, plus versi PNG untuk Apple Touch icon dan layar beranda Android, siap dipakai langsung di proyek Anda.

Mulai dari gambar, ketik satu hingga tiga huruf dengan font dan bentuk, atau pilih emoji — lalu alat ini merender enam PNG (16, 32, 48, 180, 192, 512 piksel), satu SVG yang tajam, dan satu ICO multi-resolusi berisi tiga ukuran kecil yang masih diminta oleh tab Windows. Semuanya dibungkus dalam ZIP bersama site.webmanifest dan tag link tepat yang siap ditempel ke head halaman. Sumber SVG atau PNG persegi memberi penskalaan paling bersih.

Cara menggunakan

1. Pilih sumber: unggah gambar persegi (PNG, JPG, atau SVG, idealnya 512×512 atau lebih besar), ketik inisial dengan font dan bentuk, atau pilih emoji.
2. Pratinjau favicon yang dihasilkan di semua ukuran standar (16px, 32px, 48px, 180px, 192px, 512px).
3. Unduh paket favicon lengkap sebagai file ZIP, termasuk file ICO, semua ukuran PNG, dan tag link HTML untuk ditempel di head halaman Anda.

Kapan menggunakan

• Menambahkan ikon tab dan layar utama ke situs atau aplikasi web yang baru.
• Memperbarui identitas merek di situs lama setelah logo didesain ulang.
• Membuat ikon PWA yang memenuhi spesifikasi manifest untuk fitur Tambahkan ke Layar Utama.

Hasil

Seorang developer mengunggah logo startup mereka berukuran 1024×1024. Alat ini menghasilkan set favicon lengkap termasuk favicon.ico (16/32/48), apple-touch-icon.png (180×180), dan ikon Android (192/512), beserta tag meta HTML.

FAQ

Kenapa saya butuh banyak ukuran favicon yang berbeda?

Setiap platform meminta ukuran tertentu. Tab Chrome memakai 32 piksel, bookmark 16, layar utama iOS 180, layar utama Android 192, dan splash PWA 512. Dengan menyediakan semuanya, ikon tetap tajam di mana pun ia muncul.

Sebaiknya unggah PNG, SVG, atau JPG?

SVG paling baik karena bisa diskalakan tanpa kehilangan kualitas ke ukuran berapa pun. Opsi kedua adalah PNG 512 kali 512. JPG juga dapat dipakai, tetapi kompresi lossy bisa meninggalkan halo di tepi ikon, terutama pada 16 dan 32 piksel.

Apa isi dari file ICO?

ICO adalah format kontainer. Versi yang dihasilkan alat ini membawa tiga lapisan bitmap (16, 32, dan 48 piksel) supaya Windows otomatis memilih yang paling pas tergantung di mana ikon ditampilkan: bilah tugas, daftar file, atau tab peramban.

Di mana saya menaruh file-file ini di proyek?

Ekstrak paket di akar publik situs Anda, bersisian dengan index.html. Tag link yang disediakan memakai jalur akar (/favicon.ico, /apple-touch-icon.png), jadi pada HTML murni atau kerangka kerja seperti Next.js, Astro, dan Vite tidak perlu pengaturan tambahan.

Saya sudah mengganti favicon tetapi peramban masih menampilkan yang lama. Kenapa?

Peramban sangat agresif dalam menyimpan cache favicon. Lakukan hard refresh (Ctrl+Shift+R di Windows, Cmd+Shift+R di Mac), atau tambahkan query string ke tag link, misalnya /favicon.ico?v=2, supaya peramban menarik salinan baru. Cache umumnya akan terhapus sendiri dalam sehari.

Alat terkait