Bagaimana Cara Memasang Favicon Dengan Metode Html Pada Blogger?

Memasang Favicon Dengan Metode Html Pada Blogger

Hallo, Fighazmc.com pada artikel kali ini akan memberikan Cara Memasang Favicon Dengan Metode Html Pada Blogger.

Oiya, Sedikit informasi yah, buat Anda-anda yang sudah paham atau "SUHU", bisa skip aja cara ini.

Nah cara ini di minta oleh salah satu teman blogger yang seperti saya ini, dalam artian skil kami dalam pengodingan masih pas-pasan.

Yah, jadi saya bagikan cara ini secara gratis, karena waktu doloe, saya dapatnya juga secara gratis, Kalian Percaya?.

Jadi simak sampai selesai yah artikel ini, dan perhatikan setiap langkah yang saya jabarkan dibawah ini.

Apa Itu Favicon?

Favicon adalah singkatan dari "favorite icon" atau ikon favorit.

Ikon ini muncul di sebelah judul halaman web di tab browser dan juga di sebelah nama situs web saat ditandai sebagai favorit atau ditambahkan ke daftar bookmark.

Favicon sering kali berupa gambar kecil atau logo yang merepresentasikan situs web tersebut.

Tujuannya adalah untuk memberikan identitas visual yang mudah dikenali dan membedakan situs web dari yang lain.

Favicon juga membantu pengguna mengenali situs web dengan cepat ketika mereka memiliki banyak tab terbuka dalam browser mereka.

Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language.

Ini adalah bahasa markup yang digunakan untuk membuat dan mengatur tampilan halaman web.

HTML digunakan untuk memberi struktur dan memformat konten pada halaman web, termasuk teks, gambar, tautan, tabel, formulir, dan elemen-elemen lainnya.

Dengan menggunakan tag-tag HTML, kita dapat menentukan bagaimana halaman web akan ditampilkan di browser.

Jadi, HTML adalah dasar dalam membangun halaman web dan menjadi fondasi bagi banyak teknologi web lainnya.

Apa Itu Blogger?

Blogger adalah platform yang populer untuk membuat dan mengelola blog pribadi.

Jadi, jika kamu suka menulis dan ingin berbagi pemikiran, pengalaman, atau pengetahuanmu dengan orang lain, Blogger bisa menjadi teman terbaikmu.

Kamu bisa membuat blog dengan mudah tanpa perlu memiliki keahlian teknis yang tinggi.

Selain itu, Blogger juga menyediakan berbagai fitur dan template yang bisa kamu gunakan untuk mengatur tampilan blogmu sesuai dengan keinginan.

Jadi, tak perlu ragu untuk menjadi seorang blogger dan mengekspresikan diri melalui tulisan-tulisanmu!

Apa Itu Favicon Di HTML?

Favicon dalam HTML adalah ikon kecil yang muncul di tab browser atau di sebelah judul halaman web di bilah alamat.

Biasanya, favicon adalah gambar atau logo yang merepresentasikan situs web tertentu.

Favicon membantu mengidentifikasi dan membedakan satu tab dari yang lainnya, sehingga pengguna dapat dengan mudah mengenalinya ketika membuka banyak tab sekaligus.

Ini juga memberikan kesan profesional dan konsisten pada situs web.

Dalam HTML, favicon ditentukan dengan menggunakan tag <link> dengan atribut rel="icon" dan menunjuk ke file gambar yang berisi ikon favicon.

Cara Memasang Favicon Dengan Metode Html Pada Blogger

Oke Jadi gini, Sebelum Kalian Otak-atik tema blog yang kalian gunakan, Saran Saya Cadangkan Terlebih Dahulu tema Yang Sedang Kalian Gunakan Sekarang.

Cara Cadangkan Tema Blog Di Blogspot Sebelum Memasang Favicon Dengan Metode HTML pada Blogspot atau Blogger

Di Halaman Dasbor Blogspot, Kalian Pilih "Tema"
Lalu Pilih Icon Yang Seperti "🔽" Di Samping Tulisan "Sesuaikan"
Lalu Kalian Pilih "Cadangkan"

Maka Tema Akan Dicadangkan Otomatis Atau terunduh otomatis.

Langkah selanjutnya kalian salin script dibawah ini

