How to display icon on every web page

by Admin on May.30, 2009, under Tips & Trik, Tutorial, Website

How to display icon on every web page

Maybe you wonder why I can display special logo on every web page on this website. Definitely easy, you just need to make special icon file that represent your website, it’s called favicon. I’ll explain it slowly. Favicon file you need to make must in special condition so it can display on your website. Here is the condition:

1. The file must be in .ico format

2. graphic size must be 16 x 16 pixel

These steps you need to do to display icon on every web page

1. Make a logo with graphic software, you can use photoshop, coreldraw, or any other graphic software you have. Because the size is so small, you can make it first with a bigger size (128×128 pixel)

2.After finished designing the logo, now downsizing the pixel using existing facilities on your software into 16×16 pixel

3. Save the file with BMP / JPG format, name it favicon so the file name would be favicon.bmp or favicon.jpg

4. Download this software to change the logo you’ve made into icon

5. Open the program you already download, then open the logo you’ve made with ‘open image’

6. Select 16×16 pixel size with 24-bit color depth

7. Then click save icon, name it ‘favicon’ (must)

8. Upload the file you’ve made to the same folder with index.html so it can display on every web page

9. the last thing you need to do is add tag <link rel=”shortcut icon” href=”favicon.ico” /> to your website html code (index.html), right between <head> and </head>

10. Check with your browser, the icon you’ve made should appear on every web page

Share and Enjoy:

:Buat Web, Tips-Trik

24 Comments for this entry

zaenal
February 27th, 2012 on %I:%M %p
Salam kenal, kawan
Saya sudah lama cari-cari tutorial seperti ini, baru menemukan di sini, sudah saya coba tapi belum sukses, apakah bisa di gunakan website yang menggunakan CMS? kebetulan saya menggunakan Simple CMS, dan saya tidak menemukan index.html yang ada template.htm, bagaimana nih, mohon penjelasannya, terima kasih semoga ilmunya berkah, amin

Reply
- Admin
  March 6th, 2012 on %I:%M %p
  to: zaenal
  sebenarnya bisa pakai cms pak, tapi tutorialnya tidak disini pak. Yang saya ajarkan disini yang paling sederhana
  karena kalau pakai cms harus pakai database juga
  
  Reply
Andrei
February 14th, 2012 on %I:%M %p
Thanks Gan, skrip nya jalan, Wish u Best lahh

Reply