IE 10에서 가장 인기있는 사이트 화면-아이콘이 나타나지 않음

다음 코드를 사용하여 파비콘, 태블릿, 스마트 폰, Windows 8 타일 등의 아이콘을 추가합니다.

<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"/>

불행히도 이것은 IE9 및 IE10의 '가장 인기있는 사이트 화면'에서 작동하지 않는 것처럼 보입니다 .Google 검색은 깨달았습니다.

스택 용도 <link rel="apple-touch-icon" href="apple-touch-icon.png">로는 효과가 있지만 우리에게는 적합하지 않습니다.

해결책에 대한 단서가 높이 평가됩니다.

여기에 이미지 설명을 입력하십시오

internet-explorer favicon

— MJWadmin
소스

이 화면 에서만 실패 합니까? 예. 정상적으로 방문 할 때 브라우저 탭에 아이콘이로드됩니까? 그것은 확실하게 아무것도 증명하지는 못하지만 약간 유익합니다. 당신은 그렇지 않으면 파비콘 상황을 꽤 철저히 다루었던 것 같습니다. 나는 이것에 대해 너무 걱정할 것이 확실하지 않다. 브라우저는 연령대에 일반적으로 즐겨 찾기 아이콘을로드하는 것에 대해 악명 높은 것으로 유명합니다. 또한 모두에게 그런 일이 있습니까?

— Su '

어떤 아이콘도 404'ing하지 않으며, 터치 아이콘과 마찬가지로 다른 브라우저에서도 즐겨 찾기 아이콘이 작동합니다. 이것은 매우 성가신 '의장 주요 고지 사항'문제 중 하나입니다. 그것에 아침을 보냈을 때, 호기심과 좌절은 나에게 더 좋았습니다.

— MJWadmin

스택이 사용하는 실제 PNG 이미지를 사용해 보셨습니까? PNG 형식 자체에 이상이있는 경우

— MrWhite

다른 브라우저는 여기서 관련이 없습니다. 아이콘이 일반 IE 탭에로드됩니다. 404 부족은 아무 것도 말하지 않습니다. 이미지가 실제로 있는지 여부와 관련이 없습니다. 브라우저는 일반적으로 즐겨 찾기 아이콘을로드하는 데 어려움을 겪습니다. 그것이 문제가 될 때 수행 할 수있는 일이 거의 없습니다 (캐시 지우기 및 생각할 수있는 것 : 작동 할 수도 있고 아닐 수도 있습니다. 놀랄 것입니다!) 그들은 시간이 지남에 따라 더 나아졌습니다. 여전히 발생합니다. Firefox가 다른 탭 에서 이미 열려있는 사이트의 탭에서 즐겨 찾기 아이콘을 아이콘으로 로드하지 못했습니다 .

— Su '

댓글에 웹 사이트 링크를 게시 할 수 있습니까?

답변:

ico 파일은 어디에 있습니까? 루트 폴더에있는 것을 볼 수 있습니다. 슬래시가 필요없고 파일 뒤에서 슬래시를 제거하십시오. 또한 필요하지 않습니다.type="image/x-icon"

ICO 파일은 필요한 아이콘 크기가 다른 일반 아이콘 라이브러리 여야합니다.

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

위의 코드를 사용하면 IE9, IE10, FX 및 Chrome에 완벽하게 작동합니다.

이전에 다른 favico를 사용 했다면 브라우저의 캐시 도 새로 고쳐야합니다 .

— 옴네
소스

파일이 실제로 루트 폴더에 있다고 가정하면 문제는 표시된 것처럼 html 태그가 아닌 파일입니다 (IE 문제를 일으키는 다른 html 오류가 더 이상 발생하지 않는 한). 내 favicon 링크 태그는 @MJWadmin과 같이 작성되었으며 IE9 즐겨 찾기 탭에서 아이콘이 제대로로드됩니다.

— WebChemist

즐겨 찾기 아이콘의 크기는 얼마입니까? 이 목록이 다음 지침에 해당되는지 확인하십시오.

Internet Explorer 9에서 사이트 아이콘 사용자 지정-사이트 아이콘

편집하다

Stackoverflow의 소스 코드를 보면 두 개의 아이콘 이미지가 있습니다.

<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">

IE9의 즐겨 찾기 탭에서 내 스택 오버 플로우를 보면 16x16 즐겨 찾기 아이콘을 사용하고 (32x32 컨테이너를 중심으로) 16x16 즐겨 찾기 아이콘을 사용하는 것처럼 보입니다 .PNG를 보면 측면과 하단의 "패딩"거리 비율은 약 2.5 : 1이며 여기에서 즐겨 찾기 아이콘의 1 : 1은 IE9 탭의 1 : 1 패딩과 동일합니다.

고용주의 파비콘이 IE9 즐겨 찾기와 64x64 (투명도, 크기 12.5kb)에로드된다고 말할 수 있습니다. 그래도 즐겨 찾기 아이콘을 표시 할 수없는 경우 실제 이미지 파일을 확인할 수 있도록 링크를 게시하십시오.

— Web 화학자
소스

-1

Omne이 제안한 것처럼 형식 속성을 제거하거나 image / vnd.microsoft.icon을 값으로 사용하여 두 번째 속성을 추가하십시오. 그리고 서버가 dot ico 파일에 대한 MIME 유형을 전송하고 있는지 확인하십시오. 이것 좀 봐:

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

일부 배경

예전에는 아이콘에 대한 올바른 MIME 유형이 무엇인지에 대해 논쟁 중이었습니다.

Microsoft의 세계는 "image / vnd.microsoft.icon"에 익숙했으며 아마도 "image / x-icon"을 비공식적으로 (공식적으로) lol로 사용합니다.

에서 ICO 형식 위키 피 디아 :

ICO 파일에 대한 공식 IANA 등록 MIME 유형은 2003 년에 등록 된 image / vnd.microsoft.icon입니다. 잘못된 레이블 "image / ico", "image / icon", "text / ico"및 "application / ico" MIME 유형의 공식 등록 및 할당시 비공식 이름 인 "image / x-icon"이 사용되었습니다.

Favicon의 위키 백과에서

2003 년에 .ico 형식은 MIME 형식 image / vnd.microsoft.icon에 IANA (Internet Assigned Numbers Authority)에 등록되었습니다. [12] .ico 형식을 사용하면 Internet Explorer는 표준화 된 MIME 형식으로 제공되는 파일을 표시 할 수 없습니다. Internet Explorer의 해결 방법은 .ico를 웹 서버의 비표준 image / x-icon MIME 유형과 연결하는 것입니다.

— 안토니 하트 조풀 로스
소스