Cara Menampilkan Icon Pada Setiap Halaman Website Anda

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.


Tagged Buat Web, Tips-Trik. Bookmark the permalink.

24 Responses to Cara Menampilkan Icon Pada Setiap Halaman Website Anda

  1. zaenal says:

    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 Yes

    • Admin says:

      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

  2. Andrei says:

    Thanks Gan, skrip nya jalan, Wish u Best lahh Smile Yes

  3. arman says:

    setelah tanda petik favicon.ico” /> terakhir dikasih tanda /
    selamat mencoba
    tx

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Click to Insert Smiley

LOLSillyBeautyLashesCuteShyBlushKissedIn LoveDroolGiggleSnickerHeh!SmirkWiltWeepIDKStruggleSide FrownDazedHypnotizedSweatEek!Roll EyesSarcasmDisdainSmugMoney MouthFoot in MouthShut MouthQuietShameBeat UpMeanEvil GrinGrit TeethShoutPissed OffReally PissedMad RazzDrunken RazzSickYawnSleepyDanceClapJumpHandshakeHigh FiveHug LeftHug RightKiss BlowKissingByeGo AwayCall MeOn the PhoneSecretMeetingWavingStopTime OutTalk to the HandLoserLyingDOH!Fingers CrossedWaitingSuspenseTremblePrayWorshipStarvingEatVictoryCurse