Cara Menampilkan Favicon Di Semua Browser

Konten [Tampil]
Cara Menampilkan Favicon Di Semua Browser

Komptik.id - Favicon merupakan tampilan dari identitas logo sebuah blogspot, wordpress dan website lainnya yang dibuat oleh develop sendiri.

Favicon ditampilakan di posisi kiri tittle nama Website, merupakan sebuah logo yang juga ditampilkan ketika kita membuka sebuah browser baik itu browser firefox, google chrome serta browser lainnya yang biasa sahabat gunakan, namun tidak banyak yang mencari tahu favicon yang bagus untuk logo cache yang ditampilkan browser chrome dan firefox. Dikedua browser itu biasanya hanya tidak menampilkan logo favicon website sahabat atau faviconnya hanya kotak kecil saja.

Dalam menjelajahi sebuah website tentunya sahabat meninggalkan pula cache browser dihalaman utama, jika sahabat perhatikan di tampilan antar muka browser menampilkan cache sebuah website atau halaman URL yang sebelumnya sahabat buka, contoh ketika kalian membuka mozilla firefox tab halaman utamanya ada cachenya, begitu pula dengan google chrome.

Untuk firefox di Top Sites akan menampilkan logo penuh serta ada yang menampilkan logo hanya kotak kecil di pojok kanan bawah. Logo yang bagus bagi Komptik logo yang penuh di Top Sites.

Memasang Favicon Bagus di Firefox

Ketika komptik menjelajah di mbah Google dengan mengetikkan kata kunci "Cara Memasang Favicon Bagus di Firefox" ada banyak sekali website yang membuat kata kunci dengan hanya cara memasang favicon di blogspot, cara memasang favicon website wordpress. Lalu komptik coba lagi kata kunci "Cara Agar Favicon Atau Icon Blog Tampil Bagus Di Smartphone" sii mbah Google malahan menampilkan list yang membahas tentang cara mengganti icon blogger. Menurut saya masih kurang sreg dengan yang saya inginkan agar favicon bisa tampil full di Top Site firefox, chrome dan responsif di mobile.

Membuat Favicon Bagus di Site

Cara ini akan membuat blog sahabat tampil bagus dan meninggalkan sisi keren di browsing browser pengunjung blog sahabat. Favicon akan tampil di site URL browser mode desktop dan mobile, tampil di Top Site Firefox Full, tampil di site Google Chrome.

Penasaran bagaimana membuatnya? Yuk langsung saja sahabat praktekkan di blog sahabat.
Langkah menerapkannya :
1. Siapkan favicon blog sahabat, bisa menggunakan software PhotoShop, CorelDraw. Favicon ukuran normal persegi 200 x 200 pixel, 300 x 300 pixel

2. Setelah faviconnya dibuat, selanjutnya file favicon di generate menggunakan aplikasi online favicon generator. Klik favicon generator.
Cara Menampilkan Favicon Di Semua Browser

3. Hasil dari favicon generator yang sahabat dapatkan akan beberapa macam ukuran dengan nama file yang berbeda-beda dalam satu folder yang di comprese (zip.rar). Silahkan sahabat ekstrak dahulu.
File inilah yang nanti akan kita ambil dan terapkan di blog kita.
Cara Menampilkan Favicon Di Semua Browser

4. Selanjutnya sahabat buat halaman baru untuk file favicon di login blog sahabat tentunya.
Cara Menampilkan Favicon Di Semua Browser
Silahkan masukkan gambar favicon yang didapat dari hasil ekstrak (zip.rar) folder di komputer kalian dengan urutan :
- android-icon 192x192.png
- apple-icon 180x180.png
- ms-icon 144x144.png
- favicon 32x32.png

Minimal keempat file tersebut sahabat harus masukkan kedalam halaman blog sahabat untuk menyimpan file tersebut, boleh ditambahkan file lain sesuai kebutuhan.

5. Selanjutnya buka tema blog sahabat lalu edit htmlnya. Silahkan copy paste semua kode dibawah ini. Letakkan dibawah <head> untuk mempermudah gunakan ctrl+f <head>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link href='https://1.bp.blogspot.com/-NL7aCD_b22k/XlAXg50FzwI/AAAAAAAAA1g/ugsr6Em-oa8UOVlvl-bv39BwAyBDLSrwQCLcBGAsYHQ/s1600/favicon-32x32.png' rel='icon' sizes='32x32'/>
<link href='https://1.bp.blogspot.com/-h8vrT7rAaMk/XlAW5J7GCBI/AAAAAAAAA1U/WiM0Vn9oWjonf6Fc7SYDYG0wEL5rmGAXACEwYBhgL/s1600/android-icon-192x192.png' rel='icon' sizes='192x192'/>
<link href='https://1.bp.blogspot.com/-Mn8IWuikG3s/XlAXDNhx7rI/AAAAAAAAA1Q/NIIgaLAo2J8tcNHnXotiuBgUmP-cUVZ3wCEwYBhgL/s1600/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180'/>
<meta content='https://1.bp.blogspot.com/-mcvIuwwbpeg/XlAXbJlm1FI/AAAAAAAAA1c/HnEh7DKBB2UJawae-YLwbHTcZplS8ki3wCLcBGAsYHQ/s1600/ms-icon-144x144.png' name='msapplication-TileImage'/>

Silahkan ganti kode html yang diwarnai sesuai dengan link gambar favicon yang sudah sahabat buat di halaman baru blog. Untuk mengetahui link address gambar faviconnya sahabat bisa lakukan klik kanan pada gambar "Copy link address" pastekan di notepad dengan edit html diatas.
Cara Menampilkan Favicon Di Semua Browser

Kemudian pastekan semua html yang sudah diedit dengan link address favicon sahabat di html tema blog sahabat.
Sehingga hasil editannya akan seperti yang digambarkan.
Cara Menampilkan Favicon Di Semua Browser

Setelah langkah diatas sudah semua sahabat lakukan, simpan temanya. Kalau langkah cara di atas benar maka sahabat mendapatkan hasil link bar favicon dan Top Site firefox chrome menjadi bagus.

Terakhir pada bagan Tata Letak blog sahabat pada bagian favicon klik edit kemudian ganti dengan favicon generate sebelumnya, pilih gambar favicon dari nama favicon-32x32.png.
Cara Menampilkan Favicon Di Semua Browser

Demikian Cara Menampilkan Favicon Di Semua Browser. Semoga bermanfaat dan terima kasih untuk sahabat komptik yang membacanya.

Berlangganan update artikel terbaru via email:

Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara Menampilkan Favicon Di Semua Browser"

Post a Comment

Comment Policy: Silahkan tuliskan komentar Sahabat yang sesuai dengan topik postingan halaman ini.


Tambahkan aplikasi Komptik. di smartphone tanpa install, buka Komptik. dengan browser Chrome di smartphone lalu klik ikon titik 3 di pojok kanan atas pada browser, kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi Komptik. dari layar utama smartphone Anda.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel