Cara Membuat Favicon Dengan HTML

Yups, ketemu lagi dengan saya si mimin yang cakep dan baik hati, semoga tidak bosan ya dengan materi yang saya berikan.

Pada kali ini saya akan membahas tentang bagaimana cara nya membuat favicon pada HTML.

Jadi begini nih buat agan sista yang belum tahu, favicon itu adalah sebuah icon atau logo yang muncul padd address bar suatu website dan merupakan logo dari website tersebut, bisa juga di sebut sebagai shortcut icon, Web site icon, URL icon, atau bookmark icon. Nah buat kamu yang sering browsing, coba perhatikan hampir mayoritas website yang kalian kunjungi pasti memiliki favicon. Tujuannya antara lain sebagai pemercantik juga sebagai identitas sebuah website selain logo di halaman website tersebut.

Terus, gimana cara membuat dan memasang nya?

Langkah awal yang harus kita butuhkan adalah siapkan bahan berupa icon / logo website yang akan kalian gunakan untuk membuat favicon. Biasanya untuk membuat favicon, kita perlu siapkan logo yang memiliki bentuk persegi, dimana dimensi panjang x tingginya sama.

Setelah sudah di buat, kita bisa menyimpannya dalam format ico, png, atau jpg. Namun, dalam penggunaannya, jamak di gunakan favicon berformat ico, mungkin di karenakan file ico menggunakan kompresi yang mengubah ukuran dan resolusi file nya menjadi kecil, sehingga lebih ringan di load.

Selanjutnya, bagaimana cara memasangnya di halaman web kita?

Cara nya yaitu dengan menggunakan tag <link> yang kamu sematkan pada HTML di dalam bagian <heading>. Cara menggunakan nya seperti berikut:

Format

link rel="shortcut icon" href="[lokasi dan nama file favicon]"

Misal

link rel="shortcut icon" href="img/favicon.ico"

Atau bisa juga menggunakan format lain seperti yang saya sebutkan di atas

link rel="shortcut icon" href="img/favicon.png"
link rel="shortcut icon" href="img/favicon.jpg"

Sangat mudah bukan? Sekian tutorial ini, semoga bermanfaat.