Apa Itu Favicon? Penjelasan Lengkap dan Cara Membuatnya

2 min read

Apa itu favicon

Pembuatan website untuk kebutuhan profesional seperti website bisnis toko online maupun yang lainnya tentu perlu dibangun dengan cermat. Tidak hanya menentukan tema dan alamat domain dengan tepat. Namun juga beberapa detail kecil, salah satunya menampilkan favicon pada tampilan website tersebut.

Berbicara mengenai favicon, tentunya untuk Anda yang masih asing dengan istilah ini akan mencoba mencari tahu lebih detail. Tidak perlu pergi jauh-jauh, karena akan Kami bahas di bawah ini.

 Apa Itu Favicon?

Apa itu favicon
Apa itu favicon

Sebelum membahas lebih jauh, hal pertama yang sebaiknya Anda pahami adalah definisi dari apa itu Favicon. Favicon sendiri merupakan kependekan dari “favorite icon”. Definisi lengkapnya adalah ikon unik pada sebuah website yang berfungsi sebagai identitas dari website tersebut. Favicon sendiri tampil di bagian tab browser dan sekilas ukurannya juga terlihat mungil.

Umumnya pengelola website akan menggunakan logo perusahaan sebagai Favicon, sehingga menyempurnakan tampilan website. Pasalnya dengan penambahan ikon unik ini maka tampilan profesional akan lebih terlihat. Beberapa orang juga bertujuan untuk mempercantik tampilan website yang dimiliki.

Proses pembuatannya pun mudah, apalagi sudah banyak generator yang bisa dimanfaatkan untuk memasangnya di website. Namun, jika paham soal coding atau mungkin ada jasa tertentu yang bisa dimintai bantuan. Besar kemungkinan pembuatan dan pemasangan Favicon ini menggunakan Favicon HTML ataupun metode lainnya.

Ukuran Favicon

Usai mengetahui definisi dari apa itu Favicon, maka bisa mengenal materi selanjutnya. Yakni detail ukuran yang dianjurkan untuk pembuatan Favicon tersebut. Biasanya ukuran Favicon akan disesuaikan dengan jenis platform yang digunakan, entah itu Google maupun iPad dan iPhone.

Berikut adalah rekomendasi ukuran Favicon di  beberapa platform yang bisa dijadikan rujukan pada saat proses pembuatan:

  •     Platform Google dianjurkan memakai ukuran 96×96.
  •     Platform Opera Coast memakai ukuran 228×228.
  •     Platform iPad Retina untuk iOS 7 ke atas memakai ukuran 152×152.
  •     Platform iPad Retina untuk iOS 6 ke atas memakai ukuran 144×144.
  •     Platform iPad Mini iOS 7 ke atas memakai ukuran 76×76.
  •     Platform iPad Mini iOS 6 ke atas memakai ukuran 72×72.
  •     Platform iPhone Retina untuk iOS 7 ke atas memakai ukuran 120×120.
  •     Platform iPhone Retina untuk iOS 6 ke atas memakai ukuran 114×114.

Jika bingung maka Anda bisa memakai metode lain untuk menentukan ukuran Favicon yang tepat. Misalnya saja untuk website dengan WordPress ataupun Blogger bisa menggunakan gambar dengan format JPG, GIF, maupun PNG dengan ukuran file tidak boleh lebih dari 100 kb.

Sedangkan detail ukuran gambarnya sendiri dianjurkan memakai settingan 16×16 pixel dengan bentuk persegi, dan bisa diedit memakai aplikasi Photoshop untuk desain Favicon keren buatan sendiri. 

Cara Membuat Favicon

Memahami apa itu Favicon lebih dalam, maka bisa dengan langsung praktek untuk membuatnya. Sebagai langkah awal dalam proses pembuatan, silahkan menentukan Favicon generator mana yang akan digunakan. Sebab beda generator yang dipakai maka beda pula langkah-langkah dalam pembuatannya. Jenis generator yang secara umum digunakan juga beragam, seperti:

  •     Faviconit
  •     Favicon.pro
  •     Anti Favicon
  •     Faviconr,
  •     dan lain sebagainya.

Biasanya Anda hanya perlu mengunggah gambar atau logo yang akan dijadikan Favicon ke generator tersebut. Oleh generator nantinya gambar akan disetting memiliki ukuran sesuai standar. Namun generator di atas biasanya digunakan jika sudah memiliki gambar atau logo yang sesuai.

Bagaimana jika belum?

Tidak perlu khawatir, karena terdapat beberapa generator yang menyediakan fasilitas pembuatan Favicon secara online. Misalnya saja generator Webestools, Favicon.cc, Logaster, atau mungkin Xiconeditor. Situs-situs ini akan membantu Anda mendesain gambar atau logo sesuai kebutuhan.

Mempermudah Anda dalam membuat dan memasang Favicon, maka penjelasan berikut mengambil contoh dari generator Favicon.cc:

1. Akses Situs Favicon.cc

Cara Membuat Favicon
Cara Membuat Favicon

Favicon.cc merupaka generator online untuk pembuatan Favicon, sesuai dengan penjelasan apa itu Favicon di atas. Akses situs ini, dan bisa membuat ikon dari nol dan bisa pula dipakai saat ikon sudah dimiliki.

Jika sudah memiliki ikon yang dirasa sesuai dan diedit memakai aplikasi Photoshop atau Corel Draw, maka tinggal diubah format filenya menjadi .ico memakai situs generator ini. Berikut detail langkah-langkahnya:

  • Buka situs Favicon.cc
  • Pilih menu “Import Image” dan tentukan dimensi gambar yang akan dipakai dengan memilih antara “Keep Dimension” atau “Shrink To Square Icon”.
  • Setelah memilih dimensi yang dipakai klik tombol “Upload” dan cari gambar sesuai lokasi penyimpanan di perangkat yang dipakai.
  • Klik “Preview” untuk melihat hasil Favicon yang dibuat sebelum diunduh, dan menekan tombol “Download” untuk mengunduhnya.

2. Proses Pasang Favicon ke WordPress

Setelah memiliki favicon, maka langkah selanjutnya tinggal dipasang ke website. Berikut tutorial pemasangan melalui WordPress:

  • Login ke WordPress.
  • Masuk ke menu “Tampilan” dan pilih “Sesuaikan”.
  • Akan masuk ke halaman What You See Is What You Get, dan cari menu “Identitas Situs” dan upload gambar Favicon yang dibuat di atas.
  • Klik tombol “Pilih” setelah gambar Favicon selesai di upload di WordPress.
  • Silahkan cek tampilan terbaru WordPress Anda di tab baru.

Pembuatan Favicon tidaklah sulit asalkan Anda tahu caranya, jadi silahkan mempraktekan penjelasan di atas. Sehingga tidak hanya paham apa itu Favicon namun juga paham cara eksekusinya.

Nah untuk Anda yang membutuhkan keperluan website, Kami memiliki rekomendasi layanan Unlimited Hosting Terbaik dengan harga murah mulai dari 30.000ribuan/bulan saja. Tunggu apalagi miliki hosting unlimited mu sekarang juga.

Terima kasih

One Reply to “Apa Itu Favicon? Penjelasan Lengkap dan…”

Leave a Reply

Your email address will not be published. Required fields are marked *