Cara Menampilkan Icon Pada Setiap Halaman Website Anda

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

Cara Menampilkan Icon Pada Setiap Halaman

Mungkin anda heran bagaimana saya bisa membuat logo khusus untuk website saya. Pada dasarnya sangat mudah, anda hanya perlu membuat file icon khusus yaitu favicon untuk website anda. Saya akan jelaskan secara perlahan. File favicon harus anda buat dengan ketentuan khusus agar dapat tampil di website anda, berikut ketentuannya:
1. Format yang dipakai harus .ico
2. Ukurannya harus 16 x 16 pixel

Langkah-langkah yang harus anda lakukan
1. Buatlah sebuah logo dengan program grafis yang anda pilih sendiri, anda bisa memakai photoshop atau coreldraw atau program lain terserah anda. Karena ukurannya yang sangat kecil buat saja dengan ukuran yang agak besar (128×128)
2. Setelah selesai mendesain logonya sekarang perkecil ukuran pixelnya dengan menggunakan fasilitas yang ada pada photoshop menjadi 16×16.
3. Simpan dengan format BMP atau JPG dengan nama favicon
4. Download dahulu program ini untuk mengubah logo yang telah anda buat menjadi icon
5. Buka program yang telah anda download, kemudian carilah logo yang telah anda buat dengan ‘open image’
6. Pilih ukuran filenya 16×16 dengan color depth 24bit
7. Kemudian klik save icon, beri nama favicon (harus)
8. Uploadlah file yang telah anda buat pada folder yang sama dengan index.html (dengan demikian icon anda akan ditampilkan di seluruh halaman website anda
9. Hal terakhir yang perlu anda lakukan adalah menambahkan tag <link rel=”shortcut icon” href=”favicon.ico” /> pada kode html website anda (index.html), tepat diantara <head> dan </head>
10. Upload file index.html yang telah anda edit.
11. Silahkan periksa kembali dengan browser anda seharusnya icon yang anda buat sudah muncul dalam setiap halaman website anda.

Share and Enjoy:

:Buat Web, Tips-Trik

21 Comments for this entry

arman
Januari 10th, 2012 on 8:29 pm
setelah tanda petik favicon.ico” /> terakhir dikasih tanda /
selamat mencoba
tx

Balas
- Admin
  Januari 21st, 2012 on 12:09 pm
  to: arman
  terimakasih banyak masukannya. Saya kurang lengkap codenya kelupaan. Sudah saya ganti kok
  
  Balas
arman
Januari 10th, 2012 on 8:27 pm
to dewi dan admin
saya menemui masalah yang sama namun bisa diselesaikan dengan menambahkan coding yang lengkap yaitu

kuncinya digaris miring terakhir
btw tx to admin atas sharing ilmunya

Balas
dewi
November 17th, 2011 on 7:55 am
mas kuq saya buat favicon ga muncul ya ?…bingung apa yang slah???

Balas
- Admin
  November 18th, 2011 on 10:53 pm
  to: dewi
  sudah diikuti persis seperti tutorial? di uplod pada folder yg sama dengan index.html, kemudian tambahkan tag pada kode html websitenya. Pasti bisa kok bu, pasti ada yang salah kalau sampai tidak bisa
  
  Balas
skarepe
November 11th, 2011 on 8:38 am
ini dia yg ku cari akhrnya ktmu jg? Thanks ats infonya

Balas