HTML 5 Favicon-지원? = “공백으로 구분

Wikipedia의 Favicon 페이지를 읽고있었습니다. Favicon에 대한 HTML 5 사양을 언급합니다.

현재 HTML5 사양에서는 태그 내에 rel = “icon”size = “공백으로 구분 된 아이콘 크기 목록”속성을 사용하여 크기 아이콘을 여러 크기로 지정하는 것이 좋습니다. [ source ] Microsoft .ico 및 Macintosh .icns 파일과 같은 컨테이너 형식과 확장 가능한 벡터 그래픽을 포함한 여러 아이콘 형식은 아이콘 내용 형식을 파일 형식에 “=”content content-type “형식으로 포함시켜 제공 할 수 있습니다 꼬리표.

인용 된 기사 (W3)를 보면 다음 예가 표시됩니다.

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

내 질문은 어떤 브라우저가 HTML 5 방법을 지원합니까?

참고 : Apple은 apple-touch-iconHTML5 방법보다 메타 태그 방법을 사용합니다.

위키 백과 기사는 다음과 같이 주장합니다.

그러나 Chrome 웹 브라우저는 사용자가 “도구”메뉴에서 응용 프로그램 바로 가기 만들기 …를 선택할 때 128×128 픽셀 응용 프로그램 아이콘을 생성하기 위해 HTML 헤더에 제공된 크기와 가장 가까운 크기를 선택합니다.

Internet Explorer (v9 ~ v11)와 Firefox는이 문제를 어떻게 처리합니까? 그리고 Chrome이 HTML Favicons를 처리하는 방식이 정확합니까? (Chrome에서이를 확인하는 출처는 없습니다.)

검색에서 Wikipedia Article 이외의 HTML 5 Favicon에 대한 (믿기 쉬운) 정보를 실제로 찾을 수 없었습니다.



답변

(이 게시물 당시) 제공된 답변은 링크 전용 답변이므로 링크를 답변으로 요약하고 내가 사용할 내용을 요약한다고 생각했습니다.

크로스 브라우저 Favicons (터치 아이콘 포함)를 만들 때 고려해야 할 사항이 몇 가지 있습니다.

첫 번째는 물론 Internet Explorer입니다. IE는 버전 11까지 PNG 즐겨 찾기 아이콘을 지원하지 않으므로 첫 번째 줄은 IE 9 이하의 즐겨 찾기 아이콘에 대한 조건부 주석입니다.

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

아이콘 사용을 다루려면 32×32 픽셀로 아이콘을 만드십시오. 주목 rel="shortcut icon"IE가이 단어를 필요로하는 아이콘을 인식하는 shortcut기준이 아니다. 또한 .icoChrome과 Safari는 .ico파일이 존재하는 경우 파일 을 사용하지만 다른 옵션이 있지만 원하는 것을 사용하지 않기 때문에 즐겨 찾기 아이콘을 IE 조건부 주석으로 묶습니다 .

위의 IE는 IE 9까지 적용됩니다. IE 11은 PNG 즐겨 찾기 아이콘을 허용하지만 IE 10은 허용하지 않습니다. 또한 IE 10은 조건부 주석을 읽지 않으므로 IE 10은 즐겨 찾기 아이콘을 표시하지 않습니다. IE 11 및 Edge를 사용할 수 있으면 IE 10이 널리 사용되지 않으므로이 브라우저는 무시합니다.

나머지 브라우저에서는 표준 방법을 사용하여 즐겨 찾기 아이콘을 인용합니다.

<link rel="icon" href="path/to/favicon.png">

이 아이콘을 사용할 수있는 모든 장치를 포함하려면이 아이콘의 크기가 196×196 픽셀이어야합니다.

모바일 기기의 터치 아이콘을 다루기 위해 Apple의 독자적인 방법으로 터치 아이콘을 인용 할 것입니다.

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

사용 rel="apple-touch-icon-precomposed"iOS에서 북마크 때 반사 광택을 적용하지 않습니다. iOS가 광택을 사용하도록하려면 rel="apple-touch-icon". 이 아이콘의 크기는 180×180 픽셀이어야합니다. 최신 iPhone 및 iPad에 대해 Apple에서 현재 권장하는 크기입니다. 나는 블랙 베리도 사용할 것이라고 읽었습니다 rel="apple-touch-icon-precomposed".

