브라우저 탭에 작게 뜨는 아이콘이 파비콘(favicon)이다. 웹사이트의 얼굴과도 같은 존재다. 16x16 픽셀의 작은 이미지부터 모바일 홈화면용 큰 이미지까지 여러 사이즈가 필요하다. 파비콘 생성기에 이미지를 올리면 필요한 모든 사이즈가 한 번에 만들어진다.
파비콘이란
파비콘은 Favorite Icon의 줄임말이다. 브라우저 주소창 옆, 탭, 북마크에 표시되는 작은 아이콘이다. 웹사이트를 대표하는 심벌로 브랜드 인지도를 높이는 역할을 한다. 파비콘이 없으면 기본 지구본 아이콘이 뜨는데 전문성이 떨어져 보인다.
필요한 사이즈
다양한 기기와 브라우저에서 파비콘이 제대로 표시되려면 여러 사이즈가 필요하다.
- 16x16: 브라우저 탭, 주소창
- 32x32: 작업표시줄, 고해상도 탭
- 48x48: Windows 사이트 아이콘
- 180x180: iOS Safari 홈화면에 추가할 때
- 192x192: Android Chrome 홈화면에 추가할 때
- 512x512: PWA 스플래시 스크린
생성 방법
선착순.kr/favicon-generator에 원본 이미지를 업로드한다. 512x512 이상의 고해상도 정사각형 이미지를 권장한다. 정사각형이 아니면 자동으로 중앙 기준 크롭된다. 버튼을 누르면 모든 사이즈가 생성되어 ZIP 파일로 다운로드된다.
적용 방법
생성된 파일들을 웹사이트 루트 디렉토리에 업로드한다. 함께 제공되는 HTML 코드를 head 태그 안에 붙여넣는다. 이 코드에는 각 사이즈별 link 태그가 포함되어 있어서 모든 기기에서 적절한 아이콘이 표시된다.
ICO 파일 형식
전통적인 파비콘 형식은 .ico다. 하나의 파일에 여러 사이즈의 이미지를 담을 수 있는 특수한 형식이다. 오래된 브라우저 호환을 위해 favicon.ico 파일도 함께 생성된다. 루트 디렉토리에 넣어두면 별도 지정 없이도 브라우저가 자동으로 찾는다.
디자인 팁
파비콘은 매우 작게 표시되므로 단순한 디자인이 좋다. 회사 로고 전체를 넣으면 알아보기 어렵다. 로고의 심벌 부분만 쓰거나 이니셜로 만드는 것이 효과적이다. 배경색과 대비되는 색상을 사용해야 눈에 띈다.
투명 배경
PNG 형식으로 만들면 투명 배경이 가능하다. 다크 모드에서도 자연스럽게 보이려면 투명 배경이 유리하다. 단, 아이콘 자체 색상과 브라우저 배경이 비슷하면 안 보일 수 있으니 테스트가 필요하다.
PWA 매니페스트
Progressive Web App을 만든다면 manifest.json 파일에 아이콘 정보를 넣어야 한다. 생성기에서 이 파일도 함께 제공하므로 그대로 사용하면 된다.