[HTML&CSS] Favicon

2020. 12. 24. 19:04HTML&CSS&JavaScript

# 개념

- 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 작은 아이콘을 말함

- 로고의 개념과 비슷

- 확장자명은 .ico

- 전통적으로 favicon.ico 파일은 16컬러 24비트 알파 투명도(alpha transparency) 포맷의 16x16 아이콘(ICO) 파일

- 최근의 파비콘은 32x32를 지원하는데, 모든 주요 인기 있는 브라우저들에서 적절하게 축소되어 이를 표현해줌처: https://webdir.tistory.com/337 [WEBDIR]

 

# 적용

1. 원하는 이미지를 favicon generator와 같은 사이트에서 .ico파일로 변환시킨다.

2. 변환한 파일을 html이 있는 폴더에 같이 저장한다.

3. head.html에 다음과 같이 경로를 지정하고 저장한다.

<!-- 파비콘 -->
<link rel="shortcut icon" href="(예시)images/favicon/favicon.ico" type="image/x-icon">
<link rel="icon" href="(예시)images/favicon/favicon.ico" type="image/x-icon">