충돌 파비콘

내 블로거 사이트는 다음과 같은 라인을 생성충돌 파비콘

<link href='http://www.mtscollective.com/favicon.ico' rel='icon' type='image/x-icon'/>

를 그리고 안드로이드 사이트가 홈 화면으로 저장할 때 사용하는 나는 또한 다음 줄을 추가했습니다 :

<link href='http://cdn.mtscollective.com/images/android/icon-196.png' rel='icon' sizes='196x196'/>

문제는 크롬과 파이어 폭스가 이들을 서로 교환 할 수있게 사용하는 경우가 있지만 첫 번째 줄만 사용하기를 바랍니다. 이것을 제어 할 수 있습니까?

감사

출처

2014-05-14 Mario Parra

Firefox and Chrome tend to favor PNG pictures over favicon.ico. 그래서 당신은 또한 기존의 196x196 그림과 함께, 16 × 16 PNG 사진을 선언해야합니다.

파이어 폭스는 마지막으로 선언 된 PNG 그림을 사용합니다 (이것은 bug 751712입니다).

<link rel="shortcut icon" href="/path/to/icons/favicon.ico"> 
<link rel="icon" type="image/png" href="/path/to/icons/favicon-196x196.png" sizes="196x196"> 
<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">

마지막으로, 파이어 폭스와 크롬 모두 sizes 속성에 대한 지원 부족 : 당신은 16 × 16 사진 마지막를 선언해야합니다. 결과적으로 첫 번째 방문 중에 두 PNG 그림 (모두 bug 751712 (FireFox) 및 issue 324820 (Chrome))이로드됩니다. 이것은 심각한 문제는 아니지만 이것을 잘 알고 있습니다.

출처

2014-05-15 08:11:10

고마워요! 매우 도움이된다 –

두 브라우저가'sizes' 속성을 지원하지 않는다면, 16x16 라인에서이 브라우저를 사용하면 어떤 이점이 있습니까? –

Chrome은 sizes 속성을 확인하지 않지만 가장 적합한 해상도 (기존 데스크톱 환경에서는 16x16)의 아이콘을 선택합니다. 파이어 폭스는 마지막 PNG 아이콘을 선택합니다. 그러나 Android Chrome과 같은 다른 브라우저는 크기 특성에 따라 196x196 크기의 아이콘 만로드 할만큼 똑똑합니다. –

충돌 파비콘

답변

관련 문제