내 웹 사이트의 로고를 브라우저 탭의 아이콘 이미지로 설정해야 할 필요가 있습니까?
브라우저 탭에서 페이지 제목 옆에있는 이미지-여기에 이미지를 어떤 있습니까?
이 이미지는 ' 파비콘 ' 이라고 불리며 파비콘.ico 의 표준 파일 유형 인 작은 정사각형 모양의 파일입니다. .png또는 .gif너무 사용할 수 있지만 더 나은 호환성을 위해 표준을 따라야합니다.
웹 사이트에 하나를 설정 한 다음 수행해야합니다.
(최대 크기 32x32 또는 16x16 픽셀 권장)
.ico파일 로 변환 합니다. Gimp, Photoshop ( 같은 사용 ) 또는 Favicon.cc 또는 RealFaviconGenerator 와 같은 웹 사이트 에서 작업을 수행 할 수 있습니다 .그런 다음 두 가지 설정 방법이 있습니다.
A) 웹 사이트 의 루트 폴더 / 디렉토리 (옆
index.html)에favicon.ico.또는
B) 다음과 같이 사이트에
<head></head>있는 모든.html파일 의 태그 사이 에 링크합니다 .<head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> </head>
favicon어떤 웹 사이트에서든 보고 글을 쓰면 www.url.com/favicon.ico(아마도) 볼 수있을 것입니다. Stackoverflow의 favicon은 16x16 픽셀이고 Wikipedia 는 32x32입니다.
* : 파일 크기 제한이없는 브라우저 문제도 있습니다. 매우 큰 파비콘으로 브라우저를 쉽게 충돌 할 수 있습니다. 자세한 정보는 여기에 있습니다.
' 파비콘 ' 이라고 하며 웹 사이트 의 헤더 섹션에 아래 코드를 추가해야합니다 .
이것을 <head>섹션에 추가하기 만하면 됩니다.
<link rel="icon" href="/your_path_to_image/favicon.jpg">
이것은 파비콘 이며 링크에 설명되어 있습니다.
예 : W3C에서
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
또한 위치에 있습니다.
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">
또는 사용할 수 있습니다.
<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
웹 사이트의 루트에 "favicon.ico"라는 아이콘 파일을 추가합니다.
'IT' 카테고리의 다른 글
| 내 탐색 모음에서 목록 항목의 전체 영역을 링크로 클릭 할 수 있습니까? (0) | 2020.09.09 |
|---|---|
| 지도에 삽입하는 데 선호되는 / 관용적 인 방법은 무엇입니까? (0) | 2020.09.09 |
| JavaScript의 상속 유형 상속의 좋은 예 (0) | 2020.09.09 |
| 자바 펼치기 : 그것도 비어 있는지 확인하는 방법? (0) | 2020.09.09 |
| node.js와 meteor.js의 차이점은 무엇입니까? (0) | 2020.09.09 |