파비콘 만들고 사이트에 적용하는 법
핵심 요약
- favicon.ico 하나만 있어도 충분해요
- 루트 폴더에 올리고 <head>에 한 줄 추가
- 작은 크기에서는 단순한 모양이 좋아요
파비콘(favicon)은 브라우저 탭, 즐겨찾기, 검색 결과 옆에 보이는 작은 사이트 아이콘이에요. 크기는 작지만 사이트를 한눈에 알아보게 해 주고, 없으면 기본 아이콘이 떠서 덜 정돈된 인상을 줘요.
필요한 파일
가장 기본은 favicon.ico 하나예요. ICO 파일은 여러 크기의 이미지를 한 파일에 담을 수 있어서, 탭에는 16px, 바탕화면 바로가기에는 더 큰 크기처럼 상황에 맞는 크기를 골라 쓰게 할 수 있어요. 여기에 더해 다음 파일을 함께 두는 경우가 많아요.
| 파일 | 용도 |
|---|---|
| favicon.ico | 모든 브라우저의 기본 아이콘 |
| favicon.svg | 최신 브라우저용, 어떤 크기에서도 선명 |
| apple-touch-icon.png | 아이폰·아이패드 홈 화면 추가용 (180×180) |
만들기
- 정사각형이고 256px 이상인 로고 이미지를 준비해요. SVG가 있다면 가장 좋아요.
- 파비콘 ICO 만들기에 넣으면 16·32·48·256px이 담긴 favicon.ico가 만들어져요.
- 아이폰용 아이콘이 필요하면 같은 원본을 이미지 크기 줄이기에서 형식 PNG, 최대 가로 180으로 만들어요. 이 아이콘은 배경이 투명하지 않은 편이 보기 좋아요.
사이트에 연결하기
파일을 사이트의 루트 폴더에 올리고, 모든 페이지의 <head> 안에 아래 줄을 넣어요.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">워드프레스나 블로그 서비스를 쓴다면 설정 메뉴에 "사이트 아이콘" 항목이 따로 있는 경우가 많아요. 그곳에 이미지를 올리면 이런 코드를 자동으로 넣어 줘요.
작은 크기에서 잘 보이게 하기
16px은 생각보다 아주 작아요. 긴 로고나 글자는 거의 보이지 않으니, 첫 글자나 상징 하나만 남긴 단순한 버전을 따로 만드는 걸 추천해요. 배경색이 있는 사각형이나 원 위에 굵은 모양을 올리면 밝은 탭과 어두운 탭 모두에서 잘 보여요.
바꿨는데 예전 아이콘이 보일 때
브라우저는 파비콘을 오래 저장해 둬요. 새로고침을 강하게 하거나(Ctrl + F5, 맥은 Cmd + Shift + R), 주소에 ?v=2를 붙여 파일 이름이 바뀐 것처럼 만들면 새 아이콘을 불러와요. 검색 결과의 아이콘은 검색 엔진이 다시 수집할 때까지 시간이 걸려요.