현재 파비콘을 지원하는 모든 브라우저에 파비콘을 표시하는 가장 좋은 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/37073

  •  09-06-2019
  •  | 
  •  

문제

현재 지원하는 모든 브라우저에 파비콘을 표시하는 가장 좋은 방법은 무엇입니까?

다음을 포함해 주세요:

  1. 어떤 브라우저에서 어떤 이미지 형식을 지원합니까?

  2. 다양한 브라우저의 어떤 위치에 어떤 줄이 필요합니까?

도움이 되었습니까?

해결책

나는 여기에 벨트와 교정기 접근 방식을 적용합니다.

두 페이지 모두에 32x32 아이콘을 만듭니다. .ico 그리고 .png 호출되는 형식 favicon.ico 그리고 favicon.png.오래된 브라우저를 사용하지 않는 한 아이콘 이름은 실제로 중요하지 않습니다.

  1. 장소 favicon.ico 이전 브라우저를 지원하려면 사이트 루트에 있어야 합니다(선택 사항이며 이전 브라우저에만 해당됩니다.
  2. 내 이미지 하위 디렉터리에 favicon.png를 배치합니다(단순히 정리하기 위해).
  3. 내부에 다음 HTML을 추가합니다. <head> 요소.
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

점에 유의하시기 바랍니다:

  • MIME 유형 .ico 파일은 image/vnd.microsoft.icon으로 등록되었습니다. IANA.
  • Internet Explorer는 다음을 무시합니다. type 바로가기 아이콘 관계에 대한 속성이며 이것이 이 관계를 지원하는 유일한 브라우저이므로 제공할 필요가 없습니다.

참조

다른 팁

나는 .ico 형식을 사용하고 다음 두 줄을 <head> 요소:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

태블릿과 스마트폰의 터치 아이콘도 지원하려면 다음과 같은 접근 방식을 선호합니다. HTML5보일러플레이트

터치 아이콘에 대한 자세한 내용은 다음에서 확인할 수 있습니다. 이 기사.

현재 브라우저 지원 상태에서는 문서에 파비콘에 대한 HTML 태그를 추가할 필요조차 없습니다.브라우저는 자동으로 파일 목록을 검색합니다. iOS의 경우 다음 예를 참조하세요.

HTML에 아이콘이 지정되지 않은 경우 iOS Safari는 Apple-Touch-Icon 또는 Apple-Touch-Icon-Precomcomcomcomed Prefix가있는 아이콘에 대한 웹 사이트의 루트 디렉토리를 검색합니다.예를 들어, 장치의 적절한 아이콘 크기가 57 × 57 픽셀 인 경우 iOS는 다음 순서로 파일 이름을 검색합니다.

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. 사과-터치-icon.png

내 조언은 문서에 파비콘을 포함하지 말고 루트 웹 사이트에 파일 목록을 준비하는 것입니다.

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • 사과-터치-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

에서 템플릿을 다운로드할 때 html5boilerplate.com 이것들은 모두 포함되어 있으므로 자신만의 아이콘으로 교체하기만 하면 됩니다.

IE6은 PNG를 올바르게 처리할 수 없습니다. 주의하세요.

파비콘은 .ico 파일 모든 브라우저에서 제대로 작동하려면.

최신 브라우저는 PNG 및 GIF 이미지도 지원합니다.

나는 일반적으로 하나를 만드는 가장 쉬운 방법은 다음과 같이 무료로 제공되는 웹 서비스를 사용하는 것임을 발견했습니다. favicon.cc.

각 페이지의 파비콘이 어떻게 만들어지는지 확인할 수 있는 사이트도 있습니다.

getfavicon.org

거기에서 파비콘, 이미지 유형 및 해상도 만들기에 대한 튜토리얼을 볼 수 있습니다. 정말 좋습니다!

가있는 favicon.* 대부분의 브라우저는 루트 디렉터리에 있는 파일을 자동으로 감지합니다.다음을 사용하여 감지되었는지 확인할 수 있습니다.

 <link rel="icon" type="image/png" href="/path/image.png" />

개인적으로 저는 .png 이미지를 사용하지만 대부분의 형식이 작동합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top