Skip to content Skip to sidebar Skip to footer

Cara Membuat Favicon Blog

Cara Membuat Favicon Blog

Sebelum mengulas terkait bagaimanakah cara membuat favicon blog supaya tidak pecah atau blur, sebaiknya membahas terlebih dulu apakah itu favicon dan mengapa kamu harus memakainya di dalam blog?

Favicon, merupakan singkatan dari "favorite icon" adalah gambar icon sebuah blog yang berperan sebagai identitas visual blog atau merek suatu situs. 

Supaya mendapatkan hasil yang terbaik, sebaiknya kamu memakai gambar persegi dengan rasio 16x16 piksel supaya favicon dapat tampil secara optimal di browser internet.

Disamping itu kamu perlu mengganti format file gambar menjadi .ico supaya dapat dibaca oleh browser internet. Bagaimanakah cara mengganti gambar menjadi persegi dan dengan format favicon.ico?

Kamu dapat memakai favicon generator yang beralamatkan di https://realfavicongenerator.net/ yang bisa membantu kamu untuk mengganti gambar atau simbol kamu jadi persegi dan bisa mengubah formatnya menjadi .ico.

Kamu perlu mengupload gambar atau logo yang akan kamu dijadikan favicon dan favicon generator akan menyesuaikan dengan ukuran ideal favicon.

Cara Membuat Favicon Blog

Di bawah ini langkah-langkah membuat favicon blog:

1. Upload Gambar atau Logo

Cara Membuat Favicon Blog,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,favicon png,ukuran favicon website,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,cara membuat favicon blog bergerak,cara membuat favicon blogger,favicon for blogger,cara membuat favicon,ukuran favicon,favicon blogger,favicon blog,cara membuat icon,favicon logo,logo to favicon,logo blogspot,favicon
Upload gambar favicon

Saran saya ubah background dari gambar atau logo kamu menjadi transparan terlebih dahulu supaya tampilan dari favicon kamu bisa terlihat lebih bagus dan menarik.

2. Edit Favicon Untuk Tampilan di PC/Laptop

Cara Membuat Favicon Blog,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,favicon png,ukuran favicon website,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,cara membuat favicon blog bergerak,cara membuat favicon blogger,favicon for blogger,cara membuat favicon,ukuran favicon,favicon blogger,favicon blog,cara membuat icon,favicon logo,logo to favicon,logo blogspot,favicon
Proses edit untuk tampilan pc/laptop

3. Edit Favicon Untuk Tampilan di IOS

Cara Membuat Favicon Blog,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,favicon png,ukuran favicon website,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,cara membuat favicon blog bergerak,cara membuat favicon blogger,favicon for blogger,cara membuat favicon,ukuran favicon,favicon blogger,favicon blog,cara membuat icon,favicon logo,logo to favicon,logo blogspot,favicon
Proses edit untuk tampilan IOS

4. Edit Favicon Untuk Tampilan di Android

Cara Membuat Favicon Blog,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,favicon png,ukuran favicon website,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,cara membuat favicon blog bergerak,cara membuat favicon blogger,favicon for blogger,cara membuat favicon,ukuran favicon,favicon blogger,favicon blog,cara membuat icon,favicon logo,logo to favicon,logo blogspot,favicon
Proses edit untuk tampilan Android

5. Edit Favicon Untuk Tampilan di Windows 

Cara Membuat Favicon Blog,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,favicon png,ukuran favicon website,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,cara membuat favicon blog bergerak,cara membuat favicon blogger,favicon for blogger,cara membuat favicon,ukuran favicon,favicon blogger,favicon blog,cara membuat icon,favicon logo,logo to favicon,logo blogspot,favicon
Proses edit untuk tampilan Windows

6. Edit Favicon Untuk Tampilan di MacOS

Cara Membuat Favicon Blog,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,favicon png,ukuran favicon website,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,cara membuat favicon blog bergerak,cara membuat favicon blogger,favicon for blogger,cara membuat favicon,ukuran favicon,favicon blogger,favicon blog,cara membuat icon,favicon logo,logo to favicon,logo blogspot,favicon
Proses edit untuk tampilan MacOS

7. Generate Favicon   

Cara Membuat Favicon Blog,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,favicon png,ukuran favicon website,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,cara membuat favicon blog bergerak,cara membuat favicon blogger,favicon for blogger,cara membuat favicon,ukuran favicon,favicon blogger,favicon blog,cara membuat icon,favicon logo,logo to favicon,logo blogspot,favicon
Generate atau buat favicon yang sudah di edit

8. Unduh Favicon 

Cara Membuat Favicon Blog,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,favicon png,ukuran favicon website,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,cara membuat favicon blog bergerak,cara membuat favicon blogger,favicon for blogger,cara membuat favicon,ukuran favicon,favicon blogger,favicon blog,cara membuat icon,favicon logo,logo to favicon,logo blogspot,favicon
Jangan lupa unduh dengan mengklik paket favicon

9. Copy Code HTML

Cara Membuat Favicon Blog,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,favicon png,ukuran favicon website,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,cara membuat favicon blog bergerak,cara membuat favicon blogger,favicon for blogger,cara membuat favicon,ukuran favicon,favicon blogger,favicon blog,cara membuat icon,favicon logo,logo to favicon,logo blogspot,favicon
Masukkan kode berikut di bawah <head>

10. Cara Saya Memasukan Code

Cara Membuat Favicon Blog,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,favicon png,ukuran favicon website,favicon generator,cara mengganti favicon blogger 2020,membuat favicon online,cara membuat favicon html,favicon w3schools,cara membuat favicon di codeigniter,cara membuat favicon blog bergerak,cara membuat favicon blogger,favicon for blogger,cara membuat favicon,ukuran favicon,favicon blogger,favicon blog,cara membuat icon,favicon logo,logo to favicon,logo blogspot,favicon
Cara saya memasukan code

Ini adalah pengalaman dalam memasukan code berikut kedalam code HTML blog saya. 

Favicon atau logo blog memang benar bisa berubah dengan logo yang sudah dibuat sebelumnya, akan tetapi logo atau favicon tersebut terlihat blur atau buram dan membuat saya frustasi kala itu.

Caranya cukup mudah kamu hanya perlu mengganti code url yang berwarna merah dengan code url dari favicon yang sudah kamu unduh sebelumnya.

Sebenarnya dari apa yang sudah saya baca dari suhu-suhu blogger yang sudah berpengalaman cukup memasukan satu code saja kedalam blog misal: <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> dan ganti yang berwarna merah dengan url favicon kamu.

Belum tahu bagaimana cara membuat url gambar? baca juga cara buat link gambar

Itulah pembahasan terkait cara membuat favicon blog supaya tidak pecah. Jangan lupa klik share jika artikel ini dirasa bermanfaat.

Muhammad Nur Islam
Muhammad Nur Islam Seorang perekam medis dan penulis konten [mulai nulis sejak tahun 2020 hingga sekarang]