Cara Membuat Dan Memasang FAVICON Blogger

Cara membuat dan memasang favicon di blogger dan website dengan mudah. Tutorial untuk membuat favicon kemudian menerapkannya ke dalam kode HTML blogger ataupun website dengan mudah.

Apa itu Favicon ?

Favicon adalah file ikon kecil berukuran 16x16 yang ditampilkan di sebelah URL situs yang ada pada bilah alamat di browser modern. Selain itu, mereka sering ditampilkan di samping nama situs dalam daftar tab terbuka dan daftar bookmark pengguna sehingga memudahkan pengguna untuk mengidentifikasi dengan cepat di antara situs lain.

Favicon berguna sebagai identitas suatu website dalam bentuk logo mini dengan format ekstensi *ico yang ditampilkan setiap kali pengguna mengunjungi halaman website tersebut. Setiap favicon memiliki bentuk format umum dan spesifik namun dari bentuk keduanya bisa dipasang ke dalam kode HTML template blog ataupun website secara bersamaan.

Selain sebagai ikon logo dari suatu website penggunaan favicon bisa juga secara spesifik digunakan sebagai ikon aplikasi untuk penggunaan mobile yang mana halaman sebuah website bisa ditaruh ke dalam menu perangkat mobile tersebut sehingga favicon ini akan terlihat seperti ikon menu layaknya ikon aplikasi yang terdapat pada sebuah perangkat mobile.

Apa itu Ikon Aplikasi ?

Ikon Aplikasi adalah gambar yang Anda tekan pada ponsel cerdas Anda untuk meluncurkan aplikasi. Karena ponsel yang lebih baru dirilis dengan layar beresolusi lebih tinggi, diperlukan ikon aplikasi beresolusi lebih tinggi. Pengembang masih ingin mempertahankan dukungan untuk ponsel lama dengan resolusi lebih rendah sehingga saat Anda membuat ikon aplikasi, Anda perlu membuat beberapa variasi ukuran dari gambar yang sama. Ini berlaku untuk semua smartphone seperti iPhone dan Android, dan bahkan tablet seperti iPad.

Format File Favicon

Meskipun banyak browser web modern mendukung favicon yang disimpan sebagai GIF, PNG, atau format file populer lainnya, semua versi Internet Explorer masih memerlukan favicon untuk disimpan sebagai file ICO (format ikon Microsoft). Ada banyak aplikasi online yang menyediakan cara mudah untuk mengonversi GIF, PNG, atau JPEG apa pun ke dalam file ICO yang didukung oleh semua browser web modern.

Ukuran Dimensi Favicon

Dimensi gambar yang digunakan sebagai favicon secara default menggunakan 2 ukuran, yaitu 16x16 piksel dan 32x32 piksel. Ukuran dimensi lainnya akan disesuaikan dengan pengaturan favicon yang akan digunakan sebagai ikon aplikasi.

Nama File Favicon

Standar nama file untuk penggunakan favicon secara umum adalah favicon.ico dimana favicon adalah nama filenya dan .ico adalah extensi format gambar dalam bentuk format ikon Microsoft (ICO).

Kode HTML Untuk Favicon

Agar file favicon bisa ditampilkan di browser maka perlu ditambahkan kode HTML ke dalam template website atau blog, berikut bentuk umum kode HTML untuk favicon.

Kode HTML Standar Favicon

Silakan disesuaikan https://URL-website dengan nama domain yang digunakan. Lokasi URL digunakan dalam bentuk lokasi file absolut dari file favicon yang terdapat pada domain tersebut, biasanya terletak di dalam folder utama (root).

Kode HTML Favicon Untuk Blogger

Kode tersebut ditaruh pada kode HTML template blogger setelah didalam TAG <Head>, kode tersebut akan secara otomatis menyesuaikan lokasi absolut dari URL blog dan favicon.

Kode HTML Favicon Kustom

KETERANGAN :

Silakan Anda sesuaikan beberapa perimeter pada kode di atas sesuai dengan data website yang Anda gunakan.

