Memasang Favicon Icon Blog Biar Tampil Anggun Di Smartphone
Tidak sanggup dipungkiri kini pengguna smartphone semakin meningkat melebihi pengguna desktop untuk mengakses internet. Dengan begitu layout web juga harus seramah mungkin tampil di banyak sekali ukuran device semoga sanggup menjangkau pengguna smartphone dan desktop maupun laptop.Begitu pun dengan wacana favicon yang mungkin masih banyak diabaikan oleh sebagian blogger. Tidak cukup hanya mengandalkan favicon.ico pada zaman smartphone kini ini, namun kita perlu menambahkan favicon yang juga sesuai dengan device-device tertentu ibarat android, apple, dan lainnya sehingga favicon blog akan tampil (jika tidak benar maka yang tampil hanya berupa kotak dengan karakter inisial title blog) saat web/blog kita dibookmark di browser smartphone.
Bagaimana? Tampil lebih manis kan?
Nah semoga tampil manis di smartphone, maka kita harus menyimpan favicon di tata letak dan juga di edit HTML Blogger.
Namun yang pertama harus dilakukan yaitu menciptakan logo blog dengan ukuran bujur kandang contohnya 400px X 400px. Jangan menciptakan logo blog terlalu rumit semoga tampak terang saat ketika dalam ukuran kecil 16px X 16px untuk favicon.ico.
Setelah menciptakan logo blog selesai, silahkan gunakan favicon generator untuk merubah logo blog menjadi banyak sekali ukuran. Download favicon yang didapat kemudian upload di Blogger kemudian copy isyarat yang diberikan favicon generator tadi dan simpan di bab
<head> kemudian ganti URL icon-nya dengan URL icon yang diupload di Blogger tadi sesuai dengan ukurannya. Kode favicon ini tampak ibarat di bawah ini. <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
Lalu tambahkan juga isyarat di bawah ini untuk menampilkan favicon.ico yang dipasang melalui tata letak, Gunakan ukuran 16px X 16px dan upload melalui gadget favicon di tata letak.
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
Namun saya sendiri tidak memakai semua isyarat di atas, hanya beberapa untuk tiap-tiap jenis smarphone ibarat di bawah ini.
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link href='https://3.bp.blogspot.com/................./s32/favicon-32x32.png' rel='icon' sizes='32x32'/>
<link href='https://4.bp.blogspot.com/................./s192/android-icon-192x192.png' rel='icon' sizes='192x192'/>
<link href='https://2.bp.blogspot.com/................./s180/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180'/>
<meta content='https://2.bp.blogspot.com/................./s144/ms-icon-144x144.png' name='msapplication-TileImage'/>
Selamat mencoba....
Sumber https://www.kompiajaib.com/
0 Response to "Memasang Favicon Icon Blog Biar Tampil Anggun Di Smartphone"
Posting Komentar