HTML

HTML / (20) Favicon

Mr.sheep 2023. 2. 20. 13:14

■ 요약

▶ <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 파일 형식 지원