Đồng bộ màu website với thanh công cụ Chrome

ad285978c13722697b26

Khi sử dụng Chrome trên android 5.0, bạn sẽ thấy thanh công cụ có màu sắc đồng bộ với trang web. Vậy làm thế nào để đồng bộ màu thanh công cụ Chrome với website của bạn? Bài viết sau sẽ hướng dẫn bạn thao tác chỉ với một dòng code.

ad285978c13722697b26

Kể từ phiên bản Chrome 39 trở đi, trình duyệt này chính thức hỗ trợ việc thay đổi màu sắc thanh công cụ và đưa từng tab trình duyệt lên màn hình ứng dụng đang chạy (hay Recent apps). Việc đồng bộ màu sẽ khiến website của bạn trở nên bắt mắt và hiện đại hơn!

Việc định màu sắc cho trang web hết sức đơn giản, bạn chỉ cần thêm thẻ theme-color vào trong thẻ <head>. Đối với những bạn dùng WordPress, bạn thêm thẻ này vào file header.php:

 

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

Ngoài ra, bạn có thể thêm icon cho website của bạn, kích thước chuẩn cho các loại màn hình hiện tại là 192×192, định dạng file PNG. Các bạn chỉ cần thêm đường dẫn của hình ảnh vào trong thẻ head:

<link rel="icon" sizes="192x192" href="đường_dẫn_hình_ảnh.png">

Đối với trình duyệt Safari cho iOS, bạn cần định rõ icon cho từng loại màn hình:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Chúc các bạn thành công!

0938.54.84.99