파비콘 생성기 사용법: favicon, Apple touch icon, PWA 아이콘 세트 만들기
웹사이트 아이콘은 작은 요소처럼 보이지만 생각보다 여러 곳에 나타난다. 브라우저 탭, 북마크, 모바일 홈 화면, 검색 결과, PWA 설치 화면, 공유 미리보기 주변에서 사이트를 식별한다. 로고 이미지를 하나만 올려두면 충분할 것 같지만, 실제로는 크기와 용도별 파일이 필요하다.
웹사이트 아이콘은 작은 요소처럼 보이지만 생각보다 여러 곳에 나타난다. 브라우저 탭, 북마크, 모바일 홈 화면, 검색 결과, PWA 설치 화면, 공유 미리보기 주변에서 사이트를 식별한다. 로고 이미지를 하나만 올려두면 충분할 것 같지만, 실제로는 크기와 용도별 파일이 필요하다.
Icon Converter & Favicon Generator는 원본 이미지를 favicon, Apple touch icon, PWA 아이콘 크기로 변환하고, 필요한 HTML link 태그와 manifest 예시를 준비하는 도구다. 목적은 예쁜 로고를 새로 디자인하는 것이 아니라, 이미 있는 브랜드 이미지를 웹에서 쓰기 좋은 아이콘 세트로 정리하는 것이다.
좋은 원본 이미지부터 준비한다
아이콘 생성 결과는 원본 품질에 크게 좌우된다. 16×16 favicon은 매우 작기 때문에 복잡한 글자나 얇은 선은 거의 보이지 않는다. 큰 로고에서는 멋져 보이는 요소도 탭 아이콘에서는 흐릿한 얼룩처럼 보일 수 있다.
원본을 준비할 때는 다음 기준이 좋다.
- 512×512 이상의 정사각형 이미지
- 배경이 투명하거나 단색인 PNG 또는 SVG
- 작은 크기에서도 알아볼 수 있는 단순한 심볼
- 너무 얇은 텍스트나 복잡한 장식이 적은 형태
- 가장자리 여백이 충분한 구성
브랜드명이 긴 로고라면 전체 글자를 넣기보다 심볼이나 이니셜을 쓰는 편이 낫다. favicon은 명함이 아니라 작은 식별자에 가깝다.
어떤 크기가 필요한가
웹사이트 아이콘은 하나의 크기로 끝나지 않는다. 브라우저와 기기가 상황에 맞는 파일을 선택하기 때문이다. 기본적으로는 작은 favicon 크기와 모바일/PWA용 큰 아이콘을 함께 준비한다.
자주 쓰는 구성을 말로 정리하면 이렇다.
- 16×16: 브라우저 탭과 오래된 favicon 용도
- 32×32: 일반적인 브라우저 favicon
- 48×48: 일부 데스크톱/시스템 아이콘 용도
- 180×180: Apple touch icon
- 192×192: Android/PWA 기본 아이콘
- 512×512: PWA 고해상도 아이콘
모든 프로젝트가 이 크기를 전부 적극적으로 쓰는 것은 아니다. 하지만 한 번에 세트로 만들어두면 브라우저와 기기별 미리보기 품질을 안정적으로 맞출 수 있다.
PNG favicon과 ICO의 차이
예전에는 .ico 파일 하나를 favicon으로 쓰는 경우가 많았다. 지금은 PNG favicon도 널리 지원된다. PNG는 생성과 확인이 쉽고, 투명 배경과 선명한 렌더링을 다루기 좋다.
다만 오래된 브라우저나 특수한 환경까지 신경 써야 한다면 ICO가 필요할 수 있다. oh-my-zhs의 파비콘 생성기는 첫 흐름에서 PNG 아이콘 세트와 태그 생성을 우선한다. 레거시 호환이 중요한 프로젝트라면 이후 ICO 내보내기를 별도로 확인하는 것이 좋다.
실무에서는 다음처럼 생각하면 된다.
- 현대 웹사이트: PNG favicon 세트로 시작
- 오래된 사내 시스템 대응: ICO 필요 여부 확인
- PWA 설치 대응: 192×192, 512×512 manifest 아이콘 확인
- iOS 홈 화면 대응: 180×180 Apple touch icon 확인
배경, 패딩, 둥근 모서리
원본 로고를 그대로 줄이면 작은 크기에서 답답해 보일 수 있다. 그래서 배경색, 패딩, 둥근 모서리를 조정해 아이콘을 읽기 쉽게 만든다. 특히 투명 배경 로고는 어두운 브라우저 탭이나 밝은 홈 화면에서 대비가 달라질 수 있다.
패딩은 심볼이 가장자리에 붙지 않게 해준다. 너무 적으면 잘려 보이고, 너무 많으면 아이콘이 작아 보인다. 배경색은 브랜드 색을 쓰되, 작은 크기에서 심볼과 충분히 대비되어야 한다.
확인할 항목은 다음과 같다.
- 16×16에서도 심볼이 알아보이는가
- 밝은 배경과 어두운 배경 모두에서 보이는가
- 패딩 때문에 심볼이 너무 작아지지 않았는가
- 둥근 모서리가 브랜드 톤과 맞는가
- 원본의 중요한 부분이 잘리지 않았는가
필요하면 Color Contrast Checker로 배경과 심볼 색의 대비를 먼저 확인한다.
생성된 태그를 어디에 넣는가
아이콘 파일만 만들어서는 브라우저가 자동으로 모든 파일을 찾아주지 않는다. Next.js 같은 정적 사이트에서는 public 폴더에 파일을 두고, metadata나 layout에서 아이콘 경로를 연결해야 한다. 일반 HTML 사이트라면 <head> 안에 link 태그를 넣는다.
대표적인 연결 방식은 다음과 같다.
- favicon:
rel="icon"으로 작은 아이콘 경로 연결 - Apple touch icon:
rel="apple-touch-icon"으로 180×180 이미지 연결 - manifest: PWA용
manifest.json안에 192×192, 512×512 아이콘 지정 - theme color: 모바일 브라우저 UI 색상을 맞출 때 별도로 설정
도구가 생성한 HTML 태그와 manifest 예시는 출발점이다. 실제 프로젝트의 파일 경로, Next.js metadata 구조, 배포 환경에 맞게 경로를 확인해야 한다.
적용 후에는 실제 화면을 본다
아이콘은 소스 코드만 맞아도 제대로 보인다고 생각하기 쉽다. 하지만 브라우저 캐시가 강하게 남거나, 모바일 홈 화면이 이전 아이콘을 계속 보여주거나, manifest 경로가 틀릴 수 있다. 적용 후에는 실제 화면에서 확인해야 한다.
확인 순서는 다음과 같다.
- 브라우저 탭에서 favicon이 바뀌었는지 본다.
- 시크릿 창이나 다른 브라우저에서 캐시 영향을 줄여 확인한다.
- 모바일에서 홈 화면 추가 미리보기를 확인한다.
- PWA manifest를 사용하는 경우 개발자 도구에서 아이콘 경로를 본다.
- 배포 후 실제 도메인에서도 같은 경로가 열리는지 확인한다.
아이콘 파일은 작지만 캐시 때문에 변경 확인이 늦을 수 있다. 파일명을 바꾸거나 캐시를 비운 뒤 확인하는 것도 방법이다.
파비콘 작업 체크리스트
공개 전에 아래 항목을 확인한다.
- 원본 이미지가 충분히 크고 단순한가
- 16×16, 32×32, 180×180, 192×192, 512×512 크기를 준비했는가
- 투명 배경과 배경색 버전 중 사이트에 맞는 것을 골랐는가
- HTML link 태그 또는 Next.js metadata에 경로를 연결했는가
- manifest 아이콘 경로가 실제 파일과 맞는가
- 배포 도메인에서 아이콘 파일이 열리는가
- 브라우저 탭과 모바일 미리보기에서 식별 가능한가
파비콘 생성기는 사이트의 신뢰감을 극적으로 바꾸는 도구는 아니다. 하지만 작은 식별 요소를 정리해두면 브라우저와 모바일 환경에서 사이트가 덜 임시처럼 보인다. 콘텐츠와 도구를 쌓아가는 사이트일수록 이런 작은 기본값을 초기에 맞춰두는 편이 좋다.
Related tools
Related posts
Read →Related tools