favicon.png vs favicon.ico - tại sao tôi nên sử dụng PNG thay vì ICO?

442

Khác với thực tế là PNG là một định dạng hình ảnh phổ biến hơn, có lý do kỹ thuật nào để ủng hộ favicon.png so với favicon.ico không?

Tôi đang hỗ trợ các trình duyệt hiện đại mà tất cả đều hỗ trợ các biểu tượng yêu thích PNG.

png favicon ico

— Jon Galloway
nguồn

233

Câu trả lời được thay thế (và biến Cộng đồng Wiki) do nhiều cập nhật và ghi chú từ nhiều người khác trong chuỗi này:

Cả ICO và PNG đều cho phép độ trong suốt dựa trên kênh alpha
ICO cho phép khả năng tương thích ngược với các trình duyệt cũ hơn (ví dụ IE6)
PNG có thể có hỗ trợ công cụ rộng hơn cho tính minh bạch, nhưng bạn cũng có thể tìm thấy các công cụ để tạo ICO kênh alpha, chẳng hạn như công cụ Dynamic Drive và plugin Photoshop được đề cập bởi @mercator.

Hãy tham khảo các câu trả lời khác ở đây để biết thêm chi tiết.

— Amber
nguồn

78

ICO cũng cho phép kênh alpha

— Álvaro González

58

-1 ICO hỗ trợ nhiều độ phân giải bao gồm cả kênh alpha đầy đủ. Nhân tiện, alpha 1 bit được gọi là "trong suốt". Giới hạn thực sự duy nhất mà ICO có được là với các biểu tượng lớn hơn hoặc bằng 256 chiều dài (bất kỳ hướng nào), mặc dù điều đó đã được khắc phục nhiều lần.

— Christian

26

-1 .ico cũng cho phép nhiều độ phân giải trong một tệp (ví dụ 16x16 và 32x32). Vì vậy, icone vẫn đẹp khi bạn tạo một phím tắt trên máy tính để bàn.

— gagarine

4

Hầu hết các trình duyệt ủng hộ favicon.ico trong thư mục gốc hơn liên kết. Với giải pháp của bạn, hầu hết các trình duyệt sẽ chọn .ico không trong suốt thay vì png được liên kết.

— Lode

@lode tại sao nó đặc biệt chọn một ico không trong suốt thay vì ico trong suốt?

— Rob Grant

367

Tất cả các trình duyệt hiện đại (đã được thử nghiệm với Chrome 4, Firefox 3.5, IE8, Opera 10 và Safari 4) sẽ luôn yêu cầu favicon.icotrừ khi bạn đã chỉ định một biểu tượng phím tắt thông qua <link>. Vì vậy, nếu bạn không chỉ định rõ ràng một tệp, tốt nhất là luôn có favicon.icotệp, để tránh 404. Yahoo! đề nghị bạn làm cho nó nhỏ và lưu trữ.

Và bạn cũng không cần phải có một PNG cho độ trong suốt alpha. Các tệp ICO chỉ hỗ trợ độ trong suốt alpha (tức là màu 32 bit), mặc dù hầu như không có công cụ nào cho phép bạn tạo chúng. Tôi thường xuyên sử dụng Trình tạo FavIcon của Dynamic Drive để tạo favicon.icocác tệp có độ trong suốt alpha. Đây là công cụ trực tuyến duy nhất tôi biết có thể làm điều đó.

Ngoài ra còn có một plugin Photoshop miễn phí có thể tạo ra chúng.

— thủy ngân
nguồn

6

Gợi ý tuyệt vời công cụ Dynamic Drive này! Đánh dấu ngay lập tức. Cảm ơn!

— Marcos Buarque

3

công cụ lại, nó là phần lớn không đúng sự thật; có một số công cụ thiết kế biểu tượng. Tôi đã viết một đơn giản bản thân mình trong quá khứ.

— Christian

4

Đối với những người không có $ 650 đô la cho Photoshop, bạn có thể sử dụng pixlr.com (miễn phí) để tạo, chỉnh sửa và lưu các tệp .png với đầy đủ phân lớp và minh bạch :)

