본문
블로그나 개인 웹사이트 등을 운영하는 분이라면 정성껏 꾸민 자기 웹사이트에 멋진 파비콘을 달아주고 싶은 경우가 있을 겁니다. 2000년대, 그러니까 아직 MS Internet Explorer가 웹브라우저의 절대강자였던 시절에는 웹브라우저가 파비콘을 제대로 지원해주지 않았지요. 웹표준도 아니었고 단지 IE 5에서 독단적으로 지원하던 기능에 불과했고, 그러다보니 정성껏 파비콘을 설정해도 어떤 PC에서는 보였다가 어떤 PC에서는 또 안보였다가 하기 일쑤였습니다. 허나 시간이 흘러 요즘은 웹 환경도 개선되고 웹브라우저도 표준을 철저히 준수하지는 못할지라도 서로 호환은 되도록 하려는 의지는 보이고 있는 덕에 이젠 파비콘을 꽤 그럴싸하게 활용할 수 있게 되었습니다.
그러나 막상 만들어보려면 생각처럼 간단하지가 않지요. 일단 어느 정도의 사이즈로 만들어야 할지부터가 곤혹스럽고, 색상은 몇 bit로 맞춰야 하는지, 포맷(≒확장자)은 무엇으로 해야 할지, 검색을 해보니 ico 형식이라고는 하는데 윈도우즈 기본 그림판에도 심지어 포토샵에도 ico 포맷으로 저장하는 옵션이 보이지 않고…… 이래저래 혼란합니다.
이번 포스트에서는 파비콘에 대한 기본 개념을 잡고 실질적으로 파비콘 제작에 필요한 정보, 특히 멀티플 사이지즈를 포함하는 ICO 파일 제작 방법에 관해 정리해보겠습니다.
1. 파비콘이란?
블로거닷컴의 기본 파비콘
웹브라우저 즐겨찾기(Bookmark)에 등록되어 있는 파비콘들.
(위에서부터 대학내일, 유튜브, 위키백과, 나무위키, 나사)
파비콘(영어: favicon, 'favorites + icon') 또는 패비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.
- 위키백과 한국어판 '파비콘' 항목 도입부
- 파비콘은 웹사이트의 심볼 이미지로서, 해당 웹사이트에 접속했을 때 웹브라우저의 제목표시줄, 주소표시줄, 탭, 즐겨찾기 등에 표시됩니다.
- 기본적으로 ICO 파일이 기본형식이며 저도 ICO 파일을 추천합니다. 그 이유는 ICO 파일이 멀티사이즈를 지원하기 때문인데요, 이에 관해서는 아래에서 다루겠습니다. (ICO 외에도 PNG, GIF, JPEG, SVG 형식의 파비콘도 만들 수는 있으나 지원하지 않는 웹브라우저가 많아 신뢰성이 떨어집니다.)
- 웹브라우저별로 파비콘이 어느 곳에 표시되는지가 조금씩 다르고, 또 표시할 수 있는 형식도 조금씩 다릅니다. 이에 관해서는 영어판 위키백과의 favicon 항목(링크)에 상세히 정리되어 있더군요. 중요한 부분만 정리해보면 아래와 같습니다.
- ICO로 된 파비콘은 파이어폭스, 크롬, 익스프롤러, 오페라, 사파리에서 모두 인식됩니다.
- 인터넷 익스프롤러는 버전 11부터 PNG, GIF 형식의 파비콘을 지원합니다. JPEG는 인식하지 못합니다.
2. 왜 ICO여야 하는가
- ICO 파일은 최소 1 x 1 픽셀부터 최대 512 x 512 픽셀까지의 크기를 지원합니다. 이때 꼭 정사각형일 필요는 없습니다.
- ICO 파일은 멀티 사이지즈(multiple sizes) 기능을 지원합니다. 즉, 하나의 파일에 여러 사이즈의 이미지를 포함시킬 수 있다는 것입니다. 이것은 상당히 중요한 기능입니다. 왜냐하면 웹브라우저나 기기마다 지원, 표시하는 파비콘 크기가 다르기 때문입니다.
- 가령 인터넷 익스프롤러 구버전(5~9)의 경우 파비콘을 16 x 16 크기로 표시합니다. 반면 익스프롤러 신버전 등에서는 32 x 32 크기를 사용합니다. iOS와 안드로이드에서 사용하는 앱 아이콘은 152 x 152 사이즈입니다. 그 외에도 48 x 48, 64 x 64, 128 x 128 등 다양한 사이즈 여기저기에서 각각의 용도에 맞게 쓰이고 있습니다. PNG나 GIF처럼 단일 사이즈로만 저장되는 이미지 파일로는 이런 다양한 요구에 대응할 수 없는 것입니다.
윈도우즈7 작업표시줄의 예.
가장 위 블로거닷컴의 파비콘과 그 아래의 크롬, 인터넷 익스프롤러 아이콘을 비교해보면 화질 차이가 명확하다.
3. ICO 형식의 파일 만드는 방법 : converticon.com
- 앞서도 언급했듯 윈도우즈 그림판이나 어도비 포토샵 등에서는 ICO 파일로 저장하는 기능을 기본적으로 지원하지 않습니다. 포토샵의 경우 플러그인이 있다고는 합니다만 겨우 이미지 하나 만들자고 웹을 헤매는 것도 번거로운 일이죠.
- ICO 파일을 자체적으로 지원하는 이미지 처리 프로그램으로는 코렐 드로우나 GIMP 정도가 있습니다. GIMP는 프리웨어지만 새로 배워야하고, 심지어 코렐 드로우는 매우 비싼 전문가용 프로그램입니다. (2016년 상반기 기준 코렐 드로우 최신버전의 정가는 749달러네요.)
- 따라서 간단하게 ICO 파일을 만드려면 일단 그림판 등을 이용해 PNG 혹은 jpg 파일을 만든 후, 그것을 웹상에 있는 무료 변환기를 이용해 ICO로 바꾸는 방식이 낫습니다. 이미지를 ICO로 변환해주는 웹사이트는 꽤 여러 곳 있지만, 제가 가보기로는 컨버트아이콘 닷컴(링크, http://converticon.com/)이라는 곳이 가장 추천할만합니다. 다른 곳은 단순히 형식만 바꿔주는 경우가 많은데 비해, 이곳에서는 ICO 파일의 장점인 멀티 사이지즈 기능을 지원하거든요.
3-1. 우선 그림판 등에서 파비콘 이미지를 만듭니다. 색상은 24bit까지도 지원하며, 사이즈는 255 x 255 정도면 충분합니다. JPG나 PNG로 저장하면 됩니다. 만약 알파채널(투명)을 사용한다면 PNG로 저장해야겠지요.
3-2. converticon.com 에 접속합니다. 아래의 Get Started 버튼을 누르면 이미지를 찾는 창이 나옵니다. 미리 만들어둔 이미지를 읽혀줍니다.
3-2. 아이콘이 될 영역이 파란색으로 표시됩니다. 미리 만들어둔 이미지가 정사각형이라면 알아서 전체가 인식됩니다. Export 버튼을 누릅니다.
3-3. ICO 파일에 포함시킬 사이즈를 묻는 창이 나옵니다. 자신에게 필요한 사이즈를 모두 체크합니다. 파비콘 용량에 제한이 있는 웹사이트(예 : 블로거닷컴은 100KB까지의 파비콘만 허용하고 있습니다.)라면 꼭 필요한 사이즈만 체크해서 제한용량을 넘지 않아야겠고, 그렇지 않더라도 가능하면 이미지의 크기를 줄이는 게 트래픽 관리 면에서도 좋겠지요. 각 사이즈의 실질적인 중요도를 순서대로 나열하면 다음과 같습니다.
- 16 x 16, 24 x 24, 32 x 32 : 웹브라우저에서 주로 사용합니다. 파비콘으로 쓰려면 필수.
- 32 x 32, 64 x 64 : 윈도우즈에서 사용합니다. 윈도우즈 7의 '큰 아이콘' 옵션에서 쓰는 사이즈가 32 x 32이라고 합니다.
- 64 x 64, 128 x 128 : Mac OS에서 이용됩니다.
- iOS나 안드로이드의 런처(바탕화면)에서 사용하는 사이즈는 152 x 152 라고 합니다. converticon.com에는 152 사이즈가 없으니 더 큰 사이즈로 저장해두는 것도 좋겠지요.
3-4. 아래의 Save As 버튼을 눌러 저장합니다. 이미지 뷰어 프로그램으로 확인해보면 그냥 단일 사이즈처럼 보이지만, 내부적으로는 3-3단계에서 체크한 사이즈를 모두 포함하고 있습니다.
3-5. 이후 각 웹사이트마다의 적용법을 따르시면 됩니다. 서비스형 블로그의 경우 대체로 설정하는 메뉴가 따로 있습니다. (티스토리의 경우 관리 화면 - '환경설정' - '기본 정보' - '파비콘', 블로거닷컴의 경우 '레이아웃' - 'Favicon') 직접 만든 웹사이트의 경우 FTP 등을 이용해 루트 디렉토리에 파비콘 파일을 위치시킨 후 index에서 link 명령으로 불러오면 됩니다. 자세한 것은 구글링(파비콘, link, rel 등으로 검색하면 나올 겁니다)을 하거나 위키백과 영문판 favicon 항목의 'how to use' 꼭지(링크)를 참고하세요.