Cara menampilkan favicon pada website

Dalam pelajaran HTML kali ini kita akan mempelajari tentang bagaimana cara memasang favicon pada website.

Favicon (Favourite Icon) adalah sebuah icon image yang berukuran kecil yang ditampilkan di address bar dan tab browser.

favicon


Dengan adanya favicon ini memang akan kelihatan menarik, bahkan kita bisa hafal suatu situs web dengan hanya melihat favicon-nya saja. Jika kita memiliki banyak bookmark di browser kita, maka kita akan melihat beraneka ragam favicon disana.

Lantas bagaimana cara memasang favicon tersebut?

Pertama, anda harus memiliki gambar yang ber-ekstensi .ico, yang standar ukurannya sekitar 16X16px, program grafik seperti Photoshop atau Corel Draw bisa membuat jenis file ini, namun jika anda ingin yang siap saji anda bisa mencarinya di internet dengan kata kunci free favicon.

Jika anda sudah menemukan icon yang anda sukai, download dan simpan icon tersebut ke komputer anda dengan nama "favicon.ico"

Selanjutnya agar dokumen html dapat menampilkan icon ini, kita harus menambahkan kode berikut ini di antara tag elemen <head> dan </head>:
<link rel="shortcut icon" type="image/ico" href="favicon.ico">

Setelah dimasukkan kedalam dokumen html maka akan terlihat seperti dibawah ini:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel Websiteku</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
</head>
<body>
<p>Harap tenang... saya sedang belajar memasang favicon pada blog</p>
</body>
</html>
Buka Notepad kemudian salin kode diatas dan simpan ke komputer dengan nama "testicon.html" jangan lupa agar menyimpannya di folder yang sama dengan favicon.ico tadi.

Selanjutnya dengan browser buka file "testicon.html" tersebut, maka jika anda melakukannya dengan benar maka favicon tersebut akan tampil di address bar dan tab browser anda.


Memasukkan kode favicon di Wordpress blog secara manual.

Caranya adalah dengan memasukkan favicon.ico tersebut ke folder themes favorite kita, kemudian buka file "header.php" dan masukkan kode berikut ini diantara tag elemen <head> dan </head>:

<link rel="shortcut icon" type="image/ico" href="<?php bloginfo('template_url'); ?>/favicon.ico" />

Catatan: Cara ini tidak bisa dilakukan di Wordpress.com, karena kita tidak diizinkan untuk mengedit template.

Untuk mengganti favicon di Blogger, anda bisa mengikuti petunjuk pada artikel yang lain Menampilkan Faviocon pada Blog.

No comments:

Post a Comment