Các trình duyệt hiện đại giúp bạn dễ dàng tuỳ chỉnh một số thành phần nhất định, chẳng hạn như biểu tượng, màu sắc của thanh địa chỉ và thậm chí thêm những thứ như ô tuỳ chỉnh. Những điều chỉnh đơn giản này có thể tăng mức độ tương tác và đưa người dùng quay lại trang web của bạn.
Các trình duyệt hiện đại giúp bạn dễ dàng tuỳ chỉnh một số thành phần nhất định, chẳng hạn như biểu tượng, màu sắc của thanh địa chỉ và thậm chí thêm những thứ như ô tuỳ chỉnh. Những điều chỉnh đơn giản này có thể tăng mức độ tương tác và đưa người dùng quay lại trang web của bạn.
Cung cấp các biểu tượng và ô hấp dẫn
Khi người dùng truy cập vào trang web của bạn, trình duyệt sẽ cố gắng tìm nạp một biểu tượng từ HTML. Biểu tượng có thể hiển thị ở nhiều nơi, bao gồm thẻ trình duyệt, lượt chuyển đổi ứng dụng gần đây, trang thẻ mới (hoặc mới truy cập gần đây) và nhiều nơi khác.
Việc cung cấp hình ảnh chất lượng cao sẽ giúp trang web của bạn dễ nhận biết hơn, giúp người dùng dễ dàng tìm thấy trang web hơn.
Để hỗ trợ đầy đủ cho tất cả các trình duyệt, bạn cần thêm một vài thẻ vào phần tử <head> của mỗi trang.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome và Opera
Chrome và Opera sử dụng icon.png, được điều chỉnh theo kích thước cần thiết theo thiết bị. Để ngăn việc tự động điều chỉnh tỷ lệ, bạn cũng có thể cung cấp thêm kích thước bằng cách chỉ định thuộc tính sizes.
Safari
Safari cũng sử dụng thẻ <link> có thuộc tính rel: apple-touch-icon để cho biết biểu tượng màn hình chính.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
PNG không trong suốt, có kích thước hình vuông 180px hoặc 192px là lý tưởng cho biểu tượng apple-Touch.
Bạn không nên đưa vào nhiều phiên bản thông qua thuộc tính sizes.
Trước đây, Safari dành cho iOS cân nhắc từ khoá -precomposed để tránh
thêm hiệu ứng hình ảnh, nhưng điều này hiện không cần thiết kể từ iOS 7.
Internet Explorer và Windows Phone
Trải nghiệm màn hình chính mới của Windows 8 hỗ trợ 4 bố cục khác nhau cho các trang web được ghim và yêu cầu 4 biểu tượng. Bạn có thể bỏ qua các thẻ meta có liên quan nếu bạn không muốn hỗ trợ một kích thước cụ thể.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Thẻ thông tin trong Internet Explorer
"Trang web được ghim" của Microsoft và xoay vòng "Thẻ thông tin trực tiếp" vượt xa các cách triển khai khác và nằm ngoài phạm vi của hướng dẫn này. Bạn có thể tìm hiểu thêm tại cách tạo thẻ thông tin trực tiếp trong MSDN.
Tô màu các phần tử của trình duyệt
Khi sử dụng các phần tử meta khác nhau, bạn có thể tuỳ chỉnh trình duyệt và thậm chí là các phần tử của nền tảng. Xin lưu ý rằng một số ứng dụng có thể chỉ hoạt động trên một số nền tảng hoặc trình duyệt nhất định, nhưng có thể giúp nâng cao đáng kể trải nghiệm.
Chrome, Firefox OS, Safari, Internet Explorer và Opera Coast cho phép bạn xác định màu cho các phần tử của trình duyệt và thậm chí là nền tảng bằng cách sử dụng thẻ meta.
Màu giao diện meta cho Chrome và Opera
Để chỉ định màu giao diện cho Chrome trên Android, hãy sử dụng màu giao diện meta.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Định kiểu cụ thể cho Safari
Safari cho phép bạn tạo kiểu cho thanh trạng thái và chỉ định hình ảnh khởi động.
Chỉ định hình ảnh khởi động
Theo mặc định, Safari hiển thị một màn hình trống trong thời gian tải và sau nhiều lần tải ảnh chụp màn hình trạng thái trước đó của ứng dụng. Bạn có thể ngăn chặn điều này bằng cách yêu cầu Safari hiển thị hình ảnh khởi động rõ ràng bằng cách thêm thẻ liên kết với rel=apple-touch-startup-image. Ví dụ:
<link rel="apple-touch-startup-image" href="icon.png">
Hình ảnh phải có kích thước cụ thể trên màn hình của thiết bị mục tiêu, nếu không hình ảnh sẽ không được sử dụng. Tham khảo Nguyên tắc về nội dung web của Safari để biết thêm chi tiết.
Mặc dù tài liệu của Apple có rất ít về chủ đề này, nhưng cộng đồng nhà phát triển đã tìm ra cách nhắm đến tất cả thiết bị bằng cách sử dụng các truy vấn nội dung nghe nhìn nâng cao để chọn thiết bị thích hợp, sau đó chỉ định đúng hình ảnh. Sau đây là một giải pháp hiệu quả, với sự tham gia của ý kiến của tfausak
Thay đổi giao diện thanh trạng thái
Bạn có thể thay đổi giao diện của thanh trạng thái mặc định thành black hoặc black-translucent. Với black-translucent, thanh trạng thái sẽ nổi ở đầu nội dung toàn màn hình thay vì đẩy xuống. Điều này giúp bố cục có chiều cao cao hơn nhưng lại che khuất phần trên cùng. Sau đây là mã yêu cầu:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black