https://URL-website-Anda.com Silakan anda rubah dengan alamat URL website Anda.
nama-website-Anda Silakan Anda rubah dengan nama website ataupun nama author untuk website Anda.
https://URL-website-Anda.com/feeds/posts/default?alt=rss Silakan Anda rubah dengan URL untuk RSS Feed dari website Anda.
<meta name="msapplication-TileColor" content="#FFFFFF" /> Merupakan kode warna header untuk penggunaan browser mobile, silakan anda rubah kode warna tersebut untuk menyesuaikan dengan warna tema website Anda.

Informasi Singkat

Standardisasi

Favicon distandarisasi oleh World Wide Web Consortium (W3C) dalam rekomendasi HTML 4.01, dirilis pada Desember 1999, dan kemudian dalam rekomendasi XHTML 1.0, dirilis pada Januari 2000. Implementasi standar menggunakan elemen tautan dengan atribut rel di bagian <head> dokumen untuk menentukan format file, nama file, dan lokasi. Tidak seperti skema sebelumnya, file dapat berada di direktori Situs Web mana pun dan memiliki format file gambar apa pun.

Pada tahun 2003, format .ico didaftarkan oleh pihak ketiga dengan Internet Assigned Numbers Authority (IANA) dengan tipe MIME image/vnd.microsoft.icon. Namun, saat menggunakan format .ico untuk ditampilkan sebagai gambar (mis. bukan sebagai favicon), Internet Explorer tidak dapat menampilkan file yang disajikan dengan tipe MIME standar ini. Solusi untuk Internet Explorer adalah mengasosiasikan .ico dengan tipe MIME image/x-icon non-standar di server Web.

RFC 5988 membuat registri hubungan tautan IANA, dan [rel="icon"] telah didaftarkan pada tahun 2010 berdasarkan spesifikasi HTML5. <link rel="shortcut icon" type="image/png" href="image/favicon.png"> yang populer secara teoretis mengidentifikasi dua relasi, pintasan dan ikon, tetapi pintasan tidak terdaftar dan redundan. Pada tahun 2011, standar kehidupan HTML menetapkan bahwa karena alasan historis, pintasan diperbolehkan tepat sebelum ikon namun, pintasan tidak memiliki arti dalam konteks ini.

Internet Explorer 5–10 hanya mendukung format file ICO. Netscape 7 dan Internet Explorer versi 5 dan 6 menampilkan favicon hanya saat halaman di-bookmark, dan tidak hanya saat halaman dikunjungi seperti di browser selanjutnya.

Sumber : Wikipedia

DAFTAR ISI

Cara Membuat Ikon Favicon

Cara Pemasangan Favicon Pada Blogger

Cara Pemasangan Favicon Pada Wordpress

Cara Pemasangan Favicon Pada Website

Contoh Gambar Ikon Favicon Berbentuk Animasi [GIF]

#1 Cara Membuat Ikon Favicon

Cara untuk membuat ikon favicon cukup mudah, Anda dapat mengikuti langkah-langkah sebagai berikut :

Bukalah perangkat lunak pengolah gambar seperti Photoshop, CorelDRAW, atau GIMP.
Buatlah gambar atau gunakan gambar yang sudah ada kemudian rubah ukuran standar favicon terlebih dahulu yaitu dengan ukuran 16x16 piksel atau 32x32 piksel. Pada penggunaan ikon favicon kustom yang akan digunakan sebagai ikon aplikasi mobile, silakan Anda buat dengan mengikuti ukuran dimensi dan penamaan file gambar sebagai berikut :
- favicon.ico (ukuran gambar 16x16 piksel atau 32x32 piksel)
- favicon-16x16.png
- favicon-32x32.png
- favicon-96x96.png
- favicon-128x128.png
- favicon-196x196.png
- apple-touch-icon-57x57.png
- apple-touch-icon-60x60.png
- apple-touch-icon-72x72.png
- apple-touch-icon-76x76.png
- apple-touch-icon-114x114.png
- apple-touch-icon-120x120.png
- apple-touch-icon-144x144.png
- apple-touch-icon-152x152.png
- apple-touch-icon-57x57.png
- mstile-70x70.png
- mstile-144x144.png
- mstile-150x150.png
- mstile-310x150.png
- mstile-310x310.png
Pastikan gambar tersebut sudah dirubah kedalam format [.png] atau [.gif], sedangkan format gambar wajib ikon favicon harus menggunakan format [.ico].
Desainlah gambar favicon sesuai dengan keinginan Anda atau gunakan gambar logo website Anda. Pastikan gambar tersebut terlihat jelas dan mudah diingat.
Simpan gambar favicon tersebut dengan nama "favicon.ico".
Upload gambar favicon ke server Anda. Biasanya, gambar ini diletakkan di folder utama situs.
Setelah membuat ataupun sudah memiliki ikon favicon dengan berbagai ukuran dimensi yang sudah ditentukan, maka Anda bisa mengunggah file ikon favicon tersebut ke server hosting situs Anda.
Masukan kode HTML berikut ke dalam template website, blogger atau wordpress sesuai dengan framework situs yang Anda gunakan. Berikut contoh pemasangan kode HTML favicon ke dalam template blogger.