참고 : Android 용 Chrome 상태 :

apple-touch- *는 더 이상 사용되지 않으며 단기간 동안 만 지원됩니다. (Chrome m31의 베타 버전으로 작성).

Windows 8.1 이상에서 IE 11+ 용 사용자 지정 타일

Windows 8.1+의 IE 11+는 사이트에 고정 된 타일을 만드는 방법을 제공합니다.

다음과 같은 크기로 몇 개의 타일을 만드는 것이 좋습니다.

작게 : 128 x 128

중간 : 270 x 270

와이드 : 558 x 270

대형 : 558 x 558

다음에 색상 배경을 정의 할 것이므로 투명한 이미지 여야합니다.

이러한 이미지가 생성되면 browserconfig.xml다음 코드를 사용하여 xml 파일을 만들어야합니다 .

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

이 xml 파일을 사이트의 루트에 저장하십시오. 사이트가 고정되면 IE가이 파일을 찾습니다. xml 파일의 이름을 다르게 지정하거나 다른 위치에 두려면이 메타 태그를 다음에 추가하십시오 head.

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

IE 11+ 사용자 지정 타일 및 XML 파일 사용에 대한 자세한 내용 은 Microsoft 웹 사이트를 방문하십시오 .

함께 모아서:

위의 코드를 모두 정리하면 다음과 같습니다.

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

Windows Phone 라이브 타일

사용자가 Windows Phone을 사용하는 경우 웹 사이트를 전화기의 시작 화면에 고정 할 수 있습니다. 불행히도,이 작업을 수행하면 즐겨 찾기 아이콘이 아닌 전화기의 스크린 샷이 표시됩니다 (위에서 참조한 MS 특정 코드조차도 아님). Windows Phone 용 “라이브 타일”을 만들려면 웹 사이트 사용자는 다음 코드를 사용해야합니다.

다음은 Microsoft의 자세한 지침 이지만 시놉시스는 다음과 같습니다 .

1 단계

고해상도 화면을 지원하기 위해 웹 사이트의 정사각형 이미지를 만들어 768×768 픽셀 크기로 만듭니다.

2 단계

이 이미지의 숨겨진 오버레이를 추가하십시오. 다음은 Microsoft의 예제 코드입니다.

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
  <img src="customtile.png" width="320" height="320" />
  <div style='margin-top: 40px'>
     Add text/graphic asking user to pin to start using the menu...
  </div>
</div>

3 단계

그런 다음 다음 줄을 추가하여 링크를 시작할 핀을 추가 할 수 있습니다.

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

Windows Phone을 감지하고 다른 사용자에게는 작동하지 않으므로 해당 사용자에 대한 링크 만 표시하는 것이 좋습니다.

4 단계

다음으로 오버레이 가시성을 토글하기 위해 JS를 추가하십시오.

<script>
function ToggleTileOverlay() {
 var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
 document.getElementById('TileOverlay').style.visibility =    newVisibility;
}
</script>

크기에 대한 참고 사항

모든 브라우저가 필요에 따라 이미지를 축소하므로 하나의 크기를 사용하고 있습니다. 더 낮은 대역폭을 가진 사람들을 위해 원하는 경우 여러 크기를 지정하기 위해 HTML을 더 추가 할 수 있지만 TinyPNG를 사용하여 PNG 파일을 이미 많이 압축하고 있으며 필자의 목적으로는 필요하지 않습니다. 또한 philippe_b답변 에 따르면 Chrome 및 Firefox에는 브라우저가 모든 크기의 아이콘을로드하는 버그가 있습니다. 이 때문에 하나의 큰 아이콘을 사용하는 것이 여러 개의 작은 아이콘보다 낫습니다.

추가 자료

자세한 내용을 보려면 아래 링크를 참조하십시오.


답변

아니요, 모든 브라우저가 sizes속성을 지원하지는 않습니다 .

일부 플랫폼은 특정 크기를 정의합니다.