안녕하세요 오늘은 파비콘을 적용해보겠습니다.
파비콘은 웹사이트에 접속했을 때 상단 탭에 보여지는 아이콘을 말합니다. 예를 들어 네이버의 파비콘은 다음과 같습니다.
파비콘을 적용하는 방법은 다음과 같습니다.
<head> 태그 안에 다음과 같은 코드를 입력합니다.
<link rel="icon" href="./favicon.ico" type="image/x-icon">
ico 는 아이콘 파일 확장자로, 파비콘으로 사용될 수 있는 파일 확장자는 크게 ico 와 png 가 있습니다.
예제에서는 png 파일을 사용했습니다.
사용한 파비콘 이미지 출처는 https://icons8.com/icon/9tZDJwDQAwJj/favorite 입니다.
예제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>favicon tutorial</title>
<link rel="icon" href="./icons8-favorite-32.png" type="image/x-icon">
</head>
<body>
<div>파비콘 튜토리얼</div>
</body>
</html>
파비콘이 적용된 모습은 다음과 같습니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] 간단한 그림판 만들어보기 (0) | 2022.09.25 |
|---|---|
| [HTML/CSS] 랜딩 페이지 만들어보기 (0) | 2022.09.25 |
| [HTML/CSS] 아날로그 시계 구현해보기 (0) | 2022.09.10 |
| [ HTML / CSS ] Tailwind CSS 사용해보기 (0) | 2022.09.05 |
| [HTML/CSS] 다이나믹한 리스트 만들어보기 (0) | 2022.08.26 |
