여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. How to - HTML에 파비콘 추가
How to – HTML에 파비콘 추가
1주전 작성
3주전 수정

w3.css

HTML에 파비콘 추가

HTML에 파비콘을 추가하는 방법을 알아보자.

HTML에 파비콘을 추가하는 방법

파비콘은 브라우저 탭의 페이지 제목 옆에 표시되는 작은 이미지다.

원하는 이미지를 파비콘으로 사용할 수 있다. https://favicon.cc 와 같은 사이트에서 자신만의 파비콘을 만들 수도 있다.

⭐ 파비콘은 작은 이미지이므로 대비가 높은 단순한 이미지여야 한다.

웹사이트에 파비콘을 추가하려면 파비콘 이미지를 웹서버의 루트 디렉터리에 저장하거나, 루트 디렉터리에 이미지라는 폴더를 만들고 이 폴더에 파비콘 이미지를 저장하자. 파비콘 이미지의 일반적인 이름은 “favicon.ico”다.

1단계) HTML 추가
<!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” 파일을 저장하고 브라우저에서 다시 로드하자. 이제 브라우저 탭의 페이지 제목 왼쪽에 파비콘 이미지가 표시된다.

참고
Mingg`s Diary
밍구
공부 목적 블로그