Anda sudah punya logo. Yang Anda butuhkan adalah logo itu diubah menjadi setumpuk file ikon mungil yang diharapkan browser — sebuah favicon.ico, segelintir PNG pada ukuran tertentu, sebuah web manifest, dan HTML untuk merangkai semuanya. Konversi itu mekanis, dan Anda bisa melakukannya dalam sekitar satu menit tanpa memasang apa pun.
Kendalanya adalah tak setiap logo mengecil dengan anggun. Jadi ini mencakup baik jalur cepat maupun cara memperbaiki logo yang menjadi bubur pada 16 piksel.
Versi singkat
- Dapatkan logo Anda sebagai gambar persegi — idealnya 512×512 atau lebih besar, di atas latar transparan atau solid.
- Jatuhkan ke Generator Favicon.
- Unduh set yang dihasilkan dan jatuhkan file ke root situs Anda.
- Tempel snippet HTML yang disediakan ke
<head>Anda.
Itulah keseluruhan pekerjaannya. Generator menghasilkan favicon.ico, PNG pada 16, 32, 48, 180, 192, dan 512, sebuah webmanifest, dan tag <link> persis — jadi Anda tak memotong enam gambar dengan tangan atau menebak-nebak sintaks manifest.
Siapkan logo Anda dulu — di sinilah kualitas dimenangkan atau hilang
Favicon tinggal pada 16×16 di tab browser. Detail apa pun yang tak bisa bertahan pada ukuran itu terbuang. Habiskan dua menit di sini dan hasilnya tampak tajam di mana-mana.
Buat persegi. Favicon berbentuk persegi. Logo lebar dan horizontal akan diberi letterbox atau dipenyet. Potong ke elemen paling dikenal — biasanya tanda atau satu inisial — dan pusatkan dalam bingkai persegi.
Buang wordmark. Nama perusahaan Anda secara utuh takkan terbaca pada ukuran tab. "Acme Corporation" menjadi noda abu-abu. Pertahankan simbolnya, atau satu huruf, dan biarkan judul tab membawa namanya.
Periksa kontras terhadap kedua tema. Tab browser hadir dalam terang dan gelap. Ikon biru-navy lenyap di tab gelap; ikon pucat lenyap di yang terang. Jika tanda Anda satu warna datar, pastikan warna itu terbaca di keduanya. Garis luar halus atau chip latar solid kecil bisa membantu.
Sisakan ruang bernapas. Tambahkan sedikit padding di dalam persegi agar ikon tak menabrak tepi. Ia akan tampak lebih seimbang di setiap slot.
Mulai besar. Sumber 512×512 (atau lebih besar) memberi generator detail bersih untuk diperkecil. Memperbesar logo mungil dulu cuma memanggang keburaman.
Latar transparan atau solid?
Keduanya berhasil — tergantung tampilan yang Anda inginkan.
- Transparan membiarkan latar tab atau layar-utama tembus. Bersih dan modern, dan ia beradaptasi dengan sekeliling terang/gelap. Terbaik ketika tanda Anda berbentuk khas.
- Chip latar solid (persegi membulat berwarna di belakang tanda) menjamin ikon terbaca apa pun yang ada di baliknya. Inilah yang dilakukan kebanyakan ikon aplikasi, dan ia pilihan lebih aman jika logo Anda tipis atau berkontras rendah.
Kalau ragu, chip solid dalam warna merek Anda adalah opsi yang tangguh — ia tak pernah lenyap ke dalam latar yang cocok.
Setelah Anda mengunduh: ke mana file pergi
Generator memberi Anda satu set file dan sebuah snippet. Dua aturan penempatan mencakupnya:
favicon.icoke root situs Anda (/favicon.ico). Browser dan Windows mencarinya di sana berdasarkan nama bahkan tanpa tag<link>.- Yang lain bisa tinggal di mana pun Anda suka selama jalur di snippet HTML cocok. Kebanyakan orang menjatuhkan semuanya di root dan menempel snippet apa adanya.
Lalu tinggal snippet <head> — tautan ikon, apple-touch-icon, dan referensi manifest. Tempel, deploy, muat-ulang-paksa, dan Anda seharusnya melihat logo Anda di tab.
Mengapa melakukannya di browser?
Karena logo Anda tak pernah keluar dari mesin Anda. Seluruh proses — membaca gambar, mengubah ukuran ke setiap dimensi, mengemas .ico, menulis manifest — terjadi secara lokal di browser Anda menggunakan Canvas. Tak ada yang diunggah ke server, tak ada pendaftaran atau watermark, dan setelah kunjungan pertama Anda, alat berfungsi offline. Untuk aset merek yang mungkin belum Anda terbitkan, menjaganya jauh dari server pihak-ketiga adalah default yang masuk akal.
Setelah logo Anda persegi, berkontras tinggi, dan terbaca kecil, menghasilkan set lengkap adalah bagian mudahnya.