Tutorial Cara Membuat Favicon HTML untuk Pemula
Irhan Hisyam Dwi Nugroho
•
22 May 2025
•
115
Cara membuat favicon HTML penting banget kamu pelajari supaya website kamu makin profesional dan mudah dikenali. Ikon kecil di tab browser itu namanya favicon, dan fungsinya sangat membantu pengunjung.
Di tutorial ini, MinDi bakal kasih tahu langkah mudah bikin favicon dari awal sampai pasang di HTML. Yuk, simak supaya website kamu makin kece dan terpercaya!
Apa Itu Favicon?
Favicon adalah ikon kecil yang muncul di tab browser saat kamu membuka sebuah website, biasanya berukuran 16x16 piksel.
Ikon ini berfungsi untuk membantu pengguna mengenali dan membedakan situs yang sedang mereka kunjungi dengan cepat dan mudah.
Selain di tab browser, favicon juga sering tampil di bookmark dan daftar riwayat penelusuran, memperkuat identitas merek sebuah website.
Dengan favicon yang menarik dan konsisten, website kamu akan terlihat lebih profesional dan mudah diingat oleh pengunjung.
Baca juga : Panduan Memilih Bootcamp Front-End Development Terbaik 2025
Cara Membuat Favicon HTML
Sumber: Canva
Sebelum membahas cara membuat favicon html, ada beberapa langkah penting yang harus kamu lakukan. Dengan langkah yang tepat, favicon kamu akan tampil sempurna di semua browser.
1. Siapkan Gambar Favicon
Mulailah dengan membuat atau memilih gambar dalam format JPG, PNG, atau SVG yang ingin dijadikan favicon.
Gambar ini harus jelas dan simpel karena favicon tampil dengan ukuran kecil. Pastikan juga ukuran gambar biasanya 16x16 atau 32x32 piksel agar tetap terlihat baik.
2. Konversi ke Format ICO
Karena sebagian besar browser mengenali favicon dalam format ICO, kamu perlu mengonversi gambar tadi ke format ini.
Banyak tools online gratis yang bisa membantu kamu mengubah format gambar dengan mudah. Proses konversi ini penting agar favicon bisa tampil dengan sempurna di berbagai perangkat.
3. Pasang Kode Favicon di HTML
Setelah favicon siap, tambahkan kode <link rel="icon" href="path/favicon.ico" type="image/x-icon"> di bagian <head> halaman HTML.
Kode ini memberitahu browser untuk menampilkan favicon yang sudah kamu buat. Pastikan path menuju file favicon sudah benar agar ikon muncul tanpa masalah.
Baca juga : 7 Rekomendasi Bootcamp Programmer Gratis & Bersertifikat
Cara Convert Format Gambar
Setelah kamu menyiapkan gambar favicon dalam format JPG, PNG, atau SVG, langkah berikutnya adalah mengubahnya ke format ICO.
Format ICO adalah standar favicon yang paling kompatibel dengan berbagai browser dan perangkat.
- ConvertICO.com
- Online-Convert.com
Setelah kamu punya file favicon dalam format ICO, kamu perlu memberitahu browser untuk menggunakan file tersebut lewat tag <link> di bagian <head> HTML.
Kode ini menghubungkan file favicon dengan halaman web sehingga ikon kecil itu muncul di tab browser
Contoh kode yang bisa kamu gunakan:
<link rel="shortcut icon" href="letakkan lokasi file gambar di sini"> |
Ganti bagian letakkan lokasi file gambar di sini dengan lokasi sebenarnya dari file favicon kamu, misalnya "favicon.ico" atau "assets/favicon.ico".
Simpan file gambar favicon (favicon.ico) di folder yang sama dengan file HTML kamu agar mudah diakses. Misalnya, jika file HTML kamu bernama index.html, letakkan favicon.ico di folder yang sama atau sesuaikan dengan keinginan.
Contoh Kode HTML Lengkap:
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Contoh Website dengan Favicon</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> <body> <h1>Selamat datang di Website Saya!</h1> <p>Ini adalah contoh halaman dengan favicon yang sudah dipasang.</p> </body> </html> |
Hasil Tampilan Favicon:
Saat halaman ini dibuka di browser, kamu akan melihat ikon kecil (favicon) di tab browser sebelah judul halaman seperti ini:
Baca juga : Cara Membuat Website dengan HTML dan CSS Langkah Mudah
Ingin Jadi Web Developer Profesional?
Setelah mempelajari tutorial cara membuat favicon HTML, sekarang saatnya kamu mengembangkan kemampuan coding lebih dalam lagi!
Yuk, ikuti Bootcamp Web Development di dibimbing.id! Di sini, kamu akan belajar HTML, CSS, JavaScript, dan teknologi web modern lainnya secara praktis dan aplikatif.
Belajar langsung dari mentor berpengalaman dengan kurikulum yang dirancang untuk membantumu menciptakan website profesional dan siap kerja.
Dengan dukungan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni mencapai 96%, peluang kariermu di dunia IT semakin terbuka lebar!
Jadi, tunggu apa lagi? Hubungi di sini dan daftar sekarang di dibimbing.id untuk mulai perjalananmu menjadi Web Developer profesional. #BimbingSampeJadi!
Referensi
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