— Scott B

3

@Pacerier Rất khó để .icochỉnh sửa trong PS. Và ngay cả khi bạn làm như vậy, kết quả cuối cùng rất tệ, bạn nghĩ rằng đó .bmplà một định dạng tốt hơn (nó bổ sung rất nhiều dữ liệu meta khiến việc chỉnh sửa lại trở thành một nỗi đau rất lớn).

— Christian

4

@mikevoermans: Nó vẫn được đọc dưới dạng PNG; hầu hết các trình duyệt hiện đại không quan tâm nhiều đến phần mở rộng tập tin. BTW, đây là câu trả lời tốt nhất và nên được chấp nhận.

— rvighne

48

Các tệp .png rất đẹp, nhưng các tệp .ico cũng cung cấp độ trong suốt của kênh alpha, cộng với chúng cung cấp cho bạn khả năng tương thích ngược.

Hãy xem ví dụ về loại StackOverflow sử dụng (lưu ý rằng nó trong suốt):

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png">

Điều thú vị của apple là dành cho người dùng iphone tạo lối tắt đến trang web.

— Đồ trang sức van Nifterick
nguồn

16

PNG cũng có thể cung cấp kênh alpha

— Álvaro González

10

vâng, quan điểm của tôi là ico có thể làm mọi thứ mà png's có thể làm (độ trong suốt alpha) như một favicon, và ngoài ra, chúng được hỗ trợ bởi tất cả các trình duyệt kể từ năm 0.

— Wouter van Nifterick

theo wikipedia internet explorer sẽ không hỗ trợ một dòng như thế này: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />

— frankster

2

Có thể trang web không hỗ trợ trình duyệt kể từ năm 0, vậy tại sao phải bận tâm? Hãy thử và tải một trang web hiện đại trong IE6 và xem điều gì sẽ xảy ra;)

— Dominic

26

Ưu điểm về mặt lý thuyết của các tệp * .ico là chúng là các thùng chứa có thể chứa nhiều hơn một biểu tượng. Chẳng hạn, bạn có thể lưu trữ hình ảnh với kênh alpha và phiên bản 16 màu cho các hệ thống cũ hoặc bạn có thể thêm các biểu tượng 32x32 và 48x48 (sẽ hiển thị khi kéo liên kết đến Windows explorer).

Ý tưởng tốt này, tuy nhiên, có xu hướng xung đột với việc triển khai trình duyệt.

— Álvaro González
nguồn

Liên quan đến vấn đề này là việc IE9 cũng sử dụng các biểu tượng lớn đó để ghim vào thanh tác vụ win7, xem: stackoverflow.com/questions/3723715/

— Kẻ

Uhm, lý thuyết? Biểu tượng tương tự được cung cấp với Windows 7 có thể được sử dụng trong Windows 95 ở chế độ màu 8 bit. Tôi nghĩ điều đó khá thực tế, phải không?

— Christian

Xin lưu ý rằng câu trả lời này được viết vào năm 2009. Khung cảnh trình duyệt vào thời điểm đó khác rất nhiều so với bây giờ.

— Álvaro González

15

PNG có 2 ưu điểm: nó có kích thước nhỏ hơn và được sử dụng và hỗ trợ rộng rãi hơn (trừ trường hợp favicon). Như đã đề cập trước ICO, có thể có nhiều biểu tượng kích thước, rất hữu ích cho các ứng dụng máy tính để bàn, nhưng không quá nhiều cho các trang web. Tôi khuyên bạn nên đặt một favicon.ico trong thư mục gốc của ứng dụng. Nếu bạn có quyền truy cập vào Đầu trang của trang web, hãy sử dụng thẻ để trỏ đến tệp png. Vì vậy, trình duyệt cũ hơn sẽ hiển thị favicon.ico và các trình duyệt mới hơn png.

Để tạo tệp Png và Biểu tượng, tôi muốn giới thiệu The Gimp .

— pmoleri
nguồn

3

