-->

Belajar HTML #16 : Cara membuat Favicon HTML

Konten [Tampil]

    Favicon HTML, Favicon adalah ikon kecil yang muncul di browser di sebelah judul halaman web dan pada tab browser. Favicon biasanya digunakan untuk merepresentasikan identitas atau merek dari sebuah website dan membantu pengguna mengenali website tersebut dengan mudah.

    Favicon HTML

    Membuat Favicon pada HTML sangat mudah dilakukan. Berikut adalah langkah-langkah untuk membuat favicon pada website HTML:

    Buatlah gambar favicon dengan ukuran 16x16 pixel atau 32x32 pixel. Format gambar yang digunakan harus dalam format PNG, GIF, atau ICO.

    Simpan gambar favicon di direktori root dari website Anda.

    Tambahkan tag link pada bagian <head> dari halaman HTML Anda, seperti di bawah ini:

    
    <head> 
        <link rel="icon" type="image/png" href="/favicon.png">
    </head> 
    

    Pada contoh di atas, favicon bernama "favicon.png" disimpan di direktori root dari website.

    Simpan perubahan pada file HTML dan buka website Anda di browser. Favicon akan muncul pada tab browser dan sebelah judul halaman.


    Catatan: Anda dapat mengganti nama dan jenis file favicon sesuai dengan kebutuhan Anda.

    Selain itu, Anda juga dapat menambahkan favicon untuk perangkat seluler dengan menambahkan tag link berikut pada bagian head dari halaman HTML Anda:

    
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    

    Pada contoh di atas, gambar yang digunakan untuk favicon seluler bernama "apple-touch-icon.png" dan memiliki ukuran 180x180 pixel. Anda dapat mengganti ukuran dan nama file gambar sesuai dengan kebutuhan Anda.

    Jika logo website yang anda miliki berupa file dengan extension .jpg, .png, anda dapat merubah file tersebut menjadi file dengan extension .ico dengan menggunakan bantuan applikasi favicon generator online yang banyak tersedia di mesin pencari.

    Dalam kesimpulan, membuat favicon pada HTML sangat mudah dan sederhana. Dengan menambahkan tag link pada bagian head dari halaman HTML, Anda dapat menampilkan favicon pada website Anda dan memudahkan pengguna untuk mengenali website Anda dengan mudah.

    LihatTutupKomentar