Pemasangan kode HTML favicon untuk website dan wordpress pada prinsipnya hampir sama, Anda tinggal meletakan kode-kode HTML favicon setelah TAG <Head> atau setelah TAG <Title>.

Simpan kode HTML template situs dan coba buka situs Anda di berbagai perangkat untuk melihat hasilnya.

Sedikit tips dan trik untuk cara mudah dan cepat dalam membuat file ikon favicon tersebut di atas adalah dengan menggunakan penyedia layanan online "Favicon Generator" yang banyak disediakan secara gratis di Internet.

Prinsip penggunaan situs penyedia favicon generator cukup mudah, Anda tinggal menyiapkan satu gambar berukuran 512x512 piksel kemudian upload file gambar tersebut ke situs pembuat favicon. Setelah itu situs penyedia favicon generator akan men-generate ikon favicon tersebut sekaligus membuat nama file ikon favicon secara otomatis. Anda tinggal download dan meng-unggah file-file gambar tersebut ke server hosting situs Anda.

Salah satu rekomendasi situs yang bisa Anda gunakan untuk men-generate file ikon favicon secara otomatis adalah dengan menggunakan aplikasi online yang banyak disediakan di internet. Anda bisa menggunakan situs tersebut untuk membuat file-file ikon favicon secara gratis dengan mudah dan cepat.

#2 Cara Pemasangan Favicon Pada Blogger

Bagi Anda pengguna blogspot berikut langkah-langkah mengg-unggah file favicon beserta cara memasang favicon untuk blog di blogger :

Pilih gambar yang ingin digunakan sebagai favicon. Pastikan gambar memiliki ukuran sebesar 16x16 piksel atau 32x32 piksel dan berformat [.ico] atau [.png].
Buka akun Blogger Anda dan masuk ke halaman dasbor.
Pilih Tata Letak di sebelah kiri halaman. Klik tombol Edit pada kotak Favicon.

Jika Anda tidak menemukan tombol pengaturan favicon pada halaman tata letak silakan Anda klik menu Setelan kemudian klik teks yang bertuliskan favicon pada bagian halaman sebelah kanan. Sebagai contoh seperti yang terlihat pada gambar di bawah ini.
Pada halaman editor header, klik pada tombol Pilih Gambar.
Unggah gambar favicon yang ingin digunakan.
Setelah gambar diunggah, Blogger akan menyimpannya dan mengirimkan permintaan ke server untuk mengubah favicon situs Anda.
Jika favicon tidak muncul secara otomatis, Anda mungkin perlu membersihkan cache browser Anda dan memuat ulang halaman untuk melihat perubahan.
Simpan perubahan yang dilakukan.

Itulah cara memasang favicon untuk blog di Blogger. Pastikan favicon yang Anda pilih mempunyai ukuran yang tepat dan mudah dikenali agar situs Anda terlihat lebih profesional dan mudah diakses oleh pengguna.

#3 Cara Pemasangan Favicon Pada Blog Wordpress

