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.
{tocify} $title={Table of Contents}
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.
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.
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.
4. Selanjutnya sahabat buat halaman baru untuk file favicon di login blog sahabat tentunya.
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>
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.
Kemudian pastekan semua html yang sudah diedit dengan link address favicon sahabat di html tema blog sahabat.
Sehingga hasil editannya akan seperti yang digambarkan.
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.
Demikian Cara Menampilkan Favicon Di Semua Browser. Semoga bermanfaat dan terima kasih untuk sahabat komptik yang membacanya.
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.
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.
4. Selanjutnya sahabat buat halaman baru untuk file favicon di login blog sahabat tentunya.
- 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 + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4AnjMDuuBdCxDVH4IPJTHKQfW6lY6zzKpWNpb6VcG6t0gYP_EuJHaf3qAj2haqIp0COAC455JgPlQrG1NRV8JL6iL_GpW1IxWErhPMQe0gQI0jEObsSkjf4ssidj7Xip1448r6nbdtK0/s1600/favicon-32x32.png' rel='icon' sizes='32x32'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhttNa_FKqSXAqHVD69mN-UZCKWaWv9sO99B3x0twPVnhucx-ntjuxTo6WeSvQsC2wikN7nvayAVBKbBc6JPwheqsWs8XpCvhLwac0tYQNullzkZRpCSLTvPpcKYABrPIyRoc-v_Gx3FQI/s1600/android-icon-192x192.png' rel='icon' sizes='192x192'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4VqX23URd1U7din2Qp3fAoHCpkO27-DQBLe5A6pfUh61Rr2Kw083S-Q5-5ureefkDhZsC9dJ5lRBOwy-dV4VfW0BrE3nKjj4IngU4x7SqpXuYw5yxvpHDKFDOIhVz8At2pa1lSsjA0cE/s1600/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59C-U6z7fl6qn7oJfJHfg9tqNIvuts-Sinp9XqPisw-ztmonHP3zezr2aSyOVlodxll5Ld6H3CU6OZGArhLfOx36BRD8rB5ohnaHrSoQLaNK6ZdMrX_5dKc8UhC3LMGE5zjZ9Q9mMyi8/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.
Kemudian pastekan semua html yang sudah diedit dengan link address favicon sahabat di html tema blog sahabat.
Sehingga hasil editannya akan seperti yang digambarkan.
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.
Demikian Cara Menampilkan Favicon Di Semua Browser. Semoga bermanfaat dan terima kasih untuk sahabat komptik yang membacanya.
