//
you're reading...
Uncategorized

Membuat Favicon (icon di sebelah address bar)

Anda mungkin heran bagaimana ikon ini muncul di samping alamat web/address bar, seperti yang Anda lihat di atas pada blog ini. Ketika Anda mengunjungi suatu situs & mem-bookmarknya, ikon ini akan membuat URL ini lebih menonjol/terlihat. Inilah yang dimaksud dengan “Favicons” / “Favorite Icon”.

Membuat Favicon (icon di sebelah address bar)

Pertama-tama Anda butuh sebuah ikon yang berekstensi .ICO. Saya sarankan Anda membuat 1 ikon baru sebagai identitas unik Anda sendiri. Ada banyak software editor ikon gratis yang dapat Anda download dari internet.

Pergi ke situs http://www.download.com & download program yang ukurannya kecil, yaitu Imagicon yang dapat mengubah gambar ke dalam format .ICO. Saya membuat gambarnya dengan menggunakan Adobe Photoshop. Anda dapat menggunakan gambar/foto apapun jika Anda tidak ingin membuat yang baru. Selanjutnya, jalankan program. Ketika Anda dapat membuat ikon dalam 2 ukuran 16×16 & 32×32, saya kira ikon 16×16 adalah yang lebih baik karena dapat dibaca di browser-browser lama. Download program Imagicon di sini (Gratis – Windows 98/Me/NT/2000/XP/Vista – 948,04Kb).

Jika Anda tidak ingin mendownload software apapun, Anda juga dapat mencoba membuat ikon secara online. Cukup masukkan kata kunci “online icon generator” ke dalam kotak pencarian Google bar & Anda dapat menemukan beberapa program yang dapat Anda coba.

Setelah Anda membuat sebuah ikon, save ke dalam harddisk. Langkah selanjutnya untuk menampilkan ikon di address bar perlu sedikit trik. Idealnya, semua yang perlu Anda lakukan adalah menyimpan ikon itu di direktori root situs blog Anda. Meskipun demikian, tidak ada cara yang dapat dilakukan untuk melakukan itu. Pertama, jika Anda mencoba untuk meng-upload ikon gambar, Blogger akan menolaknya. Yang ke-2, file apapun yang diupload tidak akan masuk ke dalam root direktori Blogger.

Satu-satunya cara yang dapat digunakan adalah dengan meng-upload ikon ke dalam beberapa folder web & membuat link. Cari situs & pilih yang cepat, handal & dapat meng-upload file ICO.

Setelah Anda melakukannya, catat URL ikon Anda. Jika Anda menggunakan Google Page Creator, layangkan mouse Anda ke sebelah link, Anda akan melihat file yang disimpan di bawah direktori yang terlihat seperti ini http://yourname.googlepages.com/iconname.ico. Dimana “yourname” adalah nama account Gmail Anda & “iconname” adalah nama file icon Anda. Copy URL ini.

Kembali ke dashboard Blogger & di bawah tab Template, pergi ke “Edit HTML”. Tidak jauh dari bagian atas, Anda akan melihat baris seperti ini:

Copy & masukkan kode di bawah ini setelah kode </title&gt.

Atau masukkan yang ini, yang pertama lebih disukai:

Jangan lupa untuk mengganti URL FILE ICON ANDA dengan alamat URL file ikon Anda yang dihosting.

Lalu save template. Bila Anda me-refresh situs blog Anda, Anda akan melihat Favicon Anda di samping alamat situs blog/address bar.

Tipe Gambar Lainnya

Format gambar .ICO sudah banyak digunakan tetapi Anda juga dapat membuat gambar dengan format .png / .gif. Pastikan ukuran gambarnya adalah 16×16 pixels / 32×32 pixels.

Jika Anda punya gambar yang berformat PNG, link untuk memasukkannya adalah:

Jika gambarnya berformat GIF, linknya adalah:

Domain Eksternal

Bagi mereka yang memiliki situs hostingan di luar domain, masukkan link di direktori root. Jika tidak, Anda dapat meng-upload file ke dalam direktori root & menamakannya dengan favicon.ico.

Sebagai contoh, jika nama domain Anda http://www.domain.com, maka URL untuk faviconnya akan menjadi http://www.domain.com/favicon.ico

Cara ini, tetapi lebih disukai tetapi sejumlah versi browser dapat memproses ikon tersebut. Karena kami tidak memiliki domain eksternal untuk mencoba alternatif ini, Anda mungkin ingin melihatnya jika ia berjalan.

Kompatibilitas

Ketika Anda dapat melihat Favicon di Mozilla Firefox, ada banyak masalah jika melihatnya di Internet Explorer. Masalah ini telah banyak diketahui oleh pengguna IE (Internet Explorer). Dalam beberapa versi IE, mem-bookmark suatu situs akan menampilkan faviconnya. Tidak sepenuhnya begitu, di IE7 yang kita gunakan. Bahkan, ketika kami mem-bookmark situs search engine yang sangat populer, favicon situs mereka tidak tampil di bookmark IE kami tapi di Firefox faviconnya tampil. Mungkin ini sebagai alasan agar Anda men-download Mozilla Firefox jika Anda belum punya.

Jika artikel ini berguna, kamu bisa me-link ke postingan ini/berlangganan dengan blog kami/ menyebutkan kami di postingan Anda/mem-bookmark blog ini. Terima kasih atas dukungan Anda!

Artikel yang Berhubungan
Layout

* Membuat Teks Bergerak
* Menambah/Menghapus Border di CSS Template
* Menambahkan Scrollbars ke Dalam Widget Blog
* Membuat Style Komentar Penulis Berbeda dengan Pembaca
* Menyembunyikan/Menghapus Navbar di Blogger
* Menambah Page Element
* Menambahkan Tombol Digg ke Dalam Blog
* Membuat Favicon (icon di sebelah address bar)
* Cara Membuat Read More

About cahayarasul

ingin beriman dan taqwa

Discussion

5 thoughts on “Membuat Favicon (icon di sebelah address bar)

  1. I’m new to this blog. Apologize for asking this though, but to OP…
    Do you know if this can be true;
    http://www.bluestickers.info/ringtones.php ?
    it came off http://ringtonecarrier.com
    Thanks🙂

    Posted by Fanoadvonee | April 13, 2009, 2:25 pm
  2. tulisan kren thx

    Posted by ahmad | August 21, 2009, 4:43 am
  3. mmm,, tapi qo ribet y,,,
    to sayanya yang belum mengerti…
    boleh nanya-nanya lebih laanjutkan???
    semoga kita bisa berteman di fb
    arie_kd2308@yahoo.com
    nuwun maz atas ilmunya…
    di add y fbnya.. please…

    Posted by ariebae | December 23, 2009, 1:13 am
  4. banyak contoh ya tp ga keliatan mungkin itu berupa link tp tetap ga ada.
    http://beritatop.co.cc
    tlg di cek ya..blm ada faviconnya & leave ur message ya thx

    Posted by top | March 24, 2010, 6:37 am
  5. nice…
    orie1212.wordpress.com

    Posted by orie1212 | October 27, 2010, 12:38 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: