HTML 파비콘
파비콘은 브라우저 탭의 페이지 제목 옆에 표시되는 작은 이미지입니다.
HTML에 파비콘을 추가하는 방법
좋아하는 이미지를 파비콘으로 사용할 수 있습니다. https://favicon.cc 와 같은 사이트에서 자신만의 파비콘을 만들 수도 있습니다 .
팁: 파비콘은 작은 이미지이므로 고대비의 단순한 이미지여야 합니다.
파비콘 이미지는 다음과 같이 브라우저 탭의 페이지 제목 왼쪽에 표시됩니다.
웹사이트에 파비콘을 추가하려면 파비콘 이미지를 웹서버의 루트 디렉토리에 저장하거나 루트 디렉토리에 images라는 폴더를 만들고 이 폴더에 파비콘 이미지를 저장합니다. 파비콘 이미지의 일반적인 이름은 "favicon.ico"입니다.
다음과 <link>같이 "index.html" 파일에서 요소 뒤에 요소를 추가합니다 <title>.
예시
<!DOCTYPE html>
<html>
<head>
<title>My Page
Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
이제 "index.html" 파일을 저장하고 브라우저에서 다시 로드하십시오. 이제 브라우저 탭에서 페이지 제목 왼쪽에 파비콘 이미지가 표시됩니다.
파비콘 파일 형식 지원
다음 표는 파비콘 이미지에 대한 파일 형식 지원을 보여줍니다.
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
단원 요약
- HTML
<link>요소를 사용하여 파비콘 삽입
HTML 링크 태그
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
사용 가능한 모든 HTML 태그의 전체 목록을 보려면 HTML 태그 참조 를 방문하십시오 .