Gampang! Cara Membuat Favicon Website HTML

Halo semuanya pada artikel alafgani.web.id, Kali ini kita akan membahas bagaimana Cara Membuat Favicon Website di HTML dengan mudah. Langsung saja kita bahas cara membuatnya!

Membuat Favicon

Favicon adalah salah satu hal penting untuk website, Agar website kita memiliki identitas logo yang nantinya akan ditampilkan di Menu Tab Website kita. Sepertiinilah contoh Favicon itu tampil diwebsite kita:

Membuat Favicon Website HTML

Ukuran Favicon

Gambar pada Favicon memliki ukuran icon website dan blog adalah 32×32 pixels. Pada Format gambar yang ingin dijadikan Favicon. Siapkan Gambar yang berextensi .Jpg atau .Png

Contoh : Fav.png

Mengedit Gambar Favicon

Ada banyak sekali website yang dapat membantu Anda untuk Membuat Favicon Website HTML. Salah Satunya ICO CONVERTER yang saya rekomendasikan untuk Anda.

Pertama siapkan terlebih dahulu Gambar yang ingin dijadikan Favicon, Setelah itu kita kunjungi Website ICO CONVERTER. Seperti inilah tampilan website ico converter.

membuat favicon website html

Langkah-Langkah Menggunakan ICO CONVERTER

  1. Siapkan gambar yang ingin dijadikan Favicon .jpg atau .png
  2. Pilih Chose File dari direktori komputer Anda
  3. Pilih 32 pixels.
  4. Klik Convert
  5. Otomatis akan terdownload Favicon yang sudah kita convert tadi. Lalu simpan file download di folder Anda. Seperti inilah kira-kira gambarnya:

membuat favicon website html

Cara Membuat Favicon Website HTML

Copykan file favicon yang sudah di convert tadi ke folder projek website Anda.

Perhatikan Kode HTML Anda antara tag <head>  </head>

Baca Juga : 25 Kumpulan Tag HTML

Kemudian Tambahkan kode berikut :

<link rel=“icon” href=“favicon.ico”>

Contoh Penerapan pada HTML Anda kira-kria seperti ini :

<!DOCTYPE html>
<html>
<head>
<title>Contoh Website dengan Favicon</title>
<link rel=”icon” href=”favicon.ico”>
</head>
<body>
<h1>Contoh Website dengan Favicon</h1>
<p>Ini adalah contoh website sederhana dengan favicon.</p>
</body>
</html>

Hasilnya:

membuat favicon website html

Penutup

Demikian tutorial ini, Sekarang website Anda terlihat lebih cantik dari sebelumnya yang tidak memiliki favicon, Semoga bermanfaat. Terimakasih sudah berkunjung!


Daftar Materi Belajar HTML:

  1. Pengertian HTML Lengkap dengan Fungsi, Struktur, dan Contoh Penerapannya
  2. Menampilkan Gambar pada HTML Lengkap
  3. Heading dan Contohnya
  4. Menampilkan Gambar pada HTML Lengkap
  5. Tag HTML Beserta Penjelasan dan Contohnya
  6. Paragraf HTML dan Contohnya
  7. List Pada HTML dan Contohnya
  8. Hyperlink HTML dan Contohnya
  9. Table HTML dan Contohnya
  10. Form Attribut dan Contohnya
  11. Baris baru HTML
  12. Iframe dan Contohnya
  13. Class dan Id HTML
  14. Menghubungkan HTML dan CSS
  15. Ebook HTML Lengkap

Lihat Semua materi belajar html diatas, untuk menguasai HTML dengan Cepat!

2 thoughts on “Gampang! Cara Membuat Favicon Website HTML”

Leave a Comment