Generator Favicon

Apa itu favicon?

Favicon (singkatan dari "favourites icon") adalah gambar persegi kecil yang ditampilkan browser di samping judul halaman di tab, bookmark, dan riwayat. Ikon yang sama dipakai saat seseorang menambahkan situsmu ke layar utama HP, dan Google Search menampilkannya di samping nama situsmu di hasil pencarian mobile.

Favicon yang jelas membuat tab-mu mudah ditemukan di antara dua puluh tab lainnya dan membuat situs kecil terlihat rapi. Tanpa favicon, yang tampil adalah ikon globe atau halaman kosong generik, dan browser mencatat error 404 setiap kali mencari /favicon.ico.

Generator favicon mengambil satu desain dan mengekspor semua ukuran dan file yang diharapkan browser, iOS, dan Android, jadi kamu tidak perlu mengubah ukurannya satu per satu.

Cara membuat favicon, langkah demi langkah

1. Pilih sumber lewat tab:
   • Teks: ketik 1 atau 2 huruf, pilih salah satu dari 11 font (Inter, System UI, Arial, Helvetica, Verdana, Trebuchet MS, Georgia, Times New Roman, Courier New, Impact, Brush Script MT), ketebalan (Tebal, Semi-bold, Reguler), warna teks, dan ukuran font dari 30% sampai 95%.
   • Emoji: tempel emoji apa saja atau ketuk salah satu pilihan cepat, lalu atur ukuran emoji dari 40% sampai 100%.
   • Gambar: unggah PNG, JPG, SVG, atau WebP. Pilih Muat untuk menampilkan seluruh logo atau Isi untuk memotongnya dari tepi ke tepi, lalu tambahkan padding 0% sampai 30%.
2. Atur warna latar belakang dan bentuk (Membulat, Persegi, atau Lingkaran), atau centang Background transparan.
3. Ketik nama situs kamu. Nama ini muncul di pratinjau tab dan di web manifest.
4. Cek pratinjau di ukuran 16, 32, 48, dan 180 px, serta di mock-up tab browser terang dan gelap.
5. Klik Unduh semua file (izinkan unduhan ganda jika browser bertanya) atau unduh file satu per satu berdasarkan nama.
6. Salin HTML dari kotaknya lalu tempel ke <head> halamanmu. Unggah semua file ke root situsmu.

Penjelasan ukuran dan file favicon

Potongan HTML-nya menautkan setiap file dan menambahkan meta tag theme-color memakai warna latar belakangmu, yang dipakai beberapa browser mobile untuk mewarnai address bar. Google Search meminta favicon persegi minimal 48 x 48 px (kelipatan 48 paling baik) saat artikel ini ditulis; gambar 48 px di dalam .ico dan PNG yang lebih besar sudah memenuhinya.

apple-touch-icon selalu diekspor sebagai persegi penuh dengan warna latar belakangmu, meskipun kamu memilih lingkaran atau transparansi, karena iOS menambahkan sudut membulatnya sendiri dan mengisi area transparan dengan warna hitam.

Cara mendesain favicon yang tetap terbaca di 16 piksel

• Satu bentuk yang tegas. Di 16 px kamu hanya punya total 256 piksel. Logo lengkap dengan tulisan berubah menjadi noda; pakai simbol atau huruf pertamanya.
• Maksimal dua huruf. Satu huruf lebih jelas. Pakai ketebalan Tebal; Reguler dan font script menjadi tipis dan buram.
• Kontras tinggi. Putih di atas warna kuat, atau warna gelap di atas putih, paling mudah dibaca. Cek pratinjau tab terang dan gelap.
• Perhatikan transparansi di mode gelap. Logo hitam dengan background transparan menghilang di bar tab yang gelap. Jika pratinjau gelap terlihat kosong, matikan transparansi atau pilih warna yang lebih terang.
• Pakai padding untuk logo. Dengan Muat, padding 6% sampai 12% mencegah logo menyentuh tepi, yang terlihat sesak.
• Emoji berbeda di tiap perangkat. Favicon emoji digambar dengan font emoji perangkatmu, jadi file yang kamu unduh sama dengan yang kamu lihat; emoji yang dibuat di Mac akan terlihat seperti versi Apple di semua perangkat.

Cara menambahkan favicon ke website kamu

Situs HTML biasa: unggah ketujuh file ke folder root (folder yang sama dengan halaman utamamu), lalu tempel HTML yang dihasilkan ke <head> setiap halaman atau template header bersama.

WordPress: WordPress punya pengaturan Ikon Situs bawaan di Tampilan, Sesuaikan, Identitas Situs. Unggah PNG 512 px di sana dan WordPress membuat ukurannya sendiri. Kamu juga bisa mengunggah favicon.ico ke root situs untuk tool yang lebih lama.

Shopify, Wix, Squarespace, dan website builder serupa: cari "Favicon" atau "Ikon situs" di pengaturan tema atau situs lalu unggah PNG 512 px atau 192 px.

Favicon tidak muncul? Browser menyimpan cache favicon dalam waktu lama. Pastikan file terbuka di yoursite.com/favicon.ico, lalu coba jendela privat. Google Search bisa butuh beberapa hari atau minggu untuk menampilkan favicon baru setelah merayapi ulang halaman utamamu.

Generator favicon vs membuatnya di Canva atau Photoshop

Kamu bisa mendesain favicon di Canva, Figma, atau Photoshop, dan untuk logo brand yang detail, itu tempat yang bagus untuk memulai. Namun tool tersebut mengekspor satu PNG dalam satu waktu, dan sebagian besar tidak bisa menulis file .ico multi-ukuran atau web manifest. Alur kerja yang umum adalah mendesain simbol di tool desain, mengekspor PNG atau SVG persegi, lalu menaruhnya di tab Gambar di sini untuk mendapatkan semua ukuran dan HTML sekaligus.

Beberapa situs juga memakai favicon SVG, yang bisa berganti warna untuk mode gelap dengan CSS. Tool ini tidak mengekspor favicon SVG; set PNG dan .ico yang dibuatnya adalah opsi dengan dukungan paling luas.

Apakah generator favicon ini privat?

Ya. Logomu dibaca dan diubah ukurannya di browser kamu, dan file .ico juga disusun di sana. Tidak ada yang diunggah ke Biolinko, dan kamu tidak butuh akun.

Favicon dan halaman link di bio kamu

Jika kehadiran online utamamu adalah halaman link di bio, bukan website lengkap, kamu tidak perlu memasang favicon: halaman Biolinko memakai foto profilmu sebagai ikon tab dan menambahkan tag share media sosial untukmu. Jadi ikon persegi yang tegas yang didesain di sini (unduh PNG 512 px) bisa sekaligus dipakai sebagai foto profil, dan juga cocok sebagai cover highlight atau logo di gambar share media sosial. Buat halaman gratis untuk memakainya.