Bagi Anda pengguna wordpress berikut langkah-langkah mengg-unggah file favicon beserta cara memasang favicon untuk blog di wordpress :

Siapkan icon atau gambar yang ingin digunakan sebagai favicon. Pastikan ukurannya sudah sesuai dengan standard favicon, yaitu 16x16 piksel atau 32x32 piksel.
Login ke dashboard WordPress, lalu klik Appearance dan Customize.
Di panel Customizer, klik Site Identity.
Di bagian Site Icon, klik Select Image untuk mengunggah gambar favicon yang sudah dipersiapkan.
Setelah gambar terunggah, klik Save & Publish di bagian atas halaman Customizer.
Cek situs WordPress Anda. Favicon seharusnya sudah muncul di antara judul situs dan ikon browser.
Jika Anda sudah melakukan langkah-langkah di atas namun favicon tidak muncul, cobalah untuk membersihkan cache browser terlebih dahulu atau mencoba menggunakan gambar favicon yang berbeda.

#4 Cara Pemasangan Favicon Pada Website

Berikut cara pemasangan favicon pada website :

Persiapkan file ikon favicon yang ingin digunakan. Pada file default harus menggunakan berformat [.ico] dan memiliki dimensi 16x16 piksel atau 32x32 piksel.
Simpan file ikon favicon di root directory website, biasanya sama dengan file index.html.
Tambahkan baris kode berikut di section head pada file index.html seperti pada contoh kode favicon yang ada di atas.
Pastikan bahwa URL yang terdapat pada kode rel="icon" dan href="/favicon.ico" cocok dengan lokasi dari file favicon.ico di root directory / folder website.
Simpan perubahan pada file index.html dan upload ke server website.
Pastikan untuk membersihkan cache browser untuk melihat perubahan pada favicon.
Selesai, sekarang favicon akan tampil pada tab browser dan bookmark website.

#5 Contoh Gambar Ikon Favicon Berbentuk Animasi [GIF]

Bagi Anda yang ingin mengunakan ikon favicon dengan gambar Animasi [gif], berikut beberapa contoh gambar ikon favicon yang bisa Anda gunakan.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA9H0XdhFc2BuyXcbOlqZdFBg1Wv7Pb0s-ur4Fu41qifDyLzinybmvVAosokLu_L_FAiRhX_9mRLklGCu4rZKY2LMrFmyJR-zcyRFab223_oXoL2YonSO_cPvg-PfB6h-TWIowJwW0ZH7A_4FRRfPV6ue12HoBXaTWEa3m8NuEzpVl5eMBGcuPZHliuQ/s1600/computer_32px.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6JP4lC6gpXuD2AHlDehw2FYPh3H4r_bAuYNb4H03RLyfUw2g0X0ctHpaBQBKxbjFBGIbDCG6QrpaQe8bmIs-iSEo2lWWjc0vU7geoUsbg1AVVcWnxk9THsEuq8MfUgZCVoTp6EakkhEt4w0EwJPM7CWkl8hSdS_1bYTJQQ-ZxRy4UUCW0goF0LnQCA/s1600/goku_32px.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-P8dVcz0SWbeJ9NSvZXqw0qrnsHib70Cvbf3Pn4wT2PJ2_73s_rsX-kcSHO_KgvKHWUxal-ohQTVHeCjakhBk0WjmSlLnm_YejK0Eu-wYbNLj2yXOSBbRews5XswgakoqZQenjeuyviJc8xGzsKu7jXE-90zw2AcT-CvDl0xXzOV3cA4HUaWPnNrOQ/s1600/mario-walking_32px.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3vJjrpg0I1zoY_S6rZQjid-RAGz1FXyR-x8HstpYb3J3Sk92PkoOHvbQKWf9XtuPrFSTV0X_cnXBQ9HSxsJdvTE0wvSwTe3A9AdXWk5B27oo_hfPTzW5iU-DHzi2cOsEpC8Fa6VTS1_YDfwFO_wDaI2nE0l6J4FZtMnIKOj8oRmxIX1RHjZ0oC8GEYA/s1600/sonic_32px.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzFyBOnPKDukQy613zaQjFAGsGMamuDCX27WPwHnHqOLBy6od7MH_OhWXUE1s_wuQhbLbtBDXNNX0uD1f_6afQDCIWQioYixM2HLgfKP54dwCl6fIeBVbvdevlHFjudiOR9kFlpTkPp9YOuAEv63C5rppgOoH_lKFvM4Osx959SEiFFRrHPq7_CLAjsA/s1600/sonic_run_32px.gif

