2015-02-03 2 views
0

올바른 상황에서 적절한 아이콘/타일을 표시하기 위해 노력하고있는 webapp을 얻는 데 대한 조사를 해보았습니다. 우리는 브라우저 탭에 표시된 아이콘에 투명하게 사용 된 .ICO 로고 버전을 가지고 있습니다. 배경 테두리가 없으며 탭 회색에 대한 로고뿐입니다. 이제 사용자가 앱에 홈 스크린 링크를 추가 할 수 있기를 바랍니다. 이 링크의 아이콘은 회색 배경의 로고 여야합니다.브라우저 탭과 '바탕 화면에 추가'아이콘이 구분됩니다.

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

플러스 추가 크기는 우리가 추가 할 :

는 애플이 용이하다. apple-touch 접두어는 별도의 파일을 쉽게 만듭니다.

그러나 Android에서 문제가 발생합니다. 현재 Android는 사과 터치 아이콘을 수락하지만이 아이콘은 가치가 떨어지고 곧 작동하지 않습니다. 브라우저가 그것을 볼 때

<link rel="icon" sizes="192x192" href="icon-name-192.png"> 
<link rel="icon" sizes="128x128" href="icon-name-128.png"> 

이 분명히 파비콘을 덮어 쓰게됩니다 : (https://developer.chrome.com/multidevice/android/installtohomescreen#icon) 아이콘을 추가 주어진 메타 태그 (크롬 유일한 관심사입니다) 안드로이드에 사용되는은으로 표시됩니다. 즉,이 이미지에 원하는 회색 배경을 지정하면 브라우저 탭의 아이콘에 회색 사각형이 표시됩니다. 그리고 이러한 것들이 투명하다면 나는 ANdroid에서 바탕 화면에 추가 할 때 회색 사각형이없는 아이콘을 얻습니다.

내가 누락 된 항목이 있습니까? 이것은 꽤 일반적인 요청처럼 보이지만 아직 해결책을 찾을 수 없습니다. favicon이 투명성을 보이지만 데스크탑 버전이 회색/다른 색상으로 표시되는 다른 사이트에 대한 메타 데이터를 조사해 보았습니다.하지만 추가 태그는 표시되지 않으므로 Apple Touch 버전을 사용하고 있다고 가정합니다. 명시된 바와 같이 현 시점에서는 여전히 합법적입니다.

이 문제를 해결하기 위해 수락 된 방법은 무엇입니까?

답변

1

rel="shortcut icon"은 아마도 당신이 찾고있는 것일 것입니다.

+0

감사합니다. 이 지식을 사용하여 나는 이것을 찾아서 찾을 수있었습니다 : http://stackoverflow.com/questions/25952907/favicon-ico-vs-link-rel-shortcut-icon 문제를 완벽하게 해결했습니다. – DrHall

관련 문제