파비콘 생성기

이미지를 16~512px 파비콘 PNG로 변환합니다.

정사각형 이미지를 선택하거나 끌어다 놓으세요

표준 favicon.ico 대신 최신 브라우저가 권장하는 PNG 파비콘을 생성합니다. 16·32·48·180(Apple)·192·512px를 내려받아 사용하세요.

사이트를 다 만들고 나면 탭에 남아 있는 흐릿한 기본 아이콘이 유난히 눈에 걸립니다. 그런데 막상 파비콘을 넣으려고 보면 16px부터 512px까지 필요한 크기가 제각각이라 이미지 편집기를 몇 번씩 오가게 됩니다.

이 도구는 로고나 심볼 이미지 한 장을 올리면 필요한 크기의 PNG를 한꺼번에 만들어 줍니다. 변환은 브라우저 안에서 처리되므로 파일이 서버로 올라가지 않습니다.

어떻게 계산되나요

만들어지는 크기

이미지를 올리면 16 · 32 · 48 · 180 · 192 · 512px의 정사각형 PNG가 한 번에 생성되고, 크기별로 따로 내려받을 수 있습니다.

크기	쓰이는 곳
16 · 32px	브라우저 탭·즐겨찾기
48px	예전 윈도우 사이트 아이콘 호환
180px	아이폰·아이패드 홈 화면 추가
192 · 512px	안드로이드 홈 화면·PWA 설치

자르는 방식

가로세로 비율이 다른 이미지를 넣으면 짧은 변을 기준으로 한 정사각형을 이미지 한가운데에서 잘라 각 크기에 맞춰 축소합니다. 가장자리 요소가 잘리는 게 신경 쓰인다면 미리 정사각형으로 여백을 준 파일을 넣는 편이 좋습니다.

배경 처리

투명을 켜면 원본의 투명 영역이 그대로 유지되고, 끄면 선택한 색으로 배경을 채웁니다. 아이폰 홈 화면 아이콘(180px)은 투명 부분이 검게 보이는 경우가 있어 배경색을 지정하는 편이 안전합니다.

적용

받은 파일을 서버에 올린 뒤 HTML <head>에 <link rel="icon" sizes="32x32" href="/favicon-32.png">, <link rel="apple-touch-icon" href="/favicon-180.png"> 형태로 연결하고, 192·512px는 웹 매니페스트의 icons에 적어 둡니다. 브라우저가 예전 파비콘을 오래 캐시하므로 바꾼 직후에는 강력 새로고침으로 확인하세요.

용어 정리

파비콘: 브라우저 탭·즐겨찾기·검색 결과 옆에 표시되는 작은 사이트 아이콘입니다.
Apple 터치 아이콘: 아이폰·아이패드에서 '홈 화면에 추가'를 했을 때 쓰이는 180px 아이콘입니다.
PWA 아이콘: 웹앱으로 설치할 때 쓰는 192·512px 아이콘으로, 웹 매니페스트 파일에 적어 둡니다.
투명 배경: 이미지에서 색이 칠해지지 않은 영역. 켜 두면 탭 배경색 위에 자연스럽게 얹힙니다.
중앙 크롭: 직사각형 이미지의 가운데를 정사각형으로 잘라 내는 방식입니다.

자주 묻는 질문

파비콘은 몇 px로 만들어야 하나요?

브라우저 탭용 16·32px, 아이폰 홈 화면용 180px, 안드로이드·PWA 설치용 192·512px를 갖추면 대부분의 상황이 해결됩니다. 이 도구는 여기에 예전 윈도우 호환용 48px를 더해 여섯 가지를 한 번에 만듭니다.

.ico 파일도 따로 있어야 하나요?

요즘 브라우저는 PNG 파비콘을 문제없이 읽습니다. 다만 일부 오래된 환경이나 링크 미리보기 도구는 사이트 루트의 /favicon.ico를 먼저 찾기 때문에, 폭넓은 호환이 필요하면 ico 파일을 함께 두는 것을 권합니다.

정사각형이 아닌 이미지를 올려도 되나요?

가운데를 기준으로 정사각형을 잘라 쓰기 때문에 동작은 합니다. 다만 가로로 긴 로고라면 좌우가 잘려 글자가 사라질 수 있으므로, 심볼만 따로 정사각형으로 준비하는 편이 결과가 좋습니다.

올린 이미지가 서버에 저장되나요?

저장되지 않습니다. 파일을 읽어 브라우저 캔버스에서 변환한 뒤 바로 내려받는 방식이라, 이미지가 외부로 전송되지 않습니다.

파비콘을 바꿨는데 탭에 그대로예요.

브라우저가 파비콘을 길게 캐시하기 때문입니다. 강력 새로고침(Ctrl+F5)이나 시크릿 창에서 먼저 확인하고, 그래도 남아 있으면 파일 이름 뒤에 ?v=2 같은 값을 붙여 새 주소로 인식시키면 됩니다.