내 사이트를 열면 브라우저 탭에 지구본 아이콘만 달랑 뜬다. 다른 사이트는 로고나 글자가 표시되는데, 그게 파비콘(favicon)이다. 없어도 사이트가 작동하는 데 문제는 없지만, 즐겨찾기에 추가했을 때 식별이 안 되고 구글 검색결과에서도 빈칸으로 보인다.
파비콘에 필요한 사이즈
브라우저마다, 기기마다 사용하는 파비콘 크기가 다르다. 하나만 만들면 어딘가에서 흐릿하게 보일 수 있다.
- 16x16 — 브라우저 탭에 표시되는 기본 크기
- 32x32 — 즐겨찾기, 바로가기에 사용
- 180x180 — iOS Safari에서 홈 화면에 추가할 때(apple-touch-icon)
- 192x192 — Android Chrome에서 홈 화면에 추가할 때
파비콘 만드는 3단계
- 아이콘 설정 — 파비콘 생성기에 접속해서 텍스트(1~2글자) 또는 이모지를 선택한다. 사이트 이름의 첫 글자를 넣는 게 일반적이다.
- 디자인 조정 — 배경색, 글자색을 지정하고, 모양을 정사각형, 둥근 모서리, 원형 중에서 고른다. 미리보기에서 실제 브라우저 탭에 어떻게 보이는지 확인할 수 있다.
- 다운로드 및 적용 — 16x16, 32x32, 192x192 등 크기별 PNG 파일을 받고, 제공되는 HTML 코드를 head 태그 안에 붙여넣는다.
HTML에 파비콘 적용하기
다운로드한 파일을 사이트 루트에 올린 뒤, HTML의 <head> 안에 다음과 같이 넣으면 된다.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">TIP 파비콘은 브라우저 캐시가 강하게 걸려서, 교체한 뒤에도 이전 아이콘이 계속 보일 수 있다. 파일명에 버전 번호를 붙이거나(favicon-v2.png) 강력 새로고침(Ctrl+Shift+R)으로 캐시를 지워야 바뀐 아이콘이 반영된다.
파비콘 하나로 사이트의 인상이 달라진다. 디자인 도구 없이 글자 하나만으로도 만들 수 있으니 아직 없다면 지금 넣는 게 낫다.