파비콘 만들기

파비콘(favicon)이란?

브라우저 탭이나 즐겨찾기에 표시되는 작은 사이트 아이콘입니다. 보통 favicon.ico 파일로 만들어 웹사이트에 넣습니다.

이 도구는 로고·이미지를 올리면 16·32·48·64px가 한 파일에 담긴 favicon.ico를 만들어 줍니다. 처리는 브라우저 안에서만 이뤄지며 서버로 전송되지 않습니다.

사용 방법

정사각형에 가까운 로고·이미지를 올리면 실제 표시 크기(16·32·64px) 미리보기가 나옵니다. 16px(탭 크기)에서도 알아볼 수 있는지 확인하세요.

"favicon.ico 다운로드"로 멀티사이즈 아이콘을 받고, 필요하면 32px PNG나 애플 터치 아이콘(180px)도 따로 받을 수 있습니다.

활용 팁

favicon.ico 파일을 웹사이트 최상위 폴더에 넣으면 대부분의 브라우저가 자동으로 인식합니다.

작은 크기에서는 디테일이 뭉개지므로, 글자가 많은 로고보다 단순한 심볼이 잘 보입니다.

투명 배경 PNG를 올리면 투명도가 유지된 아이콘이 만들어집니다.

필요한 크기와 파일

브라우저 탭용 favicon.ico(16×16, 32×32 포함), 아이폰 홈 화면용 apple-touch-icon.png(180×180), 안드로이드·PWA용 192×192와 512×512 PNG, 그리고 이들을 연결하는 manifest 파일이 기본 세트입니다.

이 도구는 정사각 이미지 하나에서 이 세트를 한 번에 만들어 ZIP으로 내려받게 해 줍니다. HTML head에 넣을 link 태그도 함께 제공됩니다.

원본 이미지 준비

512×512 이상의 정사각 PNG가 좋습니다. 16×16으로 줄여도 알아볼 수 있게 단순한 형태, 굵은 선, 높은 대비로 디자인하세요. 글자가 세 자 이상이거나 가는 선은 탭에서 뭉개집니다.

투명 배경은 탭에서는 자연스럽지만 iOS 홈 화면 아이콘은 투명을 검은색으로 채우므로 apple-touch-icon용은 배경색이 있는 편이 낫습니다.

HTML에 넣는 법

생성된 파일을 사이트 루트(/)에 올리고 head 안에 link rel="icon", link rel="apple-touch-icon", link rel="manifest" 태그를 넣습니다. 루트의 favicon.ico는 태그가 없어도 대부분의 브라우저가 자동으로 찾습니다.

Next.js·Nuxt 같은 프레임워크는 app 폴더에 icon.png, apple-icon.png를 두면 자동 연결됩니다. 워드프레스는 외모 → 사용자 정의 → 사이트 아이콘에서 512px PNG 하나만 올리면 됩니다.

바뀐 파비콘이 안 보일 때

브라우저가 이전 파비콘을 강하게 캐시합니다. 시크릿 창에서 열어 보거나, 파일명에 버전을 붙여(favicon.ico?v=2) 링크하면 즉시 반영됩니다. 구글 검색 결과의 파비콘은 재크롤링 후 며칠~몇 주 뒤에 바뀝니다.

구글 검색 결과용 파비콘은 48×48의 배수(96×96 권장)이고 크롤링이 허용된 경로에 있어야 합니다. 생성은 브라우저에서 이뤄지며 이미지는 서버로 전송되지 않습니다.