[HTML] WEB title에 icon 적용하는 방법

𝙿𝚛𝚘𝚐𝚛𝚊𝚖𝚖𝚒𝚗𝚐 𝙻𝚊𝚗𝚐𝚞𝚊𝚐𝚎/𝙷𝚃𝙼𝙻

[HTML] WEB title에 icon 적용하는 방법

해버니 2023. 7. 20. 11:32

먼저 적용 전후를 보자

확실히 아이콘이 들어가져있는데 깔끔하고 페이지의 특색을 살릴 수 있다.

1. 본인의 ico 파일을 준비한다.

사이즈가 작기 때문에 ico 파일로 변환해주면 좋다.

일반적으로 이미지 파일의 크기보다 ico 파일의 크기가 작기 때문이다.

(어차피 크게 보지 않으니)

2. 준비한 ico파일을 프로젝트 폴더에 넣어준다.

전체적인 코드 구조

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Your Awesome Website</title>
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/me/me11.ico">
  </head>
  
  <body>
  </body>
</html>

3. <head></head>사이에 코드를 적어주면 된다.

<link rel="shortcut icon" type="image/x-icon" href="assets/img/me/me11.ico">

rel="shortcut icon" : 파비콘을 나타내는 속성. 웹 브라우저에서 웹 사이트 탭이나 북마크에 표시되는 작은 아이콘을 지정하는 것이다.

type="image/x-icon" : 연결된 파일의 타입을 명시한다. 필자는 ico 파일 타입을 이용하고 있다.

href="파일경로" : 파비콘 파일의 경로를 지정한다.