Màn hình trang web phổ biến nhất của bạn trong IE 10 - Biểu tượng không xuất hiện


11

Chúng tôi sử dụng mã sau đây để thêm các biểu tượng cho favicon, máy tính bảng, điện thoại thông minh, gạch cửa sổ 8 và tương tự: -

<link rel="apple-touch-icon" href="apple-touch-icon.png">

<link rel="shortcut icon" type="image/x-icon" href="/webmasters//favicon.ico"/>

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<meta name="msapplication-TileImage" content="apple-touch-icon-144x144-precomposed.png"/>

<meta name="msapplication-TileColor" content="#17151a"/>

Thật không may, điều này dường như không hoạt động đối với IE9 và IE10, 'màn hình trang web phổ biến nhất của bạn', các tìm kiếm google đã không sáng tỏ.

Stack sử dụng <link rel="apple-touch-icon" href="apple-touch-icon.png">mà dường như làm việc cho nó, nhưng không phải cho chúng ta.

Bất kỳ manh mối cho một giải pháp đánh giá cao.

nhập mô tả hình ảnh ở đây


1
Có phải nó chỉ thất bại trên màn hình này? ví dụ. Biểu tượng có được tải bởi tab trình duyệt khi truy cập bình thường không? Điều đó chắc chắn sẽ không chứng minh bất cứ điều gì, nhưng nó sẽ là một chút thông tin. Bạn có vẻ như đã che đậy tình huống favicon khá kỹ lưỡng. Tôi không chắc chắn tôi lo lắng về điều này quá nhiều. Các trình duyệt nổi tiếng là không ổn định về việc tải favicon nói chung cho các lứa tuổi. Ngoài ra, nó có xảy ra cho tất cả mọi người?
Su '

Không có biểu tượng nào là 404 và favicon hoạt động trong các trình duyệt khác, cũng như các biểu tượng cảm ứng. Đây là một trong những vấn đề rất khó chịu 'chủ tịch thông báo'. Đã dành buổi sáng cho nó, sự tò mò và thất vọng đã giúp tôi trở nên tốt hơn.
MJWadmin

3
Bạn đã thử hình ảnh PNG thực tế mà stack sử dụng chưa? Trong trường hợp có một số bất thường với định dạng PNG?
MrWhite

1
Các trình duyệt khác không liên quan ở đây; Tôi có nghĩa là tải biểu tượng trong các tab IE thông thường. Thiếu 404 sẽ không cho bạn biết bất cứ điều gì. Nó không liên quan gì đến việc hình ảnh có thực sự ở đó hay không. Các trình duyệt thường chỉ hay thay đổi về việc tải favicon, thời gian; khi nó tự biến thành vấn đề thì thường có rất ít việc có thể làm được (xóa bộ nhớ cache và bất cứ điều gì khác bạn có thể nghĩ đến: có thể hoạt động, có thể không; nó sẽ gây bất ngờ!) Họ đã hiểu rõ hơn về nó theo thời gian, nhưng nó vẫn xảy ra Firefox vừa thất bại khi tải một favicon trong một tab cho một trang web đã mở trong một tab khác , với biểu tượng.
Su '

1
Bạn có thể gửi một liên kết đến trang web trong các ý kiến?

Câu trả lời:


1

Tập tin ico của bạn ở đâu? Tôi có thể thấy nó trong thư mục gốc, sau đó bạn không cần dấu gạch chéo phía sau nó, xóa dấu gạch chéo từ phía sau tệp của bạn, bạn cũng không cầntype="image/x-icon"

Tệp ICO của bạn phải là một thư viện biểu tượng bình thường với các kích thước biểu tượng cần thiết khác nhau.

<link rel="shortcut icon" href="favicon.ico"/>

Chỉ cần sử dụng mã trên, nó hoạt động hoàn hảo cho IE9, IE10, FX và Chrome.

Nếu bạn đã có favico khác trước đây, bạn cũng cần làm mới bộ nhớ cache của trình duyệt .


giả sử tệp thực sự nằm trong thư mục gốc, vấn đề chắc chắn là tệp chứ không phải thẻ html như được hiển thị (trừ khi có các lỗi html khác tiếp tục gây ra sự cố IE). Thẻ liên kết favicon của tôi được viết giống như @MJWadmin và biểu tượng của tôi tải tốt trong các tab yêu thích của IE9
WebChemist

0

Các kích thước của favicon của bạn là gì? Kiểm tra danh sách này để đảm bảo chúng nằm trong các hướng dẫn sau:

Tùy chỉnh biểu tượng trang web - Biểu tượng trang web trong Internet Explorer 9

Biên tập

Nhìn vào mã nguồn của Stackoverflow, tôi thấy 2 hình ảnh biểu tượng:

<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

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

Khi tôi nhìn vào stackoverflow của mình trong tab yêu thích của tôi trong IE9, có vẻ như nó sử dụng favicon 16x16 (và đặt nó trong một thùng chứa 32x32), chứ không phải biểu tượng cảm ứng táo stackoverflow 158x158 như bạn đề xuất bởi vì nếu bạn nhìn vào png, thì Tỷ lệ khoảng cách "đệm" từ cạnh so với đáy là khoảng 2,5: 1 trong đó tỷ lệ 1: 1 của nó trong favicon, giống như tỷ lệ đệm 1: 1 trên tab IE9 ...

Tôi có thể cho bạn biết favicon của chủ nhân của tôi tải trong mục yêu thích IE9 và 64x64 của nó (không có độ trong suốt, kích thước 12,5kb). Nếu bạn vẫn không thể hiển thị hình đại diện của mình, hãy đăng một liên kết để chúng tôi có thể kiểm tra tệp hình ảnh thực tế


-1

Hãy thử như Omne gợi ý và xóa thuộc tính loại của bạn hoặc thêm thuộc tính thứ hai với image / vnd.microsoft.icon làm giá trị. Và sau đó đảm bảo rằng máy chủ của bạn đang gửi loại mime cho các tệp chấm ico. Xem cái này:

https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

Một số Backstory

Nó đã từng, hay đúng hơn là đã được tranh luận về loại mime chính xác là gì cho các biểu tượng.

Thế giới của Microsoft đã từng và có lẽ vẫn dựa vào "image / vnd.microsoft.icon" khi phần còn lại của thế giới sử dụng "hình ảnh / biểu tượng x" không chính thức (chính thức) lol.

Từ định dạng ICO của wikipedia :

Loại MIME đã đăng ký IANA chính thức cho các tệp ICO là image / vnd.microsoft.icon, được đăng ký vào năm 2003. Nhãn hiệu sai lệch "image / ico", "image / icon", "text / ico" và "application / ico", cùng với với tên không chính thức "hình ảnh / biểu tượng x" được sử dụng tại thời điểm đăng ký chính thức và gán loại MIME.

từ From wikipedia cho Favicon

Vào năm 2003, định dạng .ico đã được đăng ký với Cơ quan cấp số được gán Internet (IANA) dưới dạng hình ảnh MIME / vnd.microsoft.icon. [12] Khi sử dụng định dạng .ico, Internet Explorer không thể hiển thị các tệp được cung cấp với loại MIME được tiêu chuẩn hóa. Một cách giải quyết cho Internet Explorer là liên kết .ico với loại MIME hình ảnh / biểu tượng x không chuẩn trong các máy chủ Web.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.