워드프레스로 사이트를 만들었는데 브라우저 탭을 보니 기본 아이콘이 그대로다. 탭이 여러 개 열려 있으면 어느 게 내 사이트인지 구분도 안 된다. 파비콘 하나만 설정하면 해결되는 문제인데, 디자인 파일을 어떻게 만들어야 하는지가 막힌다.
파비콘이 필요한 이유
- 탭 구분: 브라우저에 탭이 10개 이상 열려 있으면 제목이 잘려서 아이콘만 보인다
- 즐겨찾기 표시: 북마크에 저장될 때 아이콘이 함께 표시된다
- 신뢰도: 기본 아이콘 그대로인 사이트는 미완성처럼 보인다
- 홈 화면 아이콘: 모바일에서 홈 화면에 추가하면 파비콘이 앱 아이콘처럼 쓰인다
파비콘 사이즈 규격
| 사이즈 | 용도 | 필수 여부 |
|---|---|---|
| 16×16px | 브라우저 탭 | 필수 |
| 32×32px | 브라우저 탭 (고해상도) | 권장 |
| 64×64px | 윈도우 사이트 바로가기 | 선택 |
| 180×180px | iOS 홈 화면(apple-touch-icon) | 권장 |
| 192×192px | 안드로이드 홈 화면 | 권장 |
최소한 16px과 32px 두 가지는 반드시 있어야 한다. 모바일 대응까지 하려면 180px 이상도 준비하는 게 좋다.
텍스트/이모지로 파비콘 만들기
로고 파일이 없어도 파비콘은 만들 수 있다. 파비콘 생성기에서 사이트 이름의 첫 글자나 이모지를 입력하고, 배경색과 글자색, 모양(정사각형, 둥근 모서리, 원형)을 설정하면 16px부터 192px까지 네 가지 사이즈가 한 번에 생성된다. 미리보기로 탭에서 어떻게 보이는지 확인할 수 있다.
HTML에 파비콘 적용하기
다운로드한 PNG 파일을 사이트 루트 디렉토리에 넣고, <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">주의 파비콘을 교체한 뒤에도 이전 아이콘이 계속 보인다면 브라우저 캐시 문제다.Ctrl + Shift + R(강력 새로고침)을 하거나 파일명에 버전 번호를 붙이면(favicon-v2.png) 캐시를 우회할 수 있다.
워드프레스에서 설정하는 법
워드프레스는 코드를 직접 수정할 필요 없다. 관리자 화면에서 외모 → 사이트 아이덴티티 → 사이트 아이콘에 512×512px 이상의 이미지를 업로드하면 자동으로 여러 사이즈가 생성된다.
파비콘 하나 설정하는 데 걸리는 시간은 5분도 안 된다. 사이트의 첫인상이 달라지니까, 아직 기본 아이콘이라면 지금 바꾸는 게 낫다.