이미지 → ICO(파비콘) 변환기
이미지 파일을 업로드하면 브라우저에서 바로 ICO(.ico) 파비콘 파일로 변환합니다. 서버로 파일이 전송되지 않으며, 변환은 사용자의 기기(브라우저) 안에서만 이루어집니다.
미리보기
저번 이미지 도구 글을 쓰면서 이 블로그 탭을 계속 띄워놓고 작업했는데, 탭에 뜨는 아이콘이 그냥 브라우저 기본 아이콘 그대로더라고요. 파비콘을 따로 만들어둔 적이 없었던 겁니다. 마침 ico 파일이 내부적으로 어떻게 생겼는지도 궁금하던 차라, 아무 변환기나 검색해서 쓰는 대신 직접 만들어보면서 알아보기로 했습니다. 위에 있는 도구가 그렇게 나온 결과물이고, 이 글에는 사용법이랑 만들면서 알게 된 ico 파일 이야기를 정리해뒀습니다.
업로드한 이미지는 어디로도 전송되지 않습니다. 변환은 방문하신 분의 브라우저 안에서 캔버스로 바로 처리되고, 만들어진 ico 파일만 다운로드로 받아가는 구조라 서버에 따로 저장되는 게 없습니다. 개인 프로젝트라 아직 세세한 부분은 계속 손볼 예정입니다.
사용하는 방법
이미지 업로드 영역을 클릭하거나, 파일을 그대로 끌어다 놓으면 미리보기가 뜹니다. 그 아래 체크박스에서 만들고 싶은 아이콘 크기를 고르면 되는데, 기본으로는 파비콘으로 가장 많이 쓰는 32×32 하나만 체크되어 있습니다. 크기를 여러 개 고르면 그 크기들이 전부 하나의 ico 파일 안에 함께 들어갑니다.
- 이미지를 올린다 (PNG, JPG, WEBP 등 대부분의 이미지 포맷을 그대로 인식합니다)
- 필요한 아이콘 크기를 체크한다 (기본값 그대로 써도 되고, 여러 개 추가해도 됩니다)
- 변환하기를 누르고, 미리보기를 확인한 뒤 다운로드 버튼으로 저장한다
정사각형이 아닌 이미지를 올리면 비율은 그대로 유지한 채 정사각형 캔버스 가운데에 놓이고, 남는 자리는 투명하게 채워집니다. 로고나 아이콘처럼 배경이 없는 이미지를 쓰면 결과물이 제일 깔끔하게 나옵니다.
ico 파일, 왜 굳이 따로 있는 걸까
처음엔 그냥 png 파일 이름만 .ico로 바꾸면 되는 줄 알았는데, 막상 만들어보니 그게 아니었습니다. ico는 이미지 하나가 아니라 여러 크기의 이미지를 한 파일 안에 같이 담아둘 수 있는 형식입니다. 브라우저 탭에 뜨는 작은 아이콘, 즐겨찾기에 저장했을 때 보이는 아이콘, 윈도우 바탕화면 바로가기 아이콘이 저마다 필요한 크기가 달라서, 이렇게 여러 크기를 한 번에 묶어두면 쓰는 쪽에서 상황에 맞는 크기를 알아서 골라 씁니다. 그래서 이 도구도 여러 크기를 함께 선택할 수 있게 만들었습니다.
그래도 하나만 고른다면
귀찮게 여러 개 고르고 싶지 않다면 32×32 하나만 있어도 요즘 웹사이트 파비콘 용도로는 크게 부족하지 않습니다. 예전엔 16×16이 표준처럼 쓰였는데, 화면 해상도가 높아지면서 지금은 32×32 쪽이 더 선명하게 보여서 많이 쓰입니다. 좀 더 큰 화면(윈도우 아이콘 등)까지 고려한다면 256×256도 같이 골라두는 걸 추천합니다.
이것저것 테스트해보긴 했는데 브라우저나 이미지 종류에 따라 제가 못 잡은 예외 케이스가 남아있을 수 있습니다. 변환이 이상하게 되거나 안 되는 경우 있으면 댓글로 알려주세요. 저도 공부하면서 만드는 거라, 그런 제보가 쌓이는 게 다음에 고칠 때 제일 큰 도움이 됩니다.
0 댓글