PENAWARAN TERBATAS - Hemat hingga 87 %

+ GRATIS Domain 1 tahun

Penawaran berakhir dalam:

01 :

05 :

07 :

49

Blog Zyro

Semua Topik
Blog eCommerce Desain Esensial Ide Usaha Inspirasi Pemasaran Tips Berbisnis

Cara Membuat Favicon dan Memasangnya di Blog atau Website

Cara Membuat Favicon dan Memasangnya di Blog atau Website

Favicon memiliki peran yang penting dalam membangun branding. Gambar ikon website ini akan membuat bisnis Anda lebih menonjol dibandingkan kompetitor sehingga lebih mudah diingat dan ditemukan oleh target konsumen.

Cara membuat favicon pun benar-benar mudah. Karena itu, akan sangat disayangkan apabila Anda tidak menambahkannya ke dalam website karena favicon sangat berguna dalam memperkenalkan merek.

Sebelumnya, apa itu favicon?

Favicon adalah gambar ikon kecil yang muncul di tab, daftar favorit, maupun bookmark pada browser seperti Chrome, Mozilla, dan Safari.

Kata “favicon” sendiri merupakan kependekan dari “favorite icon”, dan juga memiliki istilah lain seperti:

  • Ikon shortcut
  • Ikon website
  • Ikon bookmark

Favicon diperkenalkan kepada pengguna internet bersamaan dengan dirilisnya Internet Explorer 5 pada tahun 1999.

Desain favicon biasanya mengadaptasi versi mini logo suatu bisnis atau perusahaan dengan ukuran minimum 16×16 piksel.

Favicon berperan sebagai lambang visual dari sebuah halaman website. Ikon inilah yang nantinya akan memudahkan pengguna untuk menemukan website Anda ketika sedang membuka banyak tab sekaligus di browser mereka.

Misalnya saat berbelanja baju secara online, besar kemungkinannya Anda akan membuka hingga puluhan tab sekaligus dari berbagai website untuk membandingkan produk dan harga.

Nah, di sini lah favicon berfungsi sebagai penanda unik dari website yang Anda kunjungi. Dengan melihat ikon tersebut, Anda bisa langsung mengidentifikasi suatu halaman tanpa perlu membaca judul halaman.

Cara membuat favicon

Cara membuat favicon dari nol

Setelah mengetahui apa itu favicon dan pentingnya bagi website atau blog, sekarang saatnya Anda mempelajari cara membuat favicon sendiri.

Selain menjadikan website Anda terkesan lebih profesional, favicon sendiri akan membuat bisnis Anda lebih mudah diingat oleh publik.

Untuk membuat favicon, ada dua cara yang bisa Anda pilih: membuatnya sendiri di HTML atau dengan menggunakan favicon generator.

Melalui artikel ini, kami akan menjelaskan kedua cara membuat favicon tersebut sehingga Anda bisa menentukan pilihan yang dirasa paling tepat. Mari kita mulai penjelasannya dengan cara membuat favicon sendiri secara manual.

1. Menyiapkan gambar ikon

Berbicara tentang desain favicon, tentunya pilihan yang paling utama adalah menggunakan logo brand atau perusahaan Anda sendiri.

Akan tetapi, Anda tetap bisa menggunakan gambar lain sebagai identitas visual website, asalkan mengikuti aturan-aturan dasar berikut:

  • Gambar konsisten dengan branding. Gunakan warna, tipografi, dan bentuk yang sesuai.
  • Gambar unik dan menonjol. Gambar harus mudah dikenali dan diingat oleh calon pelanggan.
  • Gambar tidak menyerupai ikon atau gambar brand lain. Pastinya Anda tidak ingin pelanggan keliru, bukan?

Untuk membuat gambar favicon, Anda bisa memanfaatkan editor seperti Photoshop atau software open-source seperti Canva. Kalau Anda punya budget berlebih, menyewa jasa desainer ikon profesional juga patut dijadikan pertimbangan.

