Favicon atau icon ini merupakan logo atau sebuah lambang dari sebuah website yang berada pada tab browser, letak dari icon favicon sendiri bisa dilihat pada bagian kiri atas sebelum tittle website. Bagaimana cara mengubah icon favicon secara dinamis sangat mudah caranya ,yuuuk disimak langkah-langkah membuatnya. Sebelumnya saya berikan contoh letak dari favicon pada web browser itu bisa dilihat seperti gambar dibawah ini:

Contoh-letak-favicon

Baiklah dimulai saja pembuataanya , pertama-tama siapkan file gambar yang akan dibuat icon favicon nya, jika sudah sahabat bisa langsung saja generate favicon disini. Jika sudah simpan file yang sudah tergenerate. berikutnya buat file HTML seperti berikut ini ;

pada file html saya membuat 2 buah button yang nanti ada sebuah event onclick agar bisa mengubah icon favicon ya.

Langkah yang kedua tambahkan style CSS agar tampilan rapih , coba ketikkan code css berikut:

dan yang penting yaitu script dari javascript seperti dibawah ini

pada script diatas ada 2 fungsi yang digunakan untuk :

  • function toGreen : saat event button di klik icon favicon akan berubah menjadi hijau.
  • function toBlue : maka button Blue di klik icon favicon berubah menjadi biru.

Jika sudah benar mengikuti setiap langkahnya ,seperti tampilan dibawah ini hasilnya :

Membuat Dinamic Icon Favicon dengan Javascript

Sampai disini pembahasan tentang cara membuat dinamis favicon dengan javascript , semoga bermanfaat sampai jumpa dalam pembahasan artikel lainnya.

terima kasih.