파비콘 만들기 (ICO)
로고 이미지(PNG·JPG·WebP·SVG)로 16·32·48px favicon.ico와 애플 터치 아이콘, 안드로이드 아이콘, site.webmanifest를 한 번에 만들어요. 브라우저 탭 모양을 미리 보고 <head> 코드도 복사할 수 있어요.
내 기기 안에서만 처리돼요. 서버로 전송하지 않아요.
관련 도구
자주 묻는 질문
ICO 파일 안에는 무엇이 들어 있나요?
고른 크기(기본 16·32·48px)의 PNG 이미지가 여러 장 들어 있고, 브라우저와 Windows가 상황에 맞는 크기를 골라 씁니다. PNG를 담는 ICO는 모든 최신 브라우저와 Windows Vista 이후에서 열립니다.
favicon.ico만 있으면 되지 않나요?
브라우저 탭에는 favicon.ico만으로 충분하지만, 아이폰·안드로이드 홈 화면에 사이트를 추가하면 180·192·512px처럼 큰 아이콘을 따로 찾습니다. ZIP 묶음과 <head> 코드를 쓰면 이런 경우까지 한 번에 맞출 수 있습니다.
작은 아이콘도 깨끗하게 줄여지나요?
원본을 먼저 1024px 정사각형으로 그린 뒤 크기마다 절반씩 단계적으로 줄여, 한 번에 크게 줄일 때 생기는 계단 무늬와 뭉개짐을 줄였습니다.
site.webmanifest는 무엇인가요?
안드로이드 크롬 등이 홈 화면 아이콘과 앱 이름·색을 읽는 파일입니다. 사이트 이름과 192·512px 아이콘 경로, 테마 색(배경색을 채웠으면 그 색, 아니면 흰색)이 들어갑니다.
이미지가 서버로 올라가나요?
아니요. 그리기, ICO 만들기, ZIP 묶기가 모두 브라우저 안에서 이루어져 이미지가 기기 밖으로 나가지 않습니다.
파비콘 만들기 (ICO), 어떤 도구인가요?
로고나 아이콘 이미지 한 장으로 웹사이트 파비콘 묶음을 만듭니다. 16·32·48px이 든 favicon.ico와 favicon-16x16.png·favicon-32x32.png, 아이폰 홈 화면용 apple-touch-icon.png(180px), 안드로이드용 192·512px 아이콘, site.webmanifest를 한 번에 ZIP으로 받고, <head>에 넣을 코드도 복사할 수 있습니다. 정사각형이 아닌 이미지는 가운데 맞추거나 꽉 채워 자르고, 배경색과 둥근 모서리를 고를 수 있습니다. 브라우저 탭에 어떻게 보이는지 미리 확인할 수 있고, 이미지는 서버로 전송되지 않습니다.
이럴 때 쓰세요
새 홈페이지에 아이콘 달기
로고 PNG 하나로 favicon.ico부터 홈 화면 아이콘까지 만들어, ZIP 안의 파일을 사이트 맨 위 폴더에 올리고 코드만 붙여 넣으면 돼요.
가로로 긴 로고를 아이콘으로
글자가 붙은 가로형 로고는 '꽉 채워 자르기'로 가운데 심볼만 쓰거나, '가운데 맞춤'에 배경색을 채워 정사각형으로 만들어요.
PNG를 ICO로만 바꾸기
블로그·쇼핑몰 관리 화면이 favicon.ico 파일 하나만 받을 때 'favicon.ico 저장'으로 ICO만 받아요.
사용 방법
로고 이미지 올리기
PNG·JPG·WebP·SVG 이미지 1장을 끌어다 놓거나 선택합니다. 512×512px 이상의 정사각형 이미지가 가장 깔끔합니다.
- 투명 배경 PNG나 SVG를 쓰면 탭 색에 상관없이 자연스럽게 보여요.
- SVG는 벡터라 어느 크기로 만들어도 선명해요.
모양 다듬기
정사각형이 아니면 '가운데 맞춤'(남는 곳은 투명)과 '꽉 채워 자르기' 중에서 고르고, 필요하면 배경색 채우기와 모서리 둥글기를 정합니다.
- 모서리 둥글게를 100%로 올리면 동그란 아이콘이 돼요.
- ICO에는 16·32·48px이 기본으로 들어가고, 64·128·256px을 더 넣을 수 있어요.
- 사이트 이름을 적으면 site.webmanifest의 name과 탭 미리보기에 들어가요.
미리 보고 저장하기
밝은·어두운 브라우저 탭 미리보기와 크기별 썸네일을 확인한 뒤 'favicon.ico 저장' 또는 '파비콘 묶음 ZIP 저장'을 누릅니다.
- ZIP에는 favicon.ico, PNG 아이콘 5개, site.webmanifest, <head> 코드(head-tags.html)가 들어 있어요.
- '코드 복사'로 <head>에 넣을 link 태그를 바로 복사할 수 있어요.
자주 나는 문제와 해결
- 16px 아이콘이 흐리거나 알아보기 어려워요
- 16px은 아주 작아서 글자나 가는 선이 뭉개져요. 글자를 뺀 심볼만 남긴 이미지를 쓰거나 '꽉 채워 자르기'로 핵심 부분을 크게 잡아 보세요.
- 아이콘을 바꿨는데 브라우저 탭에 예전 아이콘이 나와요
- 브라우저는 파비콘을 오래 저장해 둬요. 강력 새로고침(Ctrl+Shift+R)을 하거나 시크릿 창에서 열어 확인하고, 그래도 그대로면 link 태그 주소 끝에 ?v=2처럼 붙여 새 파일로 알려 주세요.
- 아이폰 홈 화면 아이콘 배경이 흰색이에요
- 아이폰은 투명한 곳을 검게 채우기 때문에 애플 터치 아이콘에는 배경색을 채워요. 배경색 채우기를 켜고 원하는 색을 고르면 그 색으로 바뀌어요.
- SVG를 올렸더니 열 수 없다고 나와요
- SVG 안에서 외부 이미지·글꼴을 불러오면 브라우저가 그리지 못할 수 있어요. 디자인 프로그램에서 글자를 윤곽선으로 바꿔 다시 저장하거나 PNG로 내보내 올려 주세요.
주의사항
- <head> 코드는 파일을 사이트 맨 위 폴더(도메인 바로 아래)에 올렸다고 가정한 주소입니다. 다른 폴더에 올렸다면 href 경로를 고쳐야 합니다.
- 다른 회사의 로고나 상표를 파비콘으로 쓰려면 권리자의 허락이 필요합니다.