theme-color
danicon
. Lihat Gambar 2, pada halaman home browser Chrome (Android) website tanpa settingan metatag khusus status bar dan icon, akan terlihat biasa saja. Untuk mengubahnya, terlebih dahulu siapkan gambar sebagai icon dan siapkan dengan ukuran berbeda. Lalu tuliskan beberapa baris kode di bawah ini.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<link href='favicon.ico' rel='icon' type='image/x-icon'/> | |
<link href='128x128.png' rel='icon' sizes='128x128'/> | |
<link href='190x190.png' rel='icon' sizes='192x192'/> | |
<link href='76x76.png' rel='apple-touch-icon' sizes='76x76'/> | |
<link href='120x120.png' rel='apple-touch-icon' sizes='120x120'/> | |
<link href='152x152.png' rel='apple-touch-icon' sizes='152x152'/> | |
<link href='180x180.png' rel='apple-touch-icon' sizes='180x180'/> | |
<link href='215x215.png' rel='apple-touch-icon' sizes='215x215'/> | |
<meta content='favicon.ico' name='msapplication-TileImage'/> | |
<meta content='#272822' name='theme-color'/> | |
<meta content='#272822' name='msapplication-TileColor'/> | |
<meta content='#272822' name='msapplication-navbutton-color'/> | |
<meta content='#272822' name='apple-mobile-web-app-status-bar-style'/> | |
<meta content='yes' name='mobile-web-app-capable'/> | |
<meta content='yes' name='apple-mobile-web-app-capable'/> | |
</head> | |
</html> |
Penjelasan:
favicon.ico
Ukuran sebaiknya tidak kurang dari 48x48px, karenafavicon.ico
akan tampil di halaman home opera mini dan kalau ukuran terlalu kecil maka akan pecah.favicon.ico
juga akan menjadi icon website di semua browser, tapi jika website di akses melalui smartphone maka fungsifavicon.ico
akan tergantikan oleh file .png pada tag<link/>
.#272822
ini adalah warna status bar website, ubah bagian ini dan sesuaikan dengan warna dasar template. Settinganmobile-web-app-capable
danapple-mobile-web-app-capable
harusyes
.Dan yang tidak kalah penting disini adalah kualitas gambar icon .png kita, jangan sampai pecah. Dan yang namanya icon, ukuran panjang dan lebar harus sama. Mulai 16x16px, 32x32px, 48x48px, 64x64px, 128x128px sampai 215x215px.
Sekedar info, untuk membuat logo sebaiknya gunakan software khusus pengolah gambar vector seperti Inkscape (free), CorelDraw dan Adobe Illustrator. Jangan gunakan Adobe Photoshop, karena fungsi dan kegunaannya berbeda.
Sedangkan untuk membuat file
.ico
bisa menggunakan Adobe photoshop yang telah terinstall extensions khusus (gratis), bisa dicari di google dengan kata kunci Adobe save as ico. Atau bisa juga menggunakan software converter seperti @icon sushi, bisa kunjungi towofu.net (gratis). Pilihan lain untuk membuat file.ico
adalah software pengolah gambar sejenis Adobe photoshop yaitu Gimp (gratis), secara default pada Gimp ini sudah bisa menyimpan gambar format.ico
.Jika sudah membuat membuat file icon format ico dan png dengan semua ukuran seperti di atas, terapkan pada website/blog dan di coba akses melalui Chrome pada smartphone. Jangan panik jika icon tidak langsung berganti ketika pertama kali di akses setelah di ubah. Karena browser biasanya masih menyimpan cache icon sebelumnya. Untuk mempercepat agar tampilan segera berubah, bisa membuka website di browser pada mode Incoqnito. Lalu refresh di mode Incoqnito beberapa kali. Dan buka lagi di mode normal lalu refresh beberapa kali, biasanya icon sudah berubah. Kalau kita lihat lebih teliti, biasanya jika membuka website besar maka title bar akan berubah warna mengikuti warna dasar template website ...
No comments Mengubah Warna Status Bar Website Pada Browser Smartphone
Post a Comment