2013-01-15 41 views
16

Doanh nghiệp Favicon trở nên phức tạp trong những năm qua. Các loại thiết bị mới (tái) được phát minh, như máy tính bảng và điện thoại thông minh thông minh. Họ sử dụng favicon theo những cách mới (ví dụ như biểu tượng ứng dụng trên màn hình chính) và yêu cầu các cách liên kết nhà cung cấp cụ thể theo nhà cung cấp. Theo cách tương tự, các trình duyệt hiện cho phép tạo các phím tắt cho các ứng dụng web (cũng sử dụng favicon cho các biểu tượng). Tệ hơn nữa, chúng tôi hiện có màn hình độ phân giải cao ("võng mạc") ở cả thiết bị di động và máy tính xách tay, yêu cầu hình ảnh có độ phân giải cao hơn cho biểu tượng. Thậm chí tệ hơn, các trình duyệt khác nhau (và các phiên bản) hỗ trợ các định dạng hình ảnh khác nhau cho các biểu tượng và các kích cỡ khác nhau. Bắt đầu với IE6 chỉ 16x16-only và kết thúc bằng Opera, hiện hỗ trợ các biểu tượng .svg.Nghệ thuật favicons hiện đại trong năm 2013 là gì?

Tôi nên làm gì để hỗ trợ các biểu tượng sắc nét trên hầu hết các thiết bị và trình duyệt của ngày hôm nay?

Cho đến nay các nguồn lực tốt nhất tôi có thể tìm được html5boilerplate, mà đề nghị có các tập tin sau đây:

apple-touch-icon-114x114-precomposed.png 
apple-touch-icon-144x144-precomposed.png 
apple-touch-icon-57x57-precomposed.png 
apple-touch-icon-72x72-precomposed.png 
apple-touch-icon-precomposed.png 
apple-touch-icon.png 
favicon.ico # 32x32 

trong khi không đặt bất kỳ liên kết với họ trong <head> thẻ.

Chỉnh sửa: xem xét khác là các tệp .ico có thể lưu trữ một số hình ảnh có độ phân giải khác nhau trong chúng. Điều này hữu ích hay được hỗ trợ?

Trả lời

13

Có một số lời khuyên chính thức tại http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html dường như xác nhận danh sách của bạn. Lý tưởng nhất, các tập tin favicon.ico nên chứa nhiều độ phân giải trong một tập tin như trình duyệt cập nhật bây giờ có thể tận dụng lợi thế này và một biểu tượng 16 x 16 sẽ không bao giờ nhìn rất tốt trên màn hình võng mạc.

Microsoft dường như bây giờ đề xuất tệp favicon.ico chứa ít nhất 16 × 16, 24 × 24, 32 × 32 và 64 × 64.

tôi vừa tung ra một công cụ trực tuyến miễn phí này sẽ tạo favicon như thế này tại địa chỉ: http://iconifier.net

Xem trang readme trên trang web để biết thêm các liên kết đến các thông tin favicon mới nhất.

+0

Cảm ơn công cụ của bạn, tôi chỉ sử dụng nó với thành công lớn! Một tùy chọn "precomposed" sẽ là tuyệt vời mặc dù, do đó, người ta sẽ không phải tự đổi tên các tập tin biểu tượng quả táo cho các biểu tượng precomposed. Chúc mừng! –

+2

Công cụ rất hữu ích. Thật tuyệt vời. Tuy nhiên, tôi nghĩ rằng bạn không sử dụng một favicon cho công cụ. – Largo

+1

@ p11y không phải lúc nào cũng tốt khi sử dụng các biểu tượng không được "chuẩn bị" như thể chúng. Họ có nghĩa là để được sáng tác đầy đủ các biểu tượng sẽ trông tốt như một biểu tượng trên màn hình máy tính để bàn/nhà; nếu có nhiều tính minh bạch, nó có thể hơi sai. Tôi nghĩ thiết bị của Apple sẽ soạn các biểu tượng không được định trước bằng cách đặt chúng trên nền hình chữ nhật tròn và có thể thêm hiệu ứng "bóng". –

Các vấn đề liên quan