Generator Favicon Gratis untuk Semua Platform

Generator favicon menghemat bagian melelahkan dari branding sebuah situs web: mengekspor logo yang sama dalam enam ukuran, menamai setiap file dengan benar, dan menulis tag yang memberi tahu setiap platform di mana menemukannya. Favicon memang kecil, tetapi jangkauannya jauh. Ia hadir di tab browser, bookmark, dan riwayat, di layar utama ponsel, dan di samping nama situs Anda pada hasil Google, tempat Google meminta ikon persegi minimal 8x8 piksel dan menyarankan ukuran lebih besar dari 48x48 (Google Search Central, favicons in search results).

Bagaimana cara menggunakan generator favicon?

Letakkan file PNG, JPG, atau SVG ke dalam alat ini, idealnya berukuran 512x512 piksel atau lebih besar. Generator menggambar gambar Anda pada kanvas di setiap ukuran dengan penghalusan berkualitas tinggi dan menampilkan keenam hasilnya berdampingan.

1. Siapkan sumber yang persegi. Alat ini mengubah ukuran gambar Anda ke setiap ukuran persegi tanpa memotongnya, sehingga logo persegi panjang akan terlihat melar. Potong dulu menjadi persegi, dengan sedikit margin di sekeliling logo.
2. Letakkan file atau klik untuk memilihnya. Pratinjau muncul dalam sekejap.
3. Unduh paketnya dengan tombol "Download all (.zip)", atau setiap PNG secara terpisah.
4. Salin kode HTML ke dalam <head> setiap halaman, biasanya di template situs Anda.
5. Salin manifest, isi kolom name dan short_name dengan merek Anda, lalu simpan sebagai site.webmanifest di root situs Anda.
6. Unggah file ke root domain Anda, agar /favicon-32x32.png dan path lain dalam kode dapat ditemukan.

Karena pemrosesan terjadi di browser Anda, generator ini bisa digunakan untuk logo yang belum dirilis dan file klien yang tidak boleh Anda kirim ke server pihak ketiga.

Ukuran favicon apa yang dibutuhkan pada 2026?

Enam file PNG mencakup browser, iOS, Android, dan Windows. Tabel berikut mencantumkan apa yang dihasilkan generator, di mana setiap file digunakan, serta tag atau file yang merujuknya.

Pasangan 192 dan 512 bukan tanpa alasan: untuk browser Chromium, manifest aplikasi web harus menyediakan setidaknya ikon 192x192 dan ikon 512x512, dan Chrome menskalakannya untuk tempat lain yang dibutuhkan (web.dev, add a web app manifest). Ukuran 180x180 sesuai dengan ikon iPhone beresolusi tinggi dalam contoh kode resmi Apple untuk web clip (Apple, configuring web applications). Ubin Windows adalah file lawas: tidak berbahaya, dan Anda bisa membuang tag-nya jika tidak menargetkan instalasi Windows lama.

Kode HTML apa yang diberikan generator?

Enam baris untuk <head>: dua tautan rel="icon" untuk favicon PNG, ikon Apple touch, tautan manifest, ubin Windows, dan tag meta theme-color. Ketika sebuah halaman mencantumkan beberapa ikon, browser membaca atribut type dan sizes untuk memilih yang paling sesuai, lalu beralih ke berikutnya jika sebuah file gagal dimuat (MDN, link types).

