Mengubah Warna Status Bar Website Pada Browser Smartphone

       
jqueryholic.blospot.co.id agar website tampil baik di browser smartphone image 1 - thumbnail
Kalau kita lihat lebih teliti, biasanya jika membuka website besar maka title bar akan berubah warna mengikuti warna dasar template website tersebut. Untuk icon website juga akan tampil di halaman home browser smartphone. Ingin icon dan warna status bar website/blog kita juga terlihat berbeda? Kita bisa menggunakan menggunakan metatag khusus seperti theme-colordanicon. 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.

Penjelasan:

favicon.icoUkuran sebaiknya tidak kurang dari 48x48px, karenafavicon.icoakan tampil di halaman home opera mini dan kalau ukuran terlalu kecil maka akan pecah.favicon.icojuga akan menjadi icon website di semua browser, tapi jika website di akses melalui smartphone maka fungsifavicon.icoakan tergantikan oleh file .png pada tag<link/>.

#272822ini adalah warna status bar website, ubah bagian ini dan sesuaikan dengan warna dasar template. Settinganmobile-web-app-capabledanapple-mobile-web-app-capableharusyes.

jqueryholic.blospot.co.id agar website tampil baik di browser smartphone image 2 - contoh setelah di custom
Gambar: contoh tampilan icon
yang sudah dicustom
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.icobisa 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.icoadalah 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.

Post Terkait Mengubah Warna Status Bar Website Pada Browser Smartphone

No comments Mengubah Warna Status Bar Website Pada Browser Smartphone

Post a Comment

Popular Posts