파비콘(Favicon) 만드는 방법 (a.k.a. ico파일)

아이콘(.ico) 파일이란?

텍스트 기반의 MS-DOS시절을 지나 마우스로 깔짝되는 GUI(Graphic User Interface) 기반인 Windows시대로 넘어 오면서 마우스로 눌러야 할 명령어를 사용자가 한눈에 직관적으로 알 수 있게 하기 위해 파일이나 폴더를 아이콘(.ico)파일로 만들면서 사용하기 시작했습니다.
말하자면 아이콘 파일은 Windows와 역사를 같이 하고 있다고 볼 수 있습니다. (GUI는 Mac으로부터 시작했습니다.)

각종 아이콘들

파비콘 파일이란?

파비콘은 Favorite + icon의 합성어 입니다. 다시말하면 파비콘은 아이콘인데 특별히 브라우저에서 사용하는 아이콘을 지칭한다고 보시면 됩니다.

파비콘은 웹브라우저의 URL 앞 부분이나 즐겨찾기로 저장할 경우 즐겨찾기 명 앞에 붙는 아이콘을 말합니다. 확장명도 .ico로 아이콘 확장명과 같습니다.

파비콘이 적용된 모습

파비콘과 아이콘의 차이점

그러면 어떤 차이가 있냐!! 굳이 차이점이라면 Multiple Sizes의 범위라고 할 수 있습니다.
ico파일은 Multiple Sizes를 지원합니다.

Multiple Sizes파일이란? : 하나의 ico파일에 다양한 크기의 이미지가 포함되어 있는 파일을 말함.

ico파일에는 1 x 1 픽셀 ~ 512 x 512픽셀 크기의 파일을 여러개 포함 시킬 수 있는데..
보통은 16 x 16, 24 x 24, 32 x 32, 48 x 48, 64 x 64, 128 x 128 등등의 크기를 하나의 아이콘파일에 포함합니다.
그래서 windows에서 자동 판단하여 상황에 따라 적절한 크기의 아이콘 이미지를 보여주도록 되어 있습니다.

하지만 인터넷이 기반인 웹브라우저의 경우는 네트워크로 데이터가 왔다 갔다 해야하기 때문에 트래픽 용량(데이터 크기)이 상당히 중요한 요소라고 할 수 있습니다.
그래서 파비콘의 경우 일반 아이콘처럼 모든 크기의 아이콘을 다 담는 것이 아니라 16 x 16, 32 x 32, 48 x 48정도의 제한된 이미지만 담아서 파일 용량을 줄이게 됩니다.

다시말하면 파비콘은 용량이 작은 아이콘 파일이라고 볼 수 있습니다.

아이콘(.ico) 만드는 방법

파비콘이나 아이콘을 만드는 방법은 동일하니 그냥 아이콘 이라고 명칭을 간소화 하겠습니다.

아이콘을 만드는 방법은 여러가지가 있으나 여기서는 3가지 방법을 소개할까 합니다.

인터넷 서비스로 만드는 방법

가장 간단하고 쉬운 방법이라 할 수 있습니다.
준비물은 ico파일로 만들고자 하는 이미지 파일(png, jpg, bmp)만 있으면 됩니다.
인터넷으로 서비스하는 여러 웹사이트들이 있지만 현재 가장 접근이 쉬운 사이트는 ICOConvert 입니다.

Step 1. 이미지 업로드하기( Upload an image )

첫번째 단계

1. 파일선택 버튼을 눌러서 아이콘파일을 만들고자 하는 이미지 파일을 선택합니다.
2. 선택한 파일을 실제로 웹사이트에 업로드를 합니다.
3. 현재 진행상태가 표시되고 Successfully uploaded가 나오면 1단계가 완료됩니다.

Step 2. 아이콘으로 만들 부분 선택하기( Crop your image )

아이콘을 만들 부분 선택

1. 업로드가 완료되면 이미지가 보여지는데 그중에서 아이콘으로 만들 부분을 마우스로 클릭&드래그해서 선택을 합니다. 만약 올린 이미지 전체를 아이콘으로 만들기 원한다면 이 단계는 건너 뛰어도 됩니다.