Untuk mendapatkan desain favicon yang profesional, mampu menjual, dan mudah diingat, ada beberapa elemen desain yang harus dihindari:

  • Jangan menggunakan foto. Favicon ditampilkan dalam ukuran yang sangat kecil di tab browser. Itu sebabnya foto apa pun tidak akan dapat dilihat dengan jelas dan nyaman.
  • Jangan menyisipkan kata-kata atau kalimat panjang. Boleh saja menyisipkan satu hingga tiga huruf di dalam desain favicon, tapi hindari memasukkan kata-kata karena akan sulit terbaca.
  • Jangan memakai embel-embel marketing. Meski favicon sangat berguna dalam membangun branding dan menjaga konsistensi brand image, Anda tidak bisa menjadikannya media promosi layaknya banner promo.

Memilih ukuran yang ideal

Gambar ikon Anda akan ditampilkan dengan ukuran 16×16 piksel di tab browser. Namun, terkadang favicon juga ditampilkan di halaman website dengan ukuran 32×32 atau 64×64 piksel.

Siapkan favicon dalam format besar agar sewaktu-waktu Anda dapat mengecilkannya ke ukuran 16×16 piksel sesuai kebutuhan website.

Menggunakan format yang tepat

Kalau sebelumnya favicon hanya dapat disimpan dalam format .ico, sekarang Anda dapat menggunakan format file .png. Beberapa tool seperti faviconer.com menawarkan fitur konversi file menjadi format .ico.

Namun, Anda perlu menyimpan favicon dalam format file .svg agar bisa terbaca sebagai Pinned Tab di browser Safari.

Menggunakan style yang tepat

Perlu diingat bahwa favicon tidak hanya muncul di tab browser dan daftar bookmark, tetapi juga di menu shortcut dan homescreen perangkat mobile.

Karena itu, sebaiknya buatlah dua versi favicon: satu dengan latar belakang dan satu versi transparan ikon. Dengan demikian, favicon tetap tampil maksimal di mana saja.

2. Mengunggah favicon ke website

Seorang pria bekerja menggunakan laptop, ditemani seekor anjing

Setelah ikon selesai dibuat, langkah selanjutnya adalah mengunggahnya ke website.

Prosesnya cukup mudah. Anda hanya perlu mengganti nama file gambar yang berformat .png atau .ico menjadi ‘favicon’, lalu mengunggahnya ke root directory website.

Jika Anda sudah menyiapkan file .png, Anda mungkin perlu mengunggah lebih dari satu file untuk memenuhi berbagai standar ukuran.

Mengubah format ikon menjadi file .ico akan memudahkan Anda di tahap ini. Sebab, satu file .ico bisa menyimpan lebih dari satu gambar dalam berbagai ukuran sehingga mudah diskalakan sesuai penggunaannya.

3. Menambahkan kode HTML dasar

Kebanyakan browser mampu mendeteksi favicon tanpa mengharuskan Anda menulis kode apa pun. Biasanya, file favicon.png atau favicon.ico akan terdeteksi dan diatur sebagai ikon secara otomatis.

Kendati demikian, ada beberapa kode sederhana yang bisa Anda tambahkan untuk memastikan favicon bisa muncul di semua browser.

Anda bisa menambahkan kode HTML ‘link rel= shortcut icon’ dengan membuka file header.php, kemudian masukkan kode berikut setelah tag </head>:

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

Jangan lupa untuk mengganti jenis ekstensi file sesuai format yang digunakan untuk favicon Anda.

4. Membuat favicon yang versatile

Logo Apple

Jumlah transaksi e-Commerce melalui perangkat mobile seperti smartphone atau tablet kian meningkat. Maka dari itu, sebisa mungkin Anda harus mengoptimalkan website untuk penggunaan wireless.

