현재 파비콘을 지원하는 모든 브라우저에서 파비콘을 표시하는 가장 좋은 방법은 무엇입니까?
현재 파비콘을 지원하는 모든 브라우저에서 파비콘을 표시하는 가장 좋은 방법은 무엇입니까?
포함하십시오 :
어떤 브라우저에서 어떤 이미지 형식이 지원되는지.
다양한 브라우저에서 어떤 위치에 필요한 줄.
나는 벨트와 버팀대를 여기에 접근합니다.
나는 모두에 32 × 32 아이콘 생성 .ico과 .png라는 형식 favicon.ico과 favicon.png. 이전 브라우저를 다루지 않는 한 아이콘 이름은 실제로 중요하지 않습니다.
- 장소
favicon.ico선택 및 이전 버전의 브라우저에만 해당 오래된 브라우저 (지원 사이트 루트에. - 내 이미지 하위 디렉토리에 favicon.png를 배치합니다 (정리를 유지하기 위해).
<head>요소 내부에 다음 HTML을 추가하십시오 .
<link rel = "icon"href = "/ images / favicon.png"type = "image / png"/> <link rel = "shortcut icon"href = "/ favicon.ico"/>
점에 유의하시기 바랍니다:
.ico파일 의 MIME 유형 은 IANA에 의해 image / vnd.microsoft.icon으로 등록되었습니다 .- 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" />
태블릿 및 스마트 폰용 터치 아이콘도 지원하려면 HTML5Boilerplate 의 접근 방식을 선호합니다.
터치 아이콘에 대한 자세한 내용은 이 문서 에서 찾을 수 있습니다 .
현재 브라우저 지원 상태에서는 문서의 파비콘에 대한 HTML 태그를 추가 할 필요조차 없습니다. 브라우저는 파일 목록을 자동으로 검색합니다. iOS의 경우 다음 예를 참조하십시오.
HTML에 지정된 아이콘이없는 경우 iOS Safari는 웹 사이트의 루트 디렉토리에서 apple-touch-icon 또는 apple-touch-icon-precomposed 접두사가있는 아이콘을 검색합니다. 예를 들어, 장치의 적절한 아이콘 크기가 57 × 57 픽셀이면 iOS는 다음 순서로 파일 이름을 검색합니다.
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-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
- apple-touch-icon.png
(57px*57px) - favicon.ico
HiDPI (32x32px)
html5boilerplate.com 에서 템플릿을 다운로드 할 때이 모든 것이 포함되어 있으므로 자신의 아이콘으로 바꾸면 됩니다.
IE6는 PNG를 올바르게 처리 할 수 없습니다.
Favicon은 모든 브라우저에서 제대로 작동하려면 .ico 파일 이어야 합니다.
최신 브라우저는 PNG 및 GIF 이미지도 지원합니다.
일반적으로 가장 쉬운 방법은 favicon.cc 와 같은 무료 웹 서비스를 사용하는 것 입니다.
페이지의 파비콘이 어떻게 만들어 졌는지 확인할 수있는 사이트도 있습니다.
파비콘, 이미지 유형 및 해상도 제작에 대한 튜토리얼을 볼 수 있습니다.
를 갖는 favicon.*루트 디렉토리에 자동으로 대부분의 브라우저에서 감지된다. 다음을 사용하여 감지되었는지 확인할 수 있습니다.
<link rel="icon" type="image/png" href="/path/image.png" />
개인적으로 .png 이미지를 사용하지만 대부분의 형식이 작동합니다.
'development' 카테고리의 다른 글
| Spock 테스트 프레임 워크에서 Mock / Stub / Spy의 차이점 (0) | 2020.10.05 |
|---|---|
| Django-외래 키 속성 필터링 (0) | 2020.10.05 |
| SqlBulkCopy에 권장되는 배치 크기는 얼마입니까? (0) | 2020.10.05 |
| Python으로 SSL 인증서 유효성 검사 (0) | 2020.10.05 |
| Android에서 TouchDelegate를 사용하여보기의 클릭 대상 크기를 늘리는 방법에 대한 예가 있습니까? (0) | 2020.10.05 |