파비콘(favicon)은 웹브라우저의 탭에 표시되는 사이트 고유의 아이콘을 말한다.
이 favicon 을 만들어볼 요량으로 여기저기 찾아보니, 우선 이 파비콘의 포맷은 .ICO 파일.
이 ICO 파일의 위키백과를 찾아보면 아래와 같은 정의가 나온다.
ICO 파일은 여러 크기와 색 깊이를 가진, 하나 이상의 작은 그림을 담고 있다.
처음엔 이 사실을 모르고 favicon 이 그저 16x16 픽셀로 이루어진 이미지 인줄 알았다.
그냥 16x16 pixel 의 favicon 만 넣으면 위에서 보는 것같이 일반적인 브라우저에서는 별 탈이 없지만, 아래처럼 모바일 브라우저에서는 도트가 보일만큼 해상도가 떨어진다는 문제가 있다. 브라우저 환경이 꼭 PC만 있으란 법은 아니니 이것도 해결해야할 숙제 ㅠㅠ
▲ 돌핀에서 열었을 때의 모습. 아래는 facebook 의 favicon
해서 또 구글링을 하다보니, .ico 파일 안에는 여러 크기의 다양한 아이콘파일을 통합하는 기능이 있다는 것이다.
지난번 5/6/5 문제로 한번 도움을 받은 telegraphics 라는 회사에서, 아이콘(.ico) 파일을 번들링하는 툴을 역시 제공하고 있는 것을 발견! 칭찬해줄 만한 회사인 듯.
GUI를 지원하는 프로그램은 아니지만, 커맨드 라인에서 한 줄 뚝딱 치면 모든 ico 파일을 하나로 통합해준다.
통합할 모든 .ico 파일을 iconbundl 과 함께 한 곳에 몰아놓고, 위 명령을 실행하면 combined.ico 라는 파일이 생성된다. 이 파일 하나로 favicon 을 쓰면, 다양한 크기의 favicon 을 같이 운용할 수 있는 것!!!
이런 방법을 통해서 16x6 외에도, 24x24, 32x32, 64x64 와 같은 다양한 favicon 들을 하나로 묶을 수 있다. 아래는 결과.
(돌핀에서 요구하는 픽셀값이랑 1:1 매칭이 되는 것 같진 않아서, 딱히 클리어하진 않다만)
