Kích thước biểu tượng yêu thích, định dạng tệp và thẻ meta / liên kết nào nên được sử dụng kể từ năm 2020? Điều này bao gồm biểu tượng quả táo, cửa sổ, android và các thiết bị khác mà mọi người sử dụng ngày nay.

Tôi sử dụng Opera và tôi có thể thấy nó hỗ trợ định dạng svg. Nó có phải là giải pháp tốt nhất để sử dụng svg hiện nay? Có tùy chọn nào "một tệp phù hợp với tất cả" không?

Tôi đã duyệt qua nhiều trang web và kiểm tra các "trình tạo favicon" khác nhau. Tất cả chúng đều có tuổi đời và hoạt động chủ yếu với tệp png.

Ví dụ: Mã nào nên được sử dụng cho ico và svg?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

hoặc kích thước nên được chỉ định nếu ico chứa nhiều kích thước hơn? Tôi không tìm thấy một câu trả lời hay.

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

Vui lòng cung cấp kích thước, định dạng tệp và thẻ meta / liên kết về những biểu tượng yêu thích nên được sử dụng.

Tuyên bố từ chối trách nhiệm: Tôi là tác giả của RealFaviconGenerator, mà tôi mong đợi sẽ được cập nhật (hầu hết, xem bên dưới). Vì vậy, đừng ngạc nhiên nếu câu trả lời này khớp với những gì RFG tạo ra.

Huyền thoại có một không hai

Không có biểu tượng "một kích thước phù hợp với tất cả". Bạn không thể tạo một biểu tượng SVG duy nhất và mong đợi nó hoạt động ở mọi nơi.

Từ quan điểm kỹ thuật, một biểu tượng SVG duy nhất sẽ là một điều tốt. Nhưng từ quan điểm UI và UX, đây không phải là một kết quả mong muốn. So sánh iOS và Android. Trên iOS, tất cả các biểu tượng màn hình chính đều là hình vuông với các góc tròn ( iOS lấp đầy các vùng trong suốt của biểu tượng Touch bằng màu đen ). Trên Android, các biểu tượng màn hình chính thường sử dụng các hình dạng không vuông và trong suốt (bao gồm cả các biểu tượng ứng dụng Google). Gửi một biểu tượng cảm ứng duy nhất và Android Chrome sẽ sử dụng biểu tượng đó. Nhưng bạn sẽ không thể phù hợp với các nguyên tắc biểu tượng Android , trong khi một biểu tượng chuyên dụng có thể.

Vì vậy, tôi khuyên bạn nên cố tình tránh sử dụng một biểu tượng duy nhất. Thay vì nhắm mục tiêu từng nền tảng riêng lẻ, khi có thể (điều này không phải lúc nào cũng đúng).

Biểu tượng, nền tảng trên mỗi nền tảng

iOS Safari

iOS Safari mong đợi một biểu tượng cảm ứng . Cho đến hôm nay, đây là hình ảnh PNG 180x180. Hình ảnh này không được sử dụng độ trong suốt và các góc của nó sẽ tự động được làm tròn khi được thêm vào màn hình chính. Được khai báo với:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

Trong nhiều năm, biểu tượng này đã trở thành "biểu tượng độ phân giải cao mặc định" cho nhiều trình duyệt. Vì vậy, bạn sẽ tìm thấy nó ở nơi khác, khi thêm vào dấu trang, v.v.

Android Chrome

Android Chrome dựa trên Tệp kê khai ứng dụng web . Mặc dù tệp kê khai này không dành riêng cho Android Chrome, nhưng nó hiện là công cụ hỗ trợ chính của nó. Vì vậy, tại thời điểm hiện tại, vẫn khá an toàn để xem xét các biểu tượng từ Tệp kê khai ứng dụng web dành cho Android Chrome.

Như tên cho thấy, Tệp kê khai ứng dụng web dành cho ứng dụng web. Nhưng bất kỳ trang web nào cũng có thể sử dụng nó như một cách để tham khảo một số biểu tượng.

