Favicon generator
Browser mengharapkan beberapa ukuran ikon: favicon.ico klasik 16×16, ikon tab 32×32, ikon sentuh apel 180×180, dan ikon PWA 192×192. Unggah logo persegi dan unduh satu set lengkap — dibuat secara lokal tanpa mengirimkan aset merek Anda ke server.
Cara membuat favicon
1. Unggah PNG atau JPG persegi (disarankan berukuran 512×512 atau lebih besar).
2. Pratinjau ukuran yang dihasilkan.
3. Unduh paket ikon atau file individual.
4. Tambahkan tautan tag ke kepala HTML Anda dan tempatkan file di /public atau root situs.
Contoh pengaturan Favicon
Situs statis baru
Buat favicon.ico plus 32×32 PNG dan tambahkan tag rel="icon" tautan standar ke layout.html.
Manifes PWA
Ekspor 192×192 dan 512×512 PNG untuk susunan ikon manifest.json.
Pertukaran merek
Ganti satu logo master dan buat ulang semua ukuran agar tab dan pintasan layar beranda cocok.
Kapan menggunakan generator favicon
• Saat meluncurkan situs dan membutuhkan semua ukuran ikon standar di sekali.
• Bila Anda memiliki logo raster tetapi bukan file .ico multi-ukuran.
• Saat Anda menginginkan generasi lokal tanpa mengunggah aset merek.
Kapan membuat ikon dengan tangan
• Saat logo Anda dirinci — sederhanakan menjadi tanda huruf agar mudah dibaca 16×16.
• Saat favicon SVG cukup untuk pemirsa modern saja.
• Saat toko platform memerlukan PSD berlapis yang ditentukan secara ketat sumber.
Tag tautan HTML daftar periksa
Sertakan rel="icon" untuk ukuran PNG, rel="apple-touch-icon" untuk iOS, dan opsional manifest.json untuk PWA. Tempatkan file di jalur yang dapat diprediksi (/favicon.ico masih membantu crawler lama).
Desain untuk 16×16
Detail halus hilang pada ukuran favicon. Gunakan bentuk tebal, kontras tinggi, dan hindari guratan tipis. Banyak merek menggunakan varian monogram untuk ukuran kecil.
Penghancuran cache saat rebranding
Browser melakukan cache favicon secara agresif. Ganti nama file atau tambahkan kueri ?v=2 saat memperbarui ikon sehingga pengguna melihat tanda baru.
Pertanyaan yang sering diajukan
Berapa ukuran gambar sumber yang seharusnya?
Setidaknya berukuran 512×512 piksel persegi. Master yang lebih besar menurunkan skala lebih baik daripada meningkatkan logo kecil.
Favicon ICO vs PNG?
Browser modern menerima PNG; .ico menggabungkan beberapa ukuran untuk tab Windows lawas.
ukuran ikon sentuh-apel?
180×180 piksel untuk pintasan layar beranda iOS — gunakan PNG tanpa transparansi untuk hasil terbaik.
Latar belakang transparan?
Berfungsi untuk tab PNG; Ikon beranda iOS mungkin berwarna putih matte — uji di perangkat.
Apakah logo diunggah ke server?
Tidak — pengubahan ukuran menggunakan kanvas secara lokal.
Sumber SVG?
Konversi SVG ke PNG terlebih dahulu pada resolusi tinggi, lalu buat favicon.