Biểu tượng và màu trình duyệt

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 thanh địa chỉ và thậm chí là thêm các thành phần như thẻ thông tin tuỳ chỉnh. Những điều chỉnh đơn giản này có thể làm tăng mức độ tương tác và thu hút người dùng quay lại trang web của bạn.

Paul Bakaus
Paul Bakaus

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 thanh địa chỉ và thậm chí là thêm các thành phần như thẻ thông tin tuỳ chỉnh. Những điều chỉnh đơn giản này có thể làm tăng mức độ tương tác và thu hút người dùng quay lại trang web của bạn.

Cung cấp các biểu tượng và thẻ thông tin tuyệt vời

Khi người dùng truy cập vào trang web của bạn, trình duyệt sẽ tìm nạp biểu tượng từ HTML. Biểu tượng này có thể xuất hiện ở nhiều nơi, bao gồm cả thẻ trình duyệt, nút chuyển ứng dụng gần đây, trang thẻ mới (hoặc trang bạn 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 của bạn.

Để hỗ trợ đầy đủ tất 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 thiết bị điều chỉnh theo kích thước cần thiết. Để ngăn việc tự động điều chỉnh theo 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> với thuộc tính rel: apple-touch-icon để biểu thị biểu tượng màn hình chính.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Ảnh PNG không trong suốt có kích thước 180px hoặc 192px vuông là lý tưởng cho apple-touch-icon.

Bạn không nên đưa nhiều phiên bản vào thông qua thuộc tính sizes. Trước đây, Safari cho iOS sẽ xem xét từ khoá -precomposed để tránh thêm hiệu ứng hình ảnh, nhưng điều này không cần thiết kể từ iOS 7.

Internet Explorer và Windows Phone

Giao diện 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 liên quan nếu 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" và "Thẻ thông tin trực tiếp" xoay vòng của Microsoft vượt xa các phương thức 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 về cách tạo thẻ thông tin trực tiếp trên MSDN.

Phần tử trình duyệt màu

Bằng cách 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ố tính nă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 chúng có thể nâng cao trải nghiệm đáng kể.

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">
Màu giao diện tạo kiểu cho thanh địa chỉ trong Chrome.

Kiểu dành riêng 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à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 đ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ể của màn hình thiết bị mục tiêu, nếu không hình ảnh sẽ không được sử dụng. Hãy tham khảo Nguyên tắc về nội dung web của Safari để biết thêm thông tin.

Mặc dù tài liệu của Apple về chủ đề này còn khá ít, 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 truy vấn nội dung nghe nhìn nâng cao để chọn thiết bị phù hợp, sau đó chỉ định hình ảnh chính xác. Sau đây là một giải pháp hiệu quả, nhờ tệp gist 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 lên trên 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 lớn hơn, nhưng che khuất phần trên cùng. Dưới đây là mã bắt buộc:

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

Ảnh chụp màn hình sử dụng màu đen trong suốt.
Chụp ảnh màn hình bằng black-translucent

Ảnh chụp màn hình bằng màu đen
Chụp ảnh màn hình bằng black