파비콘(Favicon)이란?
파비콘(Favicon) = Favorite Icon
웹 사이트나 웹 페이지를 대표하는 작은 아이콘
파비콘 제작과 적용 방법
-
간단한 favicon을 만들고 싶은 경우
favicon generator를 검색하면 여러 사이트가 뜬다
아무 사이트나 들어가서 원하는 모양의 파비콘을 만들어준다.
(파일 형식은 보통 .png나 .ico이다.) -
생성한 파일을 Spring Boot 프로젝트의 정적 리소스 폴더로 이동시킨다.
src/main/resources/static/
src
└── main
└── resources
└── static <-- 이 폴더 안에
└── favicon.png <-- 아이콘 파일 저장- html파일 head 태그 안에 코드 추가
<link rel="icon" type="image/png" th:href="@{/favicon.png}">
실제 적용 과정
파비콘을 생성하니 이런 식으로 해상도가 다 다른 아이콘 여러개가 생성되었다.
실제로 기기별로 해상도가 다르니 각각 다른 파비콘을 준비하는 것이 맞다.
(강의의 SVG 내용 참고 : https://velog.io/@tk7580/44%EA%B0%9548%EA%B0%95-037%EC%9D%BC%EC%B0%A8-2504222)
참고로 이렇게 실제 파일 경로와 인텔리제이를 띄워놓고
파일을 인텔리제이 내로 드래그해서도 옮길 수 있다.
그리고 이런 식으로 rel과 size를 표시해준 코드를 작성하면 된다.
<link rel="apple-touch-icon" sizes="180x180" th:href="@{/apple-touch-icon.png}">
<link rel="icon" type="image/png" sizes="32x32" th:href="@{/favicon-32x32.png}">
<link rel="icon" type="image/png" sizes="16x16" th:href="@{/favicon-16x16.png}">그리고 뭘 할 때마다 종종 안 되는 경우가 있다.
SecurityConfig를 미리 만들어놓은 상태로 진행중인데
얘를 찍으면 대부분 맞다.
SecurityConfig.java 파일에 파비콘 파일들의 경로를 permitAll() 목록에 추가했다.
파비콘 접근이 막혀있는 것이다.
성공!