Script Favicon Dengan Metode HTML di Blogger Atau Blogspot

<link href='ganti link favicon raw.githubusercontent.com kalian' rel='apple-touch-icon' sizes='57x57'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='apple-touch-icon' sizes='60x60'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='apple-touch-icon' sizes='72x72'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='apple-touch-icon' sizes='76x76'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='apple-touch-icon' sizes='114x114'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='apple-touch-icon' sizes='120x120'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='apple-touch-icon' sizes='144x144'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='apple-touch-icon' sizes='180x180'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='icon' sizes='192x192' type='image/png'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='icon' sizes='32x32' type='image/png'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='icon' sizes='96x96' type='image/png'/>
<link href='ganti link favicon raw.githubusercontent.com kalian' rel='icon' sizes='16x16' type='image/png'/>
<meta content='ganti link favicon raw.githubusercontent.com kalian' name='msapplication-TileImage'/>
<link href='Link jsdelivr.net kalian' rel='manifest'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='resizeImage(data:favicon,32,&quot;1:1&quot;)' rel='icon' sizes='32x32' type='image/png'/>
<link expr:href='resizeImage(data:favicon,96,&quot;1:1&quot;)' rel='icon' sizes='96x96' type='image/png'/>
<link expr:href='resizeImage(data:favicon,144,&quot;1:1&quot;)' rel='icon' sizes='144x144' type='image/png'/>
<link expr:href='resizeImage(data:favicon,180,&quot;1:1&quot;)' rel='apple-touch-icon' type='image/png'/>
<link expr:href='resizeImage(data:favicon,152,&quot;1:1&quot;)' rel='apple-touch-icon-precomposed' type='image/png'/>
<meta expr:content='resizeImage(data:favicon,150,&quot;1:1&quot;)' name='msapplication-TileImage'/>

Setelah Kalian Salin Script diatas, sekarang kalian kembali ke dasbor blogger, lalu masuk ke "Tema", lalu pilih icon seperti "🔽" di samping tulisan "Sesuaikan", lalu kalian pilih "Edit HTML" Dan Pastekan Script Diatas Tepat setelah atau didalam tag ""

PENTING!
Tulisan "ganti link favicon raw.githubsercontent.com kalian" silahkan kalian gamti dengan ling gambar atau url favicion kalian yang sudah klian upload di gituhub.
Tulisan "Link jsdelivr.net kalian" silahkan ganti dengaan link jsdeliver.net kalian.

Cara Upload Gambar Ke Github

Siapkan Gambar yang ingin di jadikan gambar favicon blog kalian. terserah mau ukuran berapa, kalo punya saya 500x500 atau 1000x1000.
Kunjungi https://github.com/ dan login atau buat akun
setelah itu pilih "Repositories"
lalu pilih "New"
lalu di bagian "code" pilih "go to file"
lalu pilih "Add File"
dan pilih "Upload files"
setelah berhasil di upload, pilih gambar tersebut, lalu klik kanan pada gambar dan pilih "Lihat Di Tam Baru" atau "Lihat pratinjau gambar.
Setelah itu salin link URL gambar tersebut.

Cara Kompres Atau Ubah Gambar Dari Github Menjadi Favicon Menggunakan jsdelivr.com

Sebelum

Kunjungi https://www.jsdelivr.com/
Lalu pilih garis tiga di bagian kanan atas (menggunakan HP) atau pilih menu "Tools"
Pilih "Github"
Pastekan URL gambar Yang tadi kalian salin dari github
Setelah itu salin URL yang diberikan www.jsdelivr.com

Sesudah

Setelah Semua URL selesai kita buat, maka langkah selanjutnya, silahkan kembali pada bagian "Script Favicon Dengan Metode HTML di Blogger Atau Blogspot" dan ganti seperti yang saya jelaskan diatas Dan Simpan Perubahan untuk melihat Hasilnya.

Sekian Untuk Tutorial Cara Memasang Favicon Dengan Metode Html Pada Blogger.

Semoga Bisa Bermanfaat Selamat Mencoba!

Fighaz Mc Halo! Saya adalah pemilik blog fighazmc.com, sebuah ruang pribadi saya untuk berbagi tips, informasi, dan pengetahuan seputar dunia internet dan teknologi. Mari jelajahi dunia digital bersama!