Tidak menutup kemungkinan bahwa beberapa calon konsumen Anda merupakan pengguna perangkat Apple. Anda pun perlu membuat ikon Apple Touch agar favicon dapat berfungsi dan tampil optimal di perangkat mereka.

Hingga saat ini, hanya segelintir website yang sudah memiliki versi Apple Touch dari favicon mereka. Tanpa adanya favicon ini, pengguna yang menyimpan URL website di layar beranda hanya akan melihat versi mini landing page Anda.

Agar website tampak lebih profesional, Anda bisa membuat dan menggunggah file ikon khusus untuk penggunaan di Apple Touch.

Untuk membuat ikon khusus ini, siapkan file gambar dengan format .png dan ukuran maksimum 180×180 piksel agar bisa tampil optimal di berbagai ukuran layar.

Selanjutnya, Anda bisa menambahkan kode HTML tambahan untuk ikon Apple Touch ke website. Sisipkan kode HTML berikut ini:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

Cara membuat favicon yang lebih mudah

Masih ingatkah Anda? Di bagian awal artikel ini kami sudah menyebutkan bahwa ada dua cara membuat favicon sendiri untuk website atau blog.

Karena cara yang pertama cukup mudah, Anda mungkin bertanya-tanya “Memangnya masih ada cara membuat favicon yang lebih mudah?”

Tentu saja jawabannya “Ya”! Caranya adalah dengan menggunakan website builder.

Dirancang untuk memudahkan proses pembuatan website, pada umumnya website builder yang canggih sudah dilengkapi dengan generator favicon atau tool pembuat favicon.

Zyro sendiri memiliki tool Favicon Generator yang menyediakan semua informasi yang Anda perlukan untuk membuat favicon sendiri. Dengan tool ini, Anda bisa membuat favicon tanpa perlu menambahkan kode, mengubah format file, bahkan menyewa jasa desainer profesional.

Nah, selanjutnya kami akan menjelaskan langkah-langkah membuat favicon dan menambahkannya ke website menggunakan favicon generator Zyro.

Halaman beranda favicon generator Zyro

1. Pilih template

Anda bisa menggunakan salah satu template favicon siap pakai dari Zyro, atau mengunggah gambar sendiri.

2. Kustomisasikan desain

Manfaatkan semua tool yang tersedia untuk mengedit gambar atau warna, layout, dan teks.

3. Unduh hasilnya

Proses pembuatan favicon sudah selesai! Sekarang Anda tinggal mengunduh hasilnya sebagai file .png atau .ico, kemudian memasangnya di website.

Jika Anda memiliki website yang dibuat di Zyro, untuk memasang favicon tersebut Anda tidak perlu menyisipkan kode atau melakukan konversi file apa pun.

Cukup buka editor Zyro, kemudian pilih website yang ingin dipasangi favicon.

Dari menu dropdown di halaman pengaturan, pilih Pengaturan umum, klik Favicon, dan lihat opsi yang muncul.

Selanjutnya, buka Cari file untuk mencari gambar favicon yang baru Anda buat dengan tool Zyro. Klik dua kali untuk mengunggahnya.

Setelah upload selesai, lihat pratinjau untuk mengecek tampilan ikon Anda di browser.

Kalau Anda sudah puas dengan hasilnya, klik Simpan perubahan. Blog atau website Anda akan otomatis menampilkan favicon. Selamat mencoba!

Ditulis oleh

Avatar penulis

Astrid

Astrid adalah pengagum bahasa dan sastra yang kini berprofesi sebagai penerjemah. Ia ingin berbagi pengetahuan seputar teknologi, bisnis online, dan digital marketing melalui tulisannya yang dimuat di blog Zyro. Untuk mengisi waktu senggangnya, ia senang mempelajari bahasa baru, membaca buku, juga bermain alat musik Kalimba.

Tinggalkan komentar

Alamat email Anda tidak akan ditampilkan. Semua kolom wajib diisi.