현재 파비콘을 지원하는 모든 브라우저에 파비콘을 표시하는 가장 좋은 방법은 무엇입니까?
문제
현재 지원하는 모든 브라우저에 파비콘을 표시하는 가장 좋은 방법은 무엇입니까?
다음을 포함해 주세요:
어떤 브라우저에서 어떤 이미지 형식을 지원합니까?
다양한 브라우저의 어떤 위치에 어떤 줄이 필요합니까?
해결책
나는 여기에 벨트와 교정기 접근 방식을 적용합니다.
두 페이지 모두에 32x32 아이콘을 만듭니다. .ico
그리고 .png
호출되는 형식 favicon.ico
그리고 favicon.png
.오래된 브라우저를 사용하지 않는 한 아이콘 이름은 실제로 중요하지 않습니다.
- 장소
favicon.ico
이전 브라우저를 지원하려면 사이트 루트에 있어야 합니다(선택 사항이며 이전 브라우저에만 해당됩니다. - 내 이미지 하위 디렉터리에 favicon.png를 배치합니다(단순히 정리하기 위해).
- 내부에 다음 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는 다음 순서로 파일 이름을 검색합니다.
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- 사과-터치-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.
각 페이지의 파비콘이 어떻게 만들어지는지 확인할 수 있는 사이트도 있습니다.
거기에서 파비콘, 이미지 유형 및 해상도 만들기에 대한 튜토리얼을 볼 수 있습니다. 정말 좋습니다!
가있는 favicon.*
대부분의 브라우저는 루트 디렉터리에 있는 파일을 자동으로 감지합니다.다음을 사용하여 감지되었는지 확인할 수 있습니다.
<link rel="icon" type="image/png" href="/path/image.png" />
개인적으로 저는 .png 이미지를 사용하지만 대부분의 형식이 작동합니다.