파비콘(ICO) 만들기
이미지 하나로 브라우저 탭 아이콘을 만드세요.
이미지를 끌어다 놓거나 클릭
🔒 정사각형 PNG가 가장 또렷해요 · 파일은 기기에서만 처리설명
웹사이트 탭에 표시되는 파비콘(favicon.ico)을 이미지로부터 만듭니다. PNG를 내장한 ICO로 저장됩니다.
관련 도구
웹사이트 브라우저 탭과 북마크에 표시되는 파비콘(favicon.ico) 파일을 만들어주는 도구입니다. 로고 이미지나 아이콘 PNG 파일을 업로드하면 브라우저가 요구하는 ICO 형식으로 즉시 변환해줍니다. 별도 프로그램 설치 없이 브라우저에서 바로 처리되며, 파일이 서버로 전송되지 않아 보안 걱정 없이 사용할 수 있습니다.
사용 방법
변환할 이미지 파일(PNG, JPG, SVG 등)을 업로드 영역에 드래그하거나 클릭해 선택합니다. 아이콘 크기 칩(16·32·48·64px) 중 원하는 크기를 고르면 미리보기에 실제 결과가 나타나고, 'favicon.ico 저장' 버튼을 누르면 선택한 크기의 ICO 파일이 저장됩니다. 저장한 파일을 웹 프로젝트의 루트 디렉터리에 넣은 뒤 HTML에 <link rel="icon" href="/favicon.ico">를 추가하면 적용됩니다.
이럴 때 유용해요
새 웹사이트를 개설할 때 가장 먼저 해야 할 작업 중 하나가 파비콘 설정입니다. 파비콘이 없으면 브라우저 탭에 흰 종이 아이콘이 표시되어 사이트 신뢰도가 떨어져 보입니다. 기존 사이트의 리브랜딩으로 로고가 바뀌었을 때, 또는 직접 만든 앱 아이콘을 웹 버전에도 적용하고 싶을 때 이 도구로 빠르게 ICO 파일을 만들 수 있습니다. PWA(프로그레시브 웹앱) 프로젝트에서 여러 크기의 아이콘이 필요할 때는 크기를 바꿔가며 각각 저장하면 됩니다.
알아두면 좋은 점
원본 이미지는 정사각형 비율이어야 결과물이 찌그러지지 않습니다. 파비콘은 최소 32×32px에서 표시되지만, 고해상도 디스플레이(Retina)를 고려해 원본을 최소 512×512px 이상으로 준비하는 것이 좋습니다. ICO 형식 자체는 여러 해상도를 한 파일에 담을 수 있지만, 이 도구는 선택한 한 가지 크기로 저장합니다. 여러 크기가 필요하면 크기 칩을 바꿔 각각 저장하세요. PNG 배경이 투명한 경우 ICO로 변환해도 투명도가 유지됩니다.
자주 묻는 질문
favicon.ico 파일을 어디에 놓아야 하나요?
SVG 이미지도 입력으로 사용할 수 있나요?
ICO 말고 PNG 파비콘을 쓰면 안 되나요?
파비콘을 바꿨는데 브라우저에 이전 아이콘이 계속 보여요.
16×16만 포함된 ICO 파일로도 충분한가요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
파비콘(ICO) 만들기, 이렇게 사용하세요
파비콘은 브라우저 탭, 즐겨찾기, 주소창 옆에 뜨는 작은 아이콘입니다. 이 도구는 가지고 있는 PNG·JPG 이미지를 웹사이트가 인식하는 favicon.ico 파일로 바꿔줍니다. 이미지를 올린 뒤 원하는 크기(16·32·48·64px)를 고르면 정사각형에 맞춰 그린 결과를 그 크기의 .ico 파일로 내려받게 해줍니다. 변환은 브라우저 안에서만 이뤄지므로 이미지가 서버로 전송되지 않고, 설치나 회원가입도 필요 없습니다. 만든 파일을 웹사이트 최상위 폴더에 올리고 HTML의 <head>에 링크를 걸면 탭에 아이콘이 나타납니다.
ICO 파일이 여러 크기를 담는 이유
PNG는 한 파일에 이미지 하나만 들어가지만, ICO는 한 파일 안에 여러 해상도의 이미지를 함께 담을 수 있는 형식입니다. 브라우저 탭은 16×16, 즐겨찾기·바탕화면 바로가기는 32×32나 48×48처럼 표시되는 위치마다 필요한 크기가 다릅니다. 하나의 큰 이미지를 그때그때 줄이면 작은 크기에서 흐릿하게 뭉개지기 쉬운데, 크기별 이미지를 미리 넣어두면 운영체제와 브라우저가 상황에 맞는 해상도를 골라 써서 어느 위치에서든 또렷하게 보입니다. 이 도구는 선택한 한 가지 크기의 .ico를 만들어 주므로, 여러 크기가 필요하면 크기를 바꿔가며 각각 저장해 함께 배치하면 됩니다.
원본 이미지는 이렇게 준비하세요
파비콘은 최종적으로 16픽셀 정도까지 줄어들기 때문에 원본 디자인이 단순할수록 잘 보입니다. 여러 글자가 들어간 로고보다는 글자 한두 개나 상징 도형처럼 단순한 그림이 유리합니다. 원본은 정사각형(예: 512×512)으로 준비하는 것이 좋습니다. 가로세로 비율이 다르면 정사각형에 맞추는 과정에서 여백이 생기거나 잘릴 수 있습니다. 배경을 투명하게 두고 싶다면 투명 영역을 지원하는 PNG를 쓰세요. JPG는 투명도를 담지 못해 배경이 흰색 등으로 채워집니다. 색은 진한 배경에 밝은 그림처럼 명암 대비가 큰 편이 작은 크기에서 형태가 살아납니다.
만든 파일을 웹사이트에 적용하기
내려받은 favicon.ico를 사이트 루트 폴더에 올려두면 대부분의 브라우저가 /favicon.ico 경로를 자동으로 찾습니다. 확실히 하려면 HTML 문서의 <head> 안에 다음 한 줄을 넣으세요.
| 목적 | 넣는 코드 |
|---|---|
| 기본 파비콘 지정 | <link rel="icon" href="/favicon.ico"> |
| 구형 브라우저 호환 | <link rel="shortcut icon" href="/favicon.ico"> |
파일을 바꿨는데 탭 아이콘이 그대로라면 브라우저가 이전 아이콘을 저장(캐시)해 두었기 때문입니다. 새로고침을 여러 번 하거나 캐시를 비우면 반영됩니다.
자주 묻는 질문
업로드한 이미지가 외부로 전송되나요?
아니요. 변환은 브라우저 안에서 처리되며 이미지 파일이 서버로 올라가지 않습니다. 회원가입이나 설치 없이 바로 사용할 수 있습니다.
JPG 사진을 파비콘으로 만들어도 되나요?
가능하지만 사진은 16픽셀 크기로 줄면 무엇인지 알아보기 어렵습니다. 인물·풍경 사진보다는 단순한 로고나 상징 그림을 권합니다. 또 JPG는 투명 배경을 담지 못하므로 배경을 투명하게 하려면 PNG를 사용하세요.
파비콘이 꼭 정사각형이어야 하나요?
파비콘은 정사각형 영역에 표시되므로 정사각형 이미지가 가장 깔끔합니다. 직사각형 이미지를 넣으면 정사각형에 맞추면서 위아래나 좌우가 잘리거나 여백이 생길 수 있으니, 미리 정사각형으로 잘라 올리는 편이 좋습니다.
바꾼 파비콘이 브라우저 탭에 반영되지 않아요.
브라우저가 기존 아이콘을 캐시에 저장해 두었기 때문입니다. 강력 새로고침(Ctrl+Shift+R)을 하거나 브라우저 캐시를 비운 뒤 다시 방문하면 새 아이콘이 나타납니다. 파일 경로와 <head>의 링크 주소가 실제 올린 위치와 맞는지도 확인하세요.