FE/HTML

[HTML] 파비콘(Favicon) 생성 및 적용 방법

ㅈㅣ니 2023. 4. 17.

파비콘이란?

이렇게 사이트의 상단에 아이콘 그림이 있는 걸 파비콘이라고 한다.

적용방식은 다음과 같다.

<!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>

이렇게 html 코드가 있으면

 <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

이렇게 파비콘을 설정해준다.

 

이렇게 설정한 파비콘을 html 파일을 생성할 때마다 적용되게 해주는 것을 이클립스에서 해보려고 한다.

새로운 HTML 파일을 생성하러 들어간다.

Templates에서 html5를 선택하고 밑에 [ HTML Templates ] 를 클릭한다.

 

 html5 선택 후 Edit 클릭

위와 같이 Pattern에 작성을 해주고 적용해주면 

html 파일을 생성할 때 마다 자동으로 <link>태그가 작성되어서 나온다.!

 

 

참고 사이트

www.w3schools.com

 

반응형