Menambahkan Icon Favicon Pada HTML (Logo Tab Di Browser)
Kali ini saya akan membahas bagaimana cara menambahkan ikon website atau yang dikenal dengan Favicon pada situs / code HTML yang nantinya ikon ini akan ditampilkan pada tab browser disamping judul halaman situs tersebut.
Apa itu Favicon ?
Favicon merupakan ikon dengan ekstensi .ico yang dapat digunakan untuk menampilkan ikon pada tab web browser, secara default akan tampil ikon pada web browser di komputer. Untuk perangkat ponsel atau yang lainnya perlu pengaturan tingkat lanjut.
Bagaimana Cara Menerapkannya di Website ?
Ada 1 cara menerapkan favicon di situs web, yaitu memanggil source gambarnya pada bagian <head> dengan code seperti ini: <link href="media/image/fav.ico" rel="shortcut icon">
terapkan didalam bagian <head> pada HTML. Silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Lihat pada gambar diatas, sudah muncul ikon di tab browser disamping judul halaman dari situs tersebut.
Apakah Harus .ico Saja ?
Tidak ! Kalian dapat menggunakan jenis lain seperti jpg, jpeg, png atau yang lainnya.
Jika ingin menggunakan file .ico maka harus membuatnya di situs favicon.cc atau di situs lain yang menyediakan layanan serupa. Setelah selesai membuat file .ico langsung pindahkan ke direktori situs dan panggil di dalam <head> tadi.
Jika menggunakan ekstensi gambar lain, langsung saja pindahkan gambarnya ke direktori situs dan panggil di dalam <head> tadi.
Cara Membuat Favicon di Situs Favicon.CC Generator
Silahkan kunjungi situs favicon.cc lalu pilih metode pembuatan yang diinginkan, import gambar atau membuat baru disitu.
Jika ingin import gambar silahkan klik menu Import Image dan pilih gambar yang akan digunakan, maka gambar akan muncul dibagian menggambar kemudian scroll kebawah sedikit dan klik tombol Download Favicon untuk mengunduhnya.
Jika ingin menggambar / buat baru silahkan gambar di bagian menggambar pada layar tersebut, setelah selesai silahkan scroll sedikit kebawah dan klik tombol Download Favicon untuk mengunduhnya.
Setiap gambar pada bagian menggambar akan tampil live preview / pratinjau langsungnya di bagian bawah sebelum tombol Download Favicon, disitu kalian dapat melihat apakah gambar favicon sudah bagus atau masih kurang bagus.
Setelah selesai di download, silahkan pindahkan file tersebut ke direktori situs web kalian dan masukkan di HTML menggunakan code yang tadi dijelaskan diatas. Atau file ico tersebut langsung disimpan di folder root web servernya local host saja tanpa menambahkan code apapun.
Kesimpulan
Setiap gambar yang dibuat di situs favicon.cc berformat .ico. Jika tidak ingin menggunakan format .ico maka tidak perlu membuatnya di situs favicon.cc.
Situs favicon.cc ini hanya sebagai contoh saja, kalian dapat membuatnya di situs lain yang memiliki layanan serupa.
Selamat mencoba !
Kunjungi kategori HTML & CSS untuk mempelajari lebih lanjut tentang HTML & CSS.
Kali ini saya akan membahas bagaimana cara menambahkan ikon website atau yang dikenal dengan Favicon pada situs / code HTML yang nantinya ikon ini akan ditampilkan pada tab browser disamping judul halaman situs tersebut.
Apa itu Favicon ?
Favicon merupakan ikon dengan ekstensi .ico yang dapat digunakan untuk menampilkan ikon pada tab web browser, secara default akan tampil ikon pada web browser di komputer. Untuk perangkat ponsel atau yang lainnya perlu pengaturan tingkat lanjut.
Bagaimana Cara Menerapkannya di Website ?
Ada 1 cara menerapkan favicon di situs web, yaitu memanggil source gambarnya pada bagian <head> dengan code seperti ini: <link href="media/image/fav.ico" rel="shortcut icon">
terapkan didalam bagian <head> pada HTML. Silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Lihat pada gambar diatas, sudah muncul ikon di tab browser disamping judul halaman dari situs tersebut.
Apakah Harus .ico Saja ?
Tidak ! Kalian dapat menggunakan jenis lain seperti jpg, jpeg, png atau yang lainnya.
Jika ingin menggunakan file .ico maka harus membuatnya di situs favicon.cc atau di situs lain yang menyediakan layanan serupa. Setelah selesai membuat file .ico langsung pindahkan ke direktori situs dan panggil di dalam <head> tadi.
Jika menggunakan ekstensi gambar lain, langsung saja pindahkan gambarnya ke direktori situs dan panggil di dalam <head> tadi.
Cara Membuat Favicon di Situs Favicon.CC Generator
Silahkan kunjungi situs favicon.cc lalu pilih metode pembuatan yang diinginkan, import gambar atau membuat baru disitu.
Jika ingin import gambar silahkan klik menu Import Image dan pilih gambar yang akan digunakan, maka gambar akan muncul dibagian menggambar kemudian scroll kebawah sedikit dan klik tombol Download Favicon untuk mengunduhnya.
Jika ingin menggambar / buat baru silahkan gambar di bagian menggambar pada layar tersebut, setelah selesai silahkan scroll sedikit kebawah dan klik tombol Download Favicon untuk mengunduhnya.
Setiap gambar pada bagian menggambar akan tampil live preview / pratinjau langsungnya di bagian bawah sebelum tombol Download Favicon, disitu kalian dapat melihat apakah gambar favicon sudah bagus atau masih kurang bagus.
Setelah selesai di download, silahkan pindahkan file tersebut ke direktori situs web kalian dan masukkan di HTML menggunakan code yang tadi dijelaskan diatas. Atau file ico tersebut langsung disimpan di folder root web servernya local host saja tanpa menambahkan code apapun.
Kesimpulan
Setiap gambar yang dibuat di situs favicon.cc berformat .ico. Jika tidak ingin menggunakan format .ico maka tidak perlu membuatnya di situs favicon.cc.
Situs favicon.cc ini hanya sebagai contoh saja, kalian dapat membuatnya di situs lain yang memiliki layanan serupa.
Selamat mencoba !
Kunjungi kategori HTML & CSS untuk mempelajari lebih lanjut tentang HTML & CSS.
Komentar
Posting Komentar
This Message