Step 3. 생성되는 모양 선택하기( Apply styles )

스타일 선택하기

1. 아이콘의 테두리를 어떻게 할지를 선택합니다. 테두리를 넣을지 말지, 형태를 하트로 할지 말지 등등.. 을 선택합니다. 중복 선택도 가능 합니다.
2. 모든 스타일을 선택 할 수 도 있습니다.
3. 선택한 것을 모두 취소 할 수 도 있습니다.

Step 4. 아이콘 파일 포멧 선택하기( Select the icon format )

아이콘포멧 선택하기

1. Png : 그냥 이미지 포멧인 png파일로 만듭니다.
2. Ico : 가장보편적인 형태로 windows에서 사용할 아이콘을 만듭니다.
3. Favicom : 웹에서 사용하기 위해 아이콘 파일을 만듭니다.
4. Custom : 내가 원하는 크기의 이미지를 선택해서 아이콘 파일을 만듭니다.

Step 5. 변환하고 다운로드 받기 ( Convert and download )

반환하고 다운받기

1. 변환하기 버튼을 눌러 줍니다.
2. 약간의 시간이 지나면 다운받을 수 있는 링크(Download your icon)가 생성됩니다.

프로그램으로 만드는 방법

아이콘 파일을 만드는 2번째 방법으로는 프로그램을 다운로드 받아서 설치 후 실행하는 방법입니다.
iconvert icons에 접속해서 프로그램을 다운로드 받아서 설치하면 됩니다.
아이콘 변환 작업이 빈번한 경우는 이 방법이 훨씬 안정적이고 편할 수 있겠으나 어쩌다 한번 변환 작업을 하는 경우는 위에 소개한 인터넷 서비스로 이용하는 것을 추천합니다. 왜냐하면 설치형은 유료입니다. -,.-;

그래서 저는 사용을 해보지는 않았습니다.

포토샵으로 만드는 방법

마지막으로 포토샵으로 만드는 방법은 ico파일로 변환해 주는 플러그인을 사용하는 방법입니다.
플러그인은 telegraphics이라는 곳에서 제공을 해 주고 있습니다.

적용 방법

1. telegraphics에서 내 OS에 맞는 플로그인을 다운로드 합니다.
   • 32bit용 파일명 : icoformat64.8bi
   • 64bit용 파일명 : icoformat.8bi
2. 다운로드 받은 플러그인을 탐색기(Mac일경우 파인더)를 사용하여 아래위치로 이동하여 저장합니다.
   • 32bit용 윈도우 : C:\Program Files(x86)\Adobe\Adobe Photoshop CS6\Required\Plug-ins\File Formats
   • 64bit용 윈도우 : C:\Program Files\Adobe\Adobe Photoshop CS6(64 bit)\Required\Plug-ins\File Formats
3. 포토샵을 껏다가 켠 후 원하는 이미지를 만든 후 새이름으로 저장을 실행합니다.
4. 저장 시 파일 확장자를 .ico를 선택하고 저장을 합니다.

몇가지 고려해야할 사항은 아래와 같습니다.

• 웹사이트에 라이선스가 명시되어 있지 않습니다. 기부금을 요구하고 있으므로 개인이 사용할 경우는 문제가 없을것 같으나 회사에서 사용 시는 좀더 확인을 해보셔야 할 것 같습니다.
• 포토샵 구버전(CS버전)에서는 잘 돌아가는데 요즘 나오는 CC버전에서는 잘 작동이 않된다고 하는 것 같습니다. (아직 저는 확인을 못해봤습니다.)

구글링을 해보니 최신 포토샵 CC는 파일을 익스포트할 때 확장자를 .png에서 .ico로 수동으로 변경해서 익스포트하면 ico로 적용된다고 합니다. 물론 이렇게 만들경우 Multiple Sizes는 되지 않겠지요.

끝 ~

출처: https://uxgjs.tistory.com/106?category=841022 [UX 공작소]