Android mong đợi một biểu tượng PNG 192x192, được phép và khuyến khích trong suốt.

Tệp kê khai được khai báo với:

<link rel="manifest" href="/icons/site.webmanifest">

Edge và IE 12

Microsoft đã giới thiệu browserconfig , một tài liệu XML liệt kê các biểu tượng khác nhau phù hợp với giao diện người dùng Metro.

Tệp và màu nền được khai báo bằng:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Trình duyệt máy tính để bàn cổ điển

Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... Đây là những thứ hơi mờ hơn một chút. Trong lịch sử, có một favicon.icotệp duy nhất , vẫn được hỗ trợ. Tuy nhiên, hầu hết các trình duyệt gần đây chọn các biểu tượng PNG, nhẹ hơn. Thêm vào đó, một số trình duyệt không thể chọn biểu tượng thích hợp trong tệp ICO (định dạng này có thể nhúng nhiều phiên bản của một biểu tượng), dẫn đến biểu tượng có độ phân giải thấp bị sử dụng sai.

Người ta có thể bị cám dỗ để loại bỏ favicon.icohoàn toàn cái cũ . Mặc dù tôi muốn thực hiện bước nhảy vọt này trong RFG, nhưng tôi đã không chạy các thử nghiệm cần thiết để đánh giá tác động đối với các trình duyệt cũ.

Vì vậy, kết hợp mà tôi vẫn đề xuất hôm nay, với favicon.icoviệc nhúng các biểu tượng 16x16, 32x32 và 48x48:

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

Các trình duyệt khác

Các trình duyệt khác có thể có các biểu tượng chuyên dụng. Ví dụ: Coast by Opera đang tìm biểu tượng 228x228 . Sự cần thiết phải tập trung vào các trình duyệt này là không rõ ràng. Họ thường sử dụng biểu tượng cảm ứng hoặc các biểu tượng khác khi họ không thể tìm thấy biểu tượng "của họ".

Phần kết luận

Như đã thông báo ở phần đầu, đây chính xác là những gì RealFaviconGenerator tạo ra.

Cũng cần nhắc lại rằng cùng với favicon, một số thẻ khác nên được thêm vào như thẻ OG, thẻ Twitter hoặc ứng dụng MS. Tất cả đều phục vụ cùng một mục đích - nhận dạng trực quan thương hiệu của bạn và cũng nên được đưa vào.

Thẻ Twitter có thể được tìm thấy TẠI ĐÂY

Tôi thêm các thẻ sau

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

Tôi thấy rằng nhiều người dùng tạo hình ảnh có định dạng 1300px x 650px và jpg / png.

Sau khi thêm tất cả các thẻ, chúng sẽ được xác thực TẠI ĐÂY

Facebook OG có nhiều tùy chọn hơn nhưng nhìn chung như sau:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebook đề xuất tỷ lệ cụ thể của hình ảnh và kích thước tệp được giới hạn ở 8Mb. Để giữ các hình ảnh tương tự với thẻ twitter, tôi khuyên bạn nên kích thước 1240px x 650px và định dạng jpg / png. Facebook và twitter không chấp nhận svg ...

Tôi thấy rằng một số thương hiệu toàn cầu sử dụng thẻ này trên trang web của họ. Một có kích thước 150x150 pixel và định dạng png. Hình ảnh này có thể được trình duyệt sử dụng để hiển thị trong kết quả tìm kiếm.

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon Generator cũng bao gồm các biểu tượng yêu thích của Microsoft. Có nhiều thẻ meta khác cho MS-application để tối ưu hóa trang và các thông tin khác như hình ảnh được hiển thị. Chủ đề này cũng rất đáng đọc.

Tôi hy vọng điều này hữu ích cho ai đó và mở rộng chủ đề xây dựng thương hiệu trang web của bạn.