Cara Membuat Favicon Di Blogger (Blogspot) Dengan HTML

Cara Membuat Favicon Di Blogger (Blogspot) Dengan HTML
Daftar Isi Artikel

Masdaffa.com, Cara Membuat Favicon Di Blogger (Blogspot) Dengan HTML - Bagi kamu yang sudah lama menggeluti dunia blogging pasti tidak asing dengan favicon, Tetapi bagi kamu yang baru terjun mungkin akan sedikit bingung tentang apa itu Favicon?.

Sebelum ke tutorial ada baiknya kita bahas terlebih dahulu mengenai apa itu Favicon supaya kita bisa lebih paham untuk melanjutkan ke tutorialnya, Cuss langsung saja simak penjelasannya dibawah ini.


Apa Itu Favicon?

Favicon adalah sebuah icon/logo yang terdapat pada address bar browser, Favicon juga bisa disebut sebagai Shortcut icon atau Bookmark icon pada laman browser.

Kata Favicon sendiri adalah sebuah singkatan dari Favorit Icon, Umumnya bentuk favicon menyesuaikan bentuk logo dari situs aslinya.

Bisa dikatakan favicon adalah logo ikonik dari suatu situs makanya mayoritas website yang sudah terkenal mereka memakai favicon untuk menunjukkan ciri khas pada situs mereka, contoh dari favicon bisa kamu lihat sendiri pada bar web browser situs masdaffa.com

Format file berkas pada Favicon adalah .ico, file berkas ini memiliki ukuran logo yang sangat kecil yakni pada rentang ukuran dari 16 x 16, 32 x 32, 48 x 48, 64 x 64, Sampai 128 x 128 pixel.

Sedangkan ukuran Favicon yang biasa kita lihat di address bar berukuran 16 x 16 pixel dan itu adalah ukuran ideal dari sebuah icon address bar.

Jika kamu hendak memasang favicon usahakan file icon pada situs tidak melebihi 100kb karena itu akan berdampak pada loading situs kamu, nahh dibawah ini akan kita mulai membahas cara memasang favicon di blogger.


Cara Membuat Favicon Di Blogger

Size favicon tidak bisa melebihi 100kb karena memang itu sudah standar ukurannya di peramban browser supaya bisa tampal lebih maksimal, Kamu bisa memakai beberapa tools yang bertebaran di internet atau buat sendiri logonya dengan memakai media desain seperti Canva.

Agar pemasangan favicon berjalan lancar kamu harus menggunakan file berkas .ico dengan ukuran 16 x 16 pixel dan file size yang tidak boleh lebih dari 100kb, Di tutorial kali ini kita akan memakai bantuan dari tools online bernama Favicon Generator.

Jika file favicon lebih dari 100kb maka sistem blogger secara otomatis akan menolak file tersebut, kamu bisa mengatasi hal ini dengan cara mengompres gambarnya. untuk tutorial kompres gambar bisa kamu ikuti di

- Cara Mudah Mengkompres Gambar Png Dan Jpg Tanpa Mengurangi Kualitasnya


Cara Membuat Favicon Menggunakan Favicon Generator

Di artikel ini saya akan menggunakan tools Favicon Generator dari favicon.co tidak ada alasan khusus mengapa saya memilih situs ini, pada dasarnya semua tools Favicon Generator sama saja.

Tetapi karena menurut saya situs ini cukup user friendly buat pengguna awal jadinya saya make tools ini deh untuk tutorial ini, Baiklah mari simak langkah-langkahnya berikut ini.


Langkah Pertama : Siapkan Bahan Gambar

Sebelum membuat favicon untuk situs, kamu harus terlebih dahulu memiliki gambar yang akan dijadikan icon untuk gambar saya sarankan menggunakan logo bulat atau persegi untuk pengalaman yang lebih baik (Optional).

Tidak ada logo? Tenang, Kamu bisa memakai software gratisan seperti Adobe Photoshop, Corel Draw, Apk Pixellab di android atau tools internet desain yang banyak dipakai di kalangan UMKM, Canva!.

Tetapi jika kamu mau yang instant dan hasil yang lebih memuaskan kamu bisa memesan jasa desain logo yang bertebaran di Sosmed.


Langkah Kedua : Membuat Favicon

Silahkan kamu kunjungi dulu situs favicon generatornya https://favicon.io

Selanjutnya klik yang PNG ke ICO (Disini ada beberapa format yang bisa di convert ke ICO contohnya txt dan Emote tetapi kita disini memilih PNG karena file yang akan kita convert berupa gambar).

Selanjutnya klik kotak yang bertuliskan "Drag and drop your file here or click here to upload" dan ambil gambar logo yang telah dibuat tadi.

Lalu langkah terakhir klik tombol Download

Nantinya file yang terunduh akan berbentuk ZIP (Bersarang) dan untuk kamu yang belum tau cara membuka 'Bungkusnya' kamu bisa ikuti tutorialnya di

Cara Mengekstrak File Dengan Winrar


Langkah Ketiga : Memasang Favicon Di Blogger (Blogspot)

Cara Pertama :

  1. Login ke dashboard blogger kamu
  2. Pilih "Setelan" pada menu dropdown
  3. Lalu klik Favicon yang ada di menu dasar setelan (Lebih jelasnya lihat di gambar!)

Masukan gambar favicon yang sudah disimpan tadi lalu klik Simpan, jika tanda ikonnya muncul berarti favicon telah berhasil diunggah


Cara Kedua :

  1. Login ke dashboard blogger kamu
  2. Pilih "Tema" pada menu dropdown
  3. Klik tanda panah kebawah
  4. Lalu pilih "Edit HTML" (Lebih jelas lihat gambar dibawah)

Kemudian tambahkan Kode dibawah ini tepat diatas </head>

<link href='URL ICON' rel='icon' type='image/gif'/>

Keterangan:

Ganti URL ICON dengan URL atau link gambar favicon yang sudah diupload tadi lalu terakhir klik "Simpan Template".

Untuk memastikan apakah favicon sudah terpasang dengan benar atau belum, kamu bisa merefresh halaman blog dan lihat logo faviconnya pada bar web browser mu.