SVG 파비콘도 만들 수 있나요?

현재는 PNG와 ICO만 생성합니다. SVG 파비콘을 쓰려면 원본 SVG를 그대로 두고 rel="icon" type="image/svg+xml"로 연결하는 편이 좋습니다.

favicon.ico 하나만 있으면 안 되나요?

구형 브라우저 호환에는 ICO가 필요하지만, 고해상도 화면과 모바일 홈 화면에는 PNG가 더 선명합니다. 함께 쓰는 것을 권합니다.

교체했는데 예전 아이콘이 계속 보여요.

브라우저가 파비콘을 길게 캐시하기 때문입니다. 강력 새로고침(Ctrl+Shift+R)이나 사이트 데이터 삭제 후 다시 방문하면 갱신됩니다.

파비콘 생성기

파비콘이란

파비콘(favicon)은 브라우저 탭, 즐겨찾기 목록, 방문 기록, 스마트폰 홈 화면에 추가했을 때 표시되는 작은 사이트 아이콘입니다. 한 장이면 될 것 같지만 실제로는 여러 크기가 필요합니다. 데스크톱 탭에는 16·32px, 고해상도(레티나) 화면에는 그보다 큰 크기, 아이폰 홈 화면 아이콘에는 180px, 안드로이드 크롬과 PWA에는 192·512px가 쓰입니다. 크기별로 따로 만들어 두면 어느 환경에서도 뭉개지지 않고 선명하게 보입니다.

무엇이 만들어지나

올린 이미지를 정사각형으로 중앙 크롭한 뒤 16·32·48·64·96·128·180·192·256·512px PNG 10종을 만들고, 16·32·48px 세 크기를 담은 favicon.ico 파일을 생성합니다. ICO는 구형 브라우저 호환을 위해 여전히 필요합니다. 함께 제공되는 HTML 링크 조각을 페이지 <head>에 붙이면 브라우저가 상황에 맞는 크기를 알아서 골라 씁니다. 모두 ZIP 한 파일로 받습니다.

좋은 원본 이미지 고르기

파비콘은 16px처럼 아주 작게도 표시되므로 단순할수록 좋습니다. 글자가 여러 개 들어갔거나 가는 선이 많거나 디테일이 복잡한 로고는 작은 크기에서 알아볼 수 없게 뭉개집니다. 가로세로 비율이 1:1에 가깝고, 가장자리에 적당한 여백이 있으며, 색 대비가 뚜렷한 심볼형 이미지가 가장 잘 나옵니다. 투명 배경 PNG를 올리고 “배경 채우기”를 끄면 투명 파비콘이 되고, 켜면 지정한 색으로 배경이 채워집니다.

설치 방법

ZIP을 풀어 favicon.ico와 PNG 파일들을 사이트 루트(예: /)나 정적 파일 폴더에 올립니다. 제공된 링크 태그를 페이지 <head> 안에 붙여 넣고, href 경로가 실제 업로드 위치와 일치하는지 확인하세요. 프레임워크를 쓴다면 public 폴더에 넣으면 됩니다. 브라우저는 파비콘을 오래 캐시하므로, 교체한 뒤에도 이전 아이콘이 보이면 강력 새로고침(Ctrl+Shift+R)이나 캐시 삭제가 필요할 수 있습니다.

manifest와 테마 색

HTML 조각에는 site.webmanifest 링크도 들어 있습니다. PWA(홈 화면 추가)를 지원하려면 이 파일에 앱 이름, 시작 URL, 192·512px 아이콘 경로, 배경색, 테마색을 적어 사이트 루트에 두세요. 테마색은 안드로이드 크롬에서 주소창 색으로도 쓰입니다. 이 도구는 아이콘 이미지만 만들고 manifest 내용 작성은 안내하지 않으므로, 생성된 PNG 경로를 참고해 직접 채우면 됩니다.

개인정보

올린 이미지와 생성된 모든 파일(PNG·ICO·HTML·manifest)은 브라우저 안에서만 만들어지며 서버로 업로드되지 않습니다. 아직 공개하지 않은 로고 원본을 외부에 노출하지 않고 파비콘 세트를 준비할 수 있습니다.