Dua pengaturan dalam kode yang dihasilkan layak disunting. theme-color dan warna manifest secara bawaan berwarna putih (#ffffff): gantilah dengan warna merek Anda jika ingin bilah browser dan layar pembuka aplikasi yang terpasang serasi dengan situs Anda. Dan manifest sengaja mengosongkan name dan short_name: web.dev menjelaskan bahwa setidaknya salah satu dari keduanya wajib ada, dan bahwa short_name digunakan di layar utama yang ruangnya terbatas.

Apakah favicon membantu SEO?

Bukan sebagai faktor peringkat, tetapi ia membentuk tampilan hasil Anda. Google dapat menampilkan favicon Anda di samping nama situs di bagian atas setiap hasil, sehingga ikon yang jelas membantu pencari mengenali merek Anda dan dapat meningkatkan rasio klik-tayang dibandingkan hasil dengan ikon globe generik.

Google mencantumkan syarat kelayakannya, dan syarat yang terlewat biasanya menjadi alasan favicon tidak tampil:

• Tag link di beranda. Google membaca rel="icon", shortcut icon, apple-touch-icon, dan apple-touch-icon-precomposed.
• Akses crawl. Googlebot harus dapat mengakses beranda dan Googlebot-Image harus dapat mengakses file ikon. Aturan robots.txt yang memblokir folder gambar Anda dapat menyembunyikan favicon Anda.
• File persegi minimal 8x8 piksel, idealnya lebih besar dari 48x48, dalam format yang didukung: BMP, GIF, ICO, PNG, JPEG, PPM, atau TIFF. File PNG yang dihasilkan memenuhi syarat.
• Satu favicon per hostname. Subdomain dapat memiliki ikonnya sendiri; subdirektori seperti /blog tidak bisa.
• URL yang stabil dan tidak sering Anda ubah.

Setelah ada perubahan, Google perlu meng-crawl ulang beranda, yang bisa memakan waktu beberapa hari hingga beberapa minggu menurut dokumentasi yang sama. Meminta pengindeksan beranda di Search Console mempercepat proses ini.

Bagaimana merancang favicon yang tetap terbaca pada 16 piksel?

Rancanglah untuk ukuran terkecil lebih dulu. Pada 16x16, seluruh ikon hanya memiliki 256 piksel, sehingga logo lengkap dengan tagline berubah menjadi kabur. Aturan berikut menjaga ikon tetap terbaca:

• Gunakan simbol logo, bukan logo lengkap. Simbol atau satu huruf tebal tetap bertahan setelah diperkecil; sebuah kata tidak.
• Isi persegi sepenuhnya. Sisakan margin tipis, tetapi hindari batas kosong yang lebar sehingga simbol terlihat mungil di tab.
• Pilih kontras yang kuat dan dua atau tiga warna solid. Garis tipis dan gradasi menghilang pada ukuran kecil.
• Periksa tema terang dan gelap. PNG transparan dengan simbol gelap akan lenyap di bilah tab yang gelap; latar solid atau kontur terang menyelesaikannya.
• Pikirkan masker untuk Android. Android dapat memotong ikon aplikasi menjadi lingkaran. MDN menyarankan ikon maskable dengan bagian penting di dalam zona aman dan latar yang buram (MDN, define app icons). Jika simbol Anda menyentuh tepi, ekspor versi dengan padding untuk file 192 dan 512.

Kesalahan favicon apa yang paling umum?

Sebagian besar favicon yang rusak berasal dari path atau cache, bukan dari gambarnya.

• File diunggah ke folder yang salah. Kode yang dihasilkan mengarah ke root (/favicon-32x32.png). Jika Anda menaruh file di /assets, perbarui setiap path.
• Tidak ada file di /favicon.ico. Ketika sebuah halaman tidak mendeklarasikan ikon, standar HTML mengizinkan browser meminta /favicon.ico secara default (WHATWG HTML standard, link types). Halaman tanpa tag tersebut, seperti PDF atau halaman error, akan memicu 404 di log Anda. Generator hanya menghasilkan file PNG, jadi jika Anda menginginkan fallback itu, ekspor PNG 32x32 Anda sebagai file ICO dengan editor gambar apa pun.
• Ikon lama yang tidak mau hilang. Browser menyimpan cache favicon secara agresif. Ganti nama file atau tambahkan parameter versi (?v=2) setelah desain ulang.
• Tag hanya di beranda. Browser membaca ikon halaman demi halaman, jadi letakkan kode di template bersama.
• Logo yang melar. Potong sumber menjadi persegi sebelum menghasilkan ikon, seperti dijelaskan di atas.

Setelah file online, jalankan pengekstrak favicon pada domain Anda untuk melihat ikon mana yang benar-benar ditemukan crawler, lalu audit SEO on-page untuk memeriksa tag head lainnya.

Bagaimana favicon berperan dalam merek Anda di jawaban AI?

Asisten AI seperti ChatGPT dan Perplexity sering menampilkan ikon setiap situs yang mereka kutip di samping tautan sumber. Favicon yang konsisten membuat merek Anda dikenali di sana juga, tetapi itu hanya bingkainya: dikutip atau tidak bergantung pada konten dan otoritas Anda. Untuk melihat apakah situs Anda muncul dalam jawaban tersebut sama sekali, pelacakan sebutan AI mengukur penyebutan merek Anda setiap minggu, prompt demi prompt dan model demi model, dan dasbor GEO / SEO menempatkannya di samping klik dan posisi Google Anda.

Satu set favicon lengkap hanya butuh satu gambar persegi dan dua menit. Hasilkan ikon Anda di atas, tempel kodenya ke template Anda, lalu lihat paket Sorank untuk mengembangkan trafik yang akan melihatnya, dengan autopilot.