IT

HTML 5 Favicon-지원?

lottoking 2020. 6. 1. 08:11
반응형

HTML 5 Favicon-지원?

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

현재 HTML5 사양에서는 태그 내에서 rel = "icon"size = "공백으로 구분 된 아이콘 크기 목록"속성을 사용하여 크기 아이콘을 여러 크기로 지정하는 것이 좋습니다. [ source ] Microsoft .ico 및 Macintosh .icns 파일과 같은 컨테이너 형식과 확장 가능한 벡터 그래픽을 포함한 여러 아이콘 형식은 아이콘 내용 형식을 파일 형식에 "="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 웹 브라우저는 사용자가 "도구"메뉴에서 응용 프로그램 바로 가기 만들기 ...를 선택하면 HTML 헤더에 제공된 크기와 가장 가까운 크기를 선택하여 128 × 128 픽셀 응용 프로그램 아이콘을 만듭니다.

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

아이콘 사용을 다루려면 32x32 픽셀로 아이콘을 만드십시오. 주목 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">

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

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

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

사용 rel="apple-touch-icon-precomposed"iOS에서 북마크 때 반사 광택을 적용하지 않습니다. iOS가 광택을 사용하도록하려면 rel="apple-touch-icon". 이 아이콘의 크기는 180x180 픽셀이어야합니다. 최신 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 Live Tiles

If a user is using a Windows Phone they can pin a website to the start screen of their phone. Unfortunately, when they do this it displays a screenshot of your phone, not a favicon (not even the MS specific code referenced above). To make a "Live Tile" for Windows Phone Users for your website one must use the following code:

Here are detailed instructions from Microsoft but here is a synopsis:

Step 1

Create a square image for your website, to support hi-res screens create it at 768x768 pixels in size.

Step 2

Add a hidden overlay of this image. Here is example code from 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>

Step 3

You then can add thew following line to add a pin to start link:

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

Microsoft recommends that you detect windows phone and only show that link to those users since it won't work for other users.

Step 4

Next you add some JS to toggle the overlay visibility

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

Note on Sizes

I am using one size as every browser will scale down the image as necessary. I could add more HTML to specify multiple sizes if desired for those with a lower bandwidth but I am already compressing the PNG files heavily using TinyPNG and I find this unnecessary for my purposes. Also, according to philippe_b's answer Chrome and Firefox have bugs that cause the browser to load all sizes of icons. Using one large icon may be better than multiple smaller ones because of this.

Further Reading

For those who would like more details see the links below:

No, not all browsers support the sizes attribute:

Note that some platforms define specific sizes:

참고URL : https://stackoverflow.com/questions/23849377/html-5-favicon-support

반응형

'IT' 카테고리의 다른 글

vs  (0) 2020.06.01
파이썬 목록을 다른 "하위 목록"으로 분할합니다. 예 : 더 작은 목록  (0) 2020.06.01
ASP.NET MVC 컨트롤러에서 외부 URI로 리디렉션  (0) 2020.06.01
Django DB 설정 '잘못된 구성'오류  (0) 2020.06.01
정적 속성에 바인딩  (0) 2020.06.01

'IT'의 다른글

  • 현재글HTML 5 Favicon-지원?

관련글

댓글

티스토리툴바