파비콘은 16*16 픽셀이 기본 규격이며, ico라는 형식을 가지고 있다. 때문에 png파일을 ico파일로 변환해서 사용하여야 한다.
<head>
<link rel="icon" href="파일경로">
</head>
위와 같이 헤드안에 link~ 구문을 넣으면 파비콘을 적용시킬수 있다.
다만, 웹 코드를 작성하는 중에는 정상적으로 파비콘 갱신이 안되는 경우가 있을수 있다. 캐시 메모리를 사용하기 때문이라고 하는데, 웹 브라우저의 캐시를 초기화 하고 다시 켜보는 식으로 갱신을 해야할 수 있다.
☆ Code
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>OurNotion - <span layout:fragment="pageTitle"></span></title>
<!-- 정적 리소스는 context-relative 경로를 사용 (static 폴더 내부) -->
<link rel="icon" th:href="@{/img/favicon.ico}">
<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
<link rel="stylesheet" th:href="@{/css/sidebar.css}">
<link rel="stylesheet" th:href="@{/css/board.css}">
</head>
<body>
<!-- 사이드바 프래그먼트 삽입 (권장 문법: ~{...}) -->
<div th:replace="~{sidebar :: sidebarFragment}"></div>
<!-- 메인 콘텐츠 영역: 개별 페이지의 내용이 이 영역에 채워짐 -->
<div class="mainContents" layout:fragment="mainContent">
<!-- 개별 페이지 내용 -->
</div>
<script th:src="@{/js/sidebar.js}"></script>
</body>
</html>'HTML' 카테고리의 다른 글
| HTML blockquote (0) | 2025.01.08 |
|---|---|
| HTML a 태그 (1) | 2024.11.24 |
| HTML 테이블 (0) | 2024.11.24 |
| HTML 인풋 태그 (2) | 2024.11.24 |
| HTML 링크, 이미지, 리스트 태그 (0) | 2024.11.24 |