Làm cách nào để thêm favicon vào trang web của tôi?

Đánh dấu nào là tiêu chuẩn hiện đại để thêm một favicon vào trang web của tôi? Định dạng và kích thước hình ảnh tiêu chuẩn là gì?

Để hoạt động trong tất cả các trình duyệt, .icođược ưu tiên, vì đối với kích thước, 32x32 là kích thước được sử dụng rộng rãi nhất, 16x16 cũng hoạt động (đây là kích thước thực tế được sử dụng trong trình duyệt ở hầu hết các nơi).

Cũng không phải trong câu hỏi của bạn, chúng nên có độ sâu màu 8 hoặc 24 bit.

Có thể đáng chú ý, nếu bạn lên kế hoạch cho iWhthing người dùng đánh dấu trang web của bạn, đó là một phần riêng biệt <link>cho hình ảnh, ví dụ như StackOverflow:

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

Đó là:

Bạn có thể sử dụng một công cụ như http://www.favicon.cc/ để nhập ảnh và chuyển đổi nó thành favicon hoặc chỉ cần tạo từ đầu.

Sau đó, nếu bạn đặt tên cho tệp của mình favicon.icovà đặt nó ở thư mục gốc của trang web, hầu hết các trình duyệt web sẽ tự động lấy nó.

Nhưng bạn cũng có thể khai báo rõ ràng trong các tệp html của mình như thế này:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

Với những lợi thế để sử dụng định dạng khác hơn ico, hãy sử dụng favicon khác biệt trên các trang khác nhau, đặt favicon của bạn đến một nơi khác, sử dụng tên khác hơn faviconv.v.

http://en.wikipedia.org/wiki/Favicon

Đánh dấu với đường dẫn http tên miền đầy đủ cho IE và giữ favicon trong thư mục tài liệu:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

Định dạng hình ảnh tiêu chuẩn:

• .ico
• 16 x 16 pixel

Đối với các thiết bị, trình duyệt và HĐH khác nhau, bạn có thể sử dụng các biểu tượng khác nhau. Ví dụ dưới đây là một danh sách có thể giúp bạn có cảm hứng. Làm bằng mọi cách có nghĩa là đúng / chỉnh sửa danh sách khi mọi thứ tiến triển.

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

Bạn không cần một liên kết nữa, nhưng nó hữu ích. Thay vào đó, miễn là bạn để tập tin có tên favicon.ico (và đó là ico) trong thư mục gốc của bạn, nó sẽ được sử dụng làm favicon.

Tôi gặp một chút khó khăn khi tạo tệp .ico của mình với GIMP, nhưng bài đăng này cung cấp hướng dẫn chi tiết. Thủ thuật dường như là lưu dưới dạng định dạng GIF trước tiên để chuyển đổi sang bảng màu được lập chỉ mục, sau đó chuyển đổi thành định dạng ICO.