Có một favicon phải là 32x32 hoặc 16x16?

Tôi muốn sử dụng một hình ảnh duy nhất như một favicon thông thường và favicon thân thiện với iPhone / iPad.

Điều này có thể không? Liệu một tỷ lệ PNG 72x72 thân thiện với iPad sẽ được liên kết như một favicon trình duyệt thông thường? Hoặc tôi phải sử dụng hình ảnh 16x16 hoặc 32x32 riêng biệt?

Đối với IE, Microsoft khuyến nghị 16x16, 32x32 và 48x48 được đóng gói trong tệp favicon.ico .

Đối với iOS, Apple khuyến nghị tên tệp và độ phân giải cụ thể , tối đa 180x180 cho các thiết bị mới nhất chạy iOS 8.

Android Chrome chủ yếu sử dụng bảng kê khai và cũng dựa vào biểu tượng cảm ứng của Apple.

IE 10 trên Windows 8.0 yêu cầu ảnh PNG và màu nền và IE 11 trên Windows 8.1 và 10 chấp nhận một số ảnh PNG được khai báo trong tệp XML chuyên dụng được gọibrowserconfig.xml .

Safari cho Mac OS X El Capitan giới thiệu biểu tượng SVG cho các tab được ghim .

Một số nền tảng khác tìm kiếm các tệp PNG với độ phân giải khác nhau, như ảnh 96x96 cho Google TV hoặc ảnh 228x228 cho Opera Coast .

Nhìn vào danh sách hình ảnh favicon này để tham khảo đầy đủ.

TLDR: Trình tạo favicon này có thể tạo tất cả các tệp này cùng một lúc. Trình tạo cũng có thể được thực hiện như một plugin WordPress . Tiết lộ đầy đủ: Tôi là tác giả của trang web này.

Tôi không thấy bất kỳ thông tin cập nhật nào được liệt kê ở đây, vì vậy ở đây đi:

Để trả lời câu hỏi này ngay bây giờ, 2 favicon sẽ không làm điều đó nếu bạn muốn biểu tượng của mình trông tuyệt vời ở mọi nơi. Xem các kích thước dưới đây:

16 x 16 - Kích thước tiêu chuẩn cho trình duyệt
24 x 24 - Kích thước trang web được ghim IE9 cho giao diện người dùng
32 x 32 - Tab trang mới IE, nút thanh tác vụ Windows 7+, thanh bên Danh sách đọc Safari
48 x 48 - Trang web Windows
57 x 57 - iPod touch , iPhone lên tới 3G
60 x 60 - iPhone chạm tới iOS7
64 x 64 - Trang web Windows, thanh bên Danh sách Safari trong HiDPI / Retina
70 x 70 - Win 8.1 Metro ngói
72 x 72 - iPad chạm tới iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone retina chạm tới iOS6
120 x 120 - iPhone retina chạm iOS7
128 x 128 - Ứng dụng Chrome Web Store, Android
144 x 144 - Gạch IE10 cho trang web được ghim, iPad retina cho đến iOS6
150 x 150 - Win 8.1 gạch Metro
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - Win 8.1 rộng Metro ngói
310 x 310 - Win 8.1 Metro Metro

Tôi không chắc chắn nếu / cách trình duyệt chia tỷ lệ các biểu tượng lớn, nhưng W3C gợi ý ¹ :

Định dạng cho hình ảnh bạn đã chọn phải là 16x16 pixel hoặc 32x32 pixel, sử dụng màu 8 bit hoặc 24 bit. Định dạng của hình ảnh phải là một trong PNG (tiêu chuẩn W3C), GIF hoặc ICO.

¹ w3c.org: Cách thêm Favicon vào trang web của bạn (Bản nháp đang phát triển) .

Trên thực tế, để làm cho favicon của bạn hoạt động chính xác trong tất cả các trình duyệt, bạn sẽ phải thêm hơn 10 tệp với kích thước và định dạng chính xác.

Bạn tôi và tôi đã tạo một Ứng dụng chỉ cho việc này! bạn có thể tìm thấy nó trong faviconit.com

Chúng tôi đã làm điều này, vì vậy mọi người không phải tạo tất cả những hình ảnh này và các thẻ chính xác bằng tay, tạo tất cả chúng được sử dụng để làm phiền tôi rất nhiều!

Bạn có thể có nhiều kích cỡ biểu tượng trong cùng một tệp. Tôi thường xuyên tạo favicon ( .icotệp) là 48, 32 và 16 pixel. Bạn có thể thêm vào bất kỳ hình ảnh kích thước bạn muốn. Câu hỏi là, iPhone sẽ sử dụng một icotập tin?

icocũng hỗ trợ tính minh bạch, nhưng tôi không chắc đó có phải là kênh alpha như PNG hay không; có lẽ giống như GIF hơn khi nó bật hoặc tắt.

Theo Điều khoản Wikipedia về Favicon, Internet Explorer chỉ hỗ trợ định dạng ICO cho favicon.

Tôi sẽ gắn bó với hai biểu tượng khác nhau.

Favicon không nhất thiết phải là 16x16 hoặc 32x32. Bạn có thể tạo một favicon có kích thước 80x80 hoặc 100x100, chỉ cần đảm bảo rằng cả hai giá trị có cùng kích thước và rõ ràng không làm cho nó quá lớn hoặc quá nhỏ, hãy chọn kích thước hợp lý.

Bạn sẽ cần các tệp riêng biệt cho mỗi độ phân giải tôi sợ. Có một bài viết thực sự hay về giám sát chiến dịch mô tả cách họ tạo và triển khai các biểu tượng của mình cho từng thiết bị iOS:

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

Như tôi đã học, không ai trong số những giải pháp đó là hoàn hảo. Sử dụng một trình tạo favicon thực sự là một giải pháp tốt nhưng số lượng của chúng quá nhiều và thật khó để lựa chọn. Tôi muốn thêm rằng nếu bạn muốn trang web của mình được bật PWA, bạn cũng cần cung cấp biểu tượng 512x512 như Google Devs đã nêu :

các biểu tượng bao gồm phiên bản 192px và 512px

Tôi đã không gặp nhiều máy phát điện favicon thực thi các tiêu chí đó ( căn cứ hỏa lực thì có , nhưng có rất nhiều thứ nó không làm). Vì vậy, giải pháp phải là một hỗn hợp của nhiều giải pháp khác.

Tôi không biết, ngày nay vào đầu năm 2020 nếu cung cấp 16x16, 32x32 vẫn có liên quan. Tôi đoán nó vẫn còn quan trọng trong một số bối cảnh nhất định như, ví dụ, nếu người dùng của bạn vẫn sử dụng IE vì một số lý do (điều này vẫn xảy ra ở một số công ty tư nhân không di chuyển sang trình duyệt mới hơn vì một số lý do)