■ 요약
▶ <link> 요소를 사용하여 favicon을 삽입한다.
▶ favicon은 Browser 탭에 페이지 제목 옆에 표시되는 작은 이미지이다.
■ 어떻게 HTML 에 Favicon을 추가할 수 있을까?
▶ 원하는 이미지를 Favicon 으로 사용할 수 있다.
▶ https://www.favicon.cc 와 같은 홈페이지에서 나만의 Favicon을 만들 수도 있다.
※ Favicon은 작은 이미지이므로, 대비가 높은 단순한 이미지여야 한다.
▶ 웹 사이트에 Favicon을 추가하려면 Favicon 이미지를 루트 디렉터리에 저장하거나 "images" 라는 루트 디렉터리에 폴더를 만들고 해당 폴더에 Favicon 이미지를 저장한다.
▶ Favicon 이미지의 일반적인 이름은 "favicon.icon" 이다.
▶ 그 다음 "iindex.html" 파일 내용 중 <title> 요소에 후에 <link> 요소를 추가한다.
<!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를 새로고침 해본다.
▶ Browser 탭에 페이지 제목 옆에 favicon 이미지가 표시된다.
■ Favicon 파일 형식 지원
'HTML' 카테고리의 다른 글
| HTML / (22) 표 테두리 (0) | 2023.02.20 |
|---|---|
| HTML / (21) 표 (0) | 2023.02.20 |
| HTML / (19) <picture> 요소 (0) | 2023.02.20 |
| HTML / (18) 배경 이미지 (0) | 2023.02.20 |
| HTML / (17) 이미지 맵 (0) | 2023.02.19 |