Không quá nhiều cho các trang web? Đợi cho đến khi mọi người bắt đầu sử dụng màn hình giống như võng mạc; đột nhiên sẽ có một lý do rất chính đáng tại sao người ta có thể bao gồm kích thước 32x32 hoặc lớn hơn trong favicon của họ ...

— Roman Starkov

1

Chúng ta đang nói về favicon vì vậy vấn đề hỗ trợ trên thực tế trái ngược với những gì bạn nói

— David Heffernan

1

+1 Giải quyết câu hỏi ban đầu và không bị sa lầy trong suốt. Cũng đề cập đến một ứng dụng mà không định dạng hỗ trợ .ico.

— kovacsbv

12

Một số công cụ xã hội như Google+ sử dụng một phương pháp đơn giản để lấy favicon cho các liên kết bên ngoài, tìm nạp http://your.domainname.com/favicon.ico

Vì họ không tìm nạp trước nội dung HTML, <link>thẻ sẽ không hoạt động. Trong trường hợp này, bạn có thể muốn sử dụng quy tắc mod_rewrite hoặc chỉ đặt tệp vào vị trí mặc định.

— jdavid.net
nguồn

1

Không biết nó đúng hay sai nhưng đó là lý lẽ quyết định để tôi đi và tạo favicon.ico trong root ngoài png tôi có.

— Alexei Tenitski

2

Tôi biết điều này từ công việc tại telly.com , -via paul lindner, người trong nhóm google plus. plus.google.com/117259934788907243749/about

— jdavid.net

Đặt favicon trong thư mục gốc là tiêu chuẩn thực tế , vì vậy tôi sẽ tuân thủ nó vì những lý do như được đề cập trong câu trả lời này.

— Stijn de Witt

8

Một ico có thể là một png.

Chính xác hơn, bạn có thể lưu trữ một hoặc nhiều png bên trong định dạng chứa tối thiểu này, thay vì bitmap + alpha thông thường mà mọi người đều liên kết mạnh mẽ với ico.

Hỗ trợ đã cũ, xuất hiện trong Windows Vista (2007) và được các trình duyệt hỗ trợ tốt, mặc dù không nhất thiết phải bằng phần mềm chỉnh sửa biểu tượng.

Bất kỳ png hợp lệ (toàn bộ bao gồm tiêu đề) có thể được thêm vào bởi một tiêu đề ico 6 byte và thư mục hình ảnh 16 byte.
GIMP có hỗ trợ riêng. Chỉ cần xuất dưới dạng ico và đánh dấu "Nén (PNG)".

— Adria
nguồn

3

Tránh PNG trong mọi trường hợp nếu bạn muốn tương thích IE6 đáng tin cậy.

— aehlke
nguồn

19

Không có lý do tại sao bạn không thể sử dụng cả hai - một ico trong cây thư mục cho IE6 và PNG được chỉ định thông qua <link>mã trong trang cho các trình duyệt hiện đại.

— Amber

10

Tại sao bạn sẽ sử dụng cả hai? Nếu bạn đang bận tâm làm ico thì lợi ích gì khi sử dụng png cũng có? Chắc chắn đó chỉ là việc làm thêm và mã thêm.

— Mr_Chimp

@Mr_Chimp vì png là một tiêu chuẩn mở và hướng tới tương lai nhiều hơn? Đó là một dòng đánh dấu thêm.

— Wyatt8740

9

Xin chào @Orcra - Tôi nghĩ rằng bạn sẽ không thấy buồn cười vì bạn đã đọc nó ~ 8 năm trước khi tôi viết câu trả lời này và phải xem xét những thứ như IE6 :) StackOverflow cho phép chỉnh sửa câu trả lời vì vậy vui lòng tự cập nhật nó một cái gì đó có liên quan ngày hôm nay

— aehlke

3

@aehike bạn có một điểm công bằng, xấu của tôi vì đã không kiểm tra dấu thời gian.

— Orcra

0

Đối với những gì nó có giá trị, tôi làm điều này:

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

Và tôi vẫn giữ favicon.ico trong root.

— s3c
nguồn