파비콘 생성기로 서비스 런칭 전 아이콘 세트 챙기기

개발

서비스 런칭 직전에는 큰 기능만 보느라 파비콘을 놓치기 쉽습니다. 하지만 브라우저 탭의 기본 아이콘은 제품 완성도를 바로 떨어뜨려 보입니다.

이럴 때는 브라우저에서 바로 쓸 수 있는 Dante Tools를 열어 먼저 손으로 검증해보는 것이 좋습니다. 작은 확인 과정을 거치면 배포 후 되돌리는 시간을 줄일 수 있습니다.

파비콘 생성기 사용 화면
파비콘 생성기 사용 화면

언제 쓰면 좋은가

웹사이트 런칭 전에 브라우저 탭, 홈 화면, 북마크에 쓰일 파비콘 크기를 빠르게 준비하는 체크리스트입니다.

런칭 전 확인할 아이콘

favicon.ico
apple-touch-icon.png
32x32 png
192x192 png

실무 루틴

  1. 정사각형 원본 로고 이미지를 준비합니다.
  2. 권장 크기를 선택해 파비콘 세트를 생성합니다.
  3. 다운로드한 파일을 프로젝트 public 경로에 넣습니다.
  4. 배포 후 브라우저 탭, 모바일 홈 화면 추가, 검색 결과 미리보기를 확인합니다.

배포 전 체크

  • 작은 크기에서도 로고가 알아볼 수 있는가
  • 투명 배경과 다크 브라우저 탭에서 모두 보이는가
  • 기존 캐시 때문에 예전 파비콘이 보이는지 확인했는가

파비콘은 작은 에셋이지만 첫인상에 영향을 줍니다. 런칭 체크리스트에 넣어두면 마지막에 허둥대지 않습니다.

다른 글