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

크로스 브라우저 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에는 브라우저가 모든 크기의 아이콘을로드하는 버그가 있습니다. 이 때문에 하나의 큰 아이콘을 사용하는 것이 여러 개의 작은 아이콘보다 낫습니다.

추가 자료

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

• Favicons에 관한 Wikipedia 기사
• 아이콘 핸드북
• Jonathan T. Neal 의 Favicon 이해
• Mathias Bynens에 의해 유해한 것으로 간주되는 rel = “바로 가기 아이콘”
• Mathias Bynens의 터치 아이콘 에 대해 항상 알고 싶었던 모든 것

---

답변