Sử dụng SVG favicons trong website

Icon

Favicon có thể là một SVG ở bất kỳ kích thước nào. Loại type = ”image / svg + xml” là không cần thiết.

<link rel=”icon” href=”favicon.svg”>

Mask icon

Đối với Safari, nó hơi khác một chút. Bạn cần thêm một biểu tượng mặt nạ. Nó cũng là SVG, nhưng nó phải được làm bằng một màu duy nhất và đặt trên nền trong suốt. Trình duyệt thêm màu của thuộc tính.

<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000″>

Touch icon

Biểu tượng cho thiết bị iOS cũng như các mục yêu thích từ trình duyệt trang tab mới và hơn thế nữa. Bạn chỉ cần kích thước 180 x 180 và thuộc tính kích thước là không cần thiết.

<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000″>

Manifest

Manifest.json cung cấp thông tin về ứng dụng web hoặc trang web của bạn. Những dòng này là bắt buộc để vượt qua bài kiểm tra của Lighthouse. Biểu tượng được liên kết được sử dụng bởi Android và Chrome. Kích thước lớn nhất 512 x 512 là kích thước duy nhất cần thiết.

{
“name”: “Starter”,
“short_name”: “Starter”,
“icons”: [{
“src”: “google-touch-icon.png”,
“sizes”: “512×512”
}],
“background_color”: “#ffffff”,
“theme_color”: “#ffffff”,
“display”: “fullscreen”
}

theme-color meta  vẫn được yêu cầu cho màu trình duyệt Chrome của Android.

<meta name=”theme-color” content=”#ffffff”>

Mọi thứ khác

Không phải ai cũng sử dụng được các trình duyệt hiện đại NHƯNG có thể dễ dàng giải quyết bằng cách thả favicon.ico 32 x 32 ở gốc trang web của bạn.

Xem thêm   Học CSS căn bản

Kết quả

<meta name=”theme-color” content=”#ffffff”>
<link rel=”icon” href=”favicon.svg”>
<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000″>
<link rel=”apple-touch-icon” href=”apple-touch-icon.png”>
<link rel=”manifest” href=”manifest.json”>

Viết một bình luận