파비콘 (favicon)
favorite icon의 줄임말이라고 하네요.
저도 검색해보고 처음 알았습니다.
이제는 고인이 되어버린, 인터넷 익스플로러....
IE 5 시절에 즐겨찾기를 하면 옆에 따라붙는 아이콘이라서 파비콘이라고 하네요.
요즘은 없으면 허전한거 같아요.
여러개의 탭을 열어놨을 때도 구분이 쉽고,
사이트의 정체성을 나타내기도 하고요.
특히, 구글 크롬에서는 브라우저의 홈 화면에서 뜨기도 해서
은근히 신경이 쓰이는 부분입니다.
파비콘의 규격 (확장자, 권장 사이즈)
전통적으로 기본 확장자는 .ico
요즘은 png, svg도 지원한다고 합니다.
파비콘의 기본 사이즈는 16x16 pixel 인데,
앞에서 살펴본 것처럼 사이트의 정체성을 대표하는 성격이 점점 강해져서
한번 만들 때, 동일한 이미지로
다양한 사이즈를 만들어 놓고 사용하는 경우가 많은 것 같습니다.
16x16px : 기본 파비콘 사이즈
32x32px : 고해상도 디스플레이 대비
48x48px : 북마크
180x180px : iOS 홈화면(웹페이지를 홈화면에 추가할 때(Add to home screen))
파비콘 만드는 법
16~64 px 의 정사각형 사이즈로!
Figma, Photoshop, Illustrator 같은 이미지 제작툴에서 만들고,
ico, png, svg로 내보내기를 하면 됩니다.
아니면, AI 시대 답게,
다양한 AI 도구들한테 '딸깍' 시전해봅시다.
favicon.io 같은 favicon generator를 사용하기도.
파비콘 적용하기
이 파일을 웹 루트 디렉토리에 favicon.ico 로 올리고,
html <head> 안에 link 태그를 추가해주면 끝.
* 아래는 예시
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
'WEB DEV' 카테고리의 다른 글
| [TMDB] The Movie Database API Key 발급받는 법(무료, 개발용) (0) | 2025.10.04 |
|---|---|
| [tree] 프로젝트 구조를 트리로 보여주고, txt 파일로 저장하기(커맨드 라인 툴) (0) | 2025.10.02 |
| [.env] dotenv 파일 내에서 주석 처리하는 법과 주의사항 (0) | 2025.09.29 |
| 마크다운 에디터에서 문단 구분선 입력하는 법(GitHub에서 readme 파일 편집) (0) | 2025.09.28 |