Chrome Mobil Adres Çubuğu Rengi Ayarlama

Merhaba arkadaşlar bu yazımda kendi sitem için araştırmaya başladığım ve Google Developers‘te hemen bulduğum cevabı sizlerle paylaşmak istedim. Sizlerinde dikkati çekmiştir Android‘in yeni sürümlerinde Google Chrome Mobil’in adres çubuğunun rengi değişiyor. Yani Chrome Mobil’in adres çubuğunun bulunduğu kısmı, girilen siteye özgü bir renge bürünebiliyor. Örneğin facebook‘a girdiğiniz zaman üst taraf mavi bir renk oluyor. Bunu kendi sitelerimiz içinde yapmak mümkün.

Chrome Mobil Adres Çubuğu Rengi Ayarlama

Şimdi bakalım kendi sitemiz için bu özelliği nasıl kullanabiliriz. <head> tagı(etiketi) içine theme-color meta tagını eklemek. Renk harici başka bir özellik daha sunuyor yeni Chrome Mobil, sitemizin faviconunu daha kaliteli bir şekilde ekleyebiliyoruz bunu da yine <head> tagı(etiketi) içine icon link tagını eklemek.

 

Daha kaliteli favicon eklemek için (Önerilen 192px X 192px ve PNG formatı);

<link rel="icon" sizes="192x192" href="nice-highres.png">

Adres çubuğu rengini değiştirmek için (content’in içine istediğimiz rengin hex kodunu yazmalıyız);

Android için

<meta name="theme-color" content="#db5945">

Windows Phone için

<meta name="msapplication-navbutton-color" content="#db5945">

iOS (Safari) için

<meta name="apple-mobile-web-app-status-bar-style" content="#db5945">