Demikian artikel blog tentang Cara Membuat Dan Memasang FAVICON Blogger terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

favicon, blog, blogger, blogspot, website, situs, cara, pasang, buat, memasang, membuat, generate, gambar, ico, png, gif, animasi, animated, anim, transparant, logo, ikon, 16px, 32px, apple, android, ms, browser, mobile

Incoming Search Terms

Artikel Cara Membuat Dan Memasang FAVICON Blogger ini akan membahas berbagai aspek yang terkait dengan penggunaan ikon favicon dalam konteks situs web dan platform blogging, serta mencakup topik-topik seperti cara pemasangan, penggunaan pada browser mobile, dan kode HTML untuk penggunaan pada Blogger.

Cara memasang ikon favicon pada situs web, termasuk Blogger dan WordPress, sangat penting untuk memberikan identitas visual yang kuat kepada situs Anda. Dengan favicon yang sesuai, pengunjung situs Anda akan lebih mudah mengenali dan mengingat situs Anda. Blogger dapat mengunggah favicon melalui widget Header, sementara pengguna WordPress bisa mengelolanya melalui dasbor mereka.

Penggunaan favicon di browser mobile semakin relevan, mengingat banyak pengunjung mengakses situs web dari perangkat seluler. Favicon yang dioptimalkan untuk perangkat mobile memastikan situs Anda tetap terlihat profesional dan terorganisir bahkan di layar kecil.

Selain itu, membuat ikon favicon untuk digunakan sebagai ikon aplikasi mobile adalah langkah cerdas. Ini memungkinkan pengguna untuk menambahkan situs Anda ke layar beranda perangkat mereka, memberikan pengalaman yang lebih mirip aplikasi dan akses cepat ke situs Anda.

Penambahan ikon bookmark untuk situs web juga memudahkan pengguna untuk menyimpan dan mengakses situs Anda. Mereka dapat dengan mudah menandai situs Anda untuk referensi di masa depan.

Juga, penggunaan JavaScript untuk mengganti ikon favicon secara dinamis bisa menjadi fitur menarik. Ini memungkinkan Anda untuk mengubah ikon favicon sesuai dengan kondisi atau peristiwa tertentu pada situs Anda.

Terakhir, ada banyak tutorial yang dapat membantu Anda dalam cara membuat favicon dan bahkan sumber daya untuk menemukan logo favicon gratis. Dengan panduan yang tepat, Anda dapat dengan mudah membuat ikon favicon yang sesuai dengan merek dan visi situs Anda.

Secara keseluruhan, ikon favicon adalah elemen kecil namun signifikan yang dapat memberikan tampilan profesional dan mudah diakses untuk situs web dan blog Anda, dan panduan-panduan di atas dapat membantu Anda dalam mencapai hal tersebut.

Main Settings

Header Ads

Cara Membuat Dan Memasang FAVICON Blogger

Apa itu Favicon ?

Apa itu Ikon Aplikasi ?

Format File Favicon

Ukuran Dimensi Favicon

Nama File Favicon

Kode HTML Untuk Favicon

Kode HTML Standar Favicon

Kode HTML Favicon Untuk Blogger

Kode HTML Favicon Kustom

Standardisasi

#1 Cara Membuat Ikon Favicon

#2 Cara Pemasangan Favicon Pada Blogger

#3 Cara Pemasangan Favicon Pada Blog Wordpress

#4 Cara Pemasangan Favicon Pada Website

#5 Contoh Gambar Ikon Favicon Berbentuk Animasi [GIF]

2 comments:

Post Top Ad

Author Details

Post Bottom Ad

Top Users

Comments

Top Pages

Formulir Kontak

Subscribe

Popular

Category