파비콘(Favicon) 쉽고 편하게 만들기

이 블로그를 찾는 분 중에 파비콘을 모르시는 분은 없겠지만 우선 파비콘이란 무엇인가를 정의하고 글을 시작한다.

패비콘(영어: favicon, 'favorites + icon') 또는 파비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

출처 : http://ko.wikipedia.org/wiki/%ED%8C%A8%EB%B9%84%EC%BD%98

그림으로 쉽게 얘기하자면 인터넷 브라우저의 탭에 표시되는 이미지라고 할 수 있다.

아래의 그림을 참조.

인터넷 익스플로러나 크롬 모두에서 동일하게 보이는 아주 작은 사이즈의 이미지 파일이다.

해당 웹사이트의 아이덴티티를 나타내며, 보통 로고를 이용하여 만들어지고 있다.

파비콘은 ico, jpg, png등 여러 확장자로 만들 수 있는데 가장 보편적인 것은 ico 파일이다. 다른 파일 형태를 가진 파비콘은 브라우저별 특성에 따라 잘 나오지 않을 수도 있기 때문에 주의를 요한다.

아래는 파비콘의 브라우저별 특징이다.

출처 : http://ko.wikipedia.org/wiki/%ED%8C%A8%EB%B9%84%EC%BD%98

모든 브라우저에서 버전을 막론하고 동일하게 표시되기 위해서는 ico 타입으로 이미지 파일을 만들어야 한다.

하지만 ico 확장자는 포토샵에서 편집, 저장이 불가능하기 때문에 난감함을 겪을 때가 많다.

또한 초보자로서는 이미지의 사이즈는 몇으로 해야 하는지, 웹사이트에 어떤 형태로 붙여야 하는지에 대해 잘 모르기 때문에 난감함을 느낄 것이다.

그래서 초보자를 위한 사이트들이 생겨나게 되었다.

대표적으로는 구글링시 가장 상위 결과로 노출되는 http://www.favicon.cc/을 들 수 있다.

위의 사이트에서는 직접 파비콘을 그리거나, 포토샵에서 작업한 jpg, png 파일을 업로드 해서 ICO로 변환 및 추가적인 수정을 할 수 있다. 

다음과 같은 로고를 파비콘으로 만든다고 가정하자.

포토샵에서 300x300px의 PNG 파일로 작업했다.

작업시 유의사항은 가장 작은 사이즈의 파비콘은 16x16px 이기 때문에 세밀한 디자인이 표현되지 않을 수 있으므로 디자인 자체를 단순화 하여야 한다는 것이다.

favicon.cc 사이트의 Import Image 메뉴를 사용하여 위의 로고를 업로드 한다.

업로드 후 변환된 값은 다음과 같다.

16x16px의 파비콘으로 변환은 되었으나 거칠고 마음에 들지 않는다.

수동으로 이미지 작업을 할 수도 있으나, 상당한 눈썰미와 끈기를 요구하는 작업이기 때문에 추천하지 않는다.

300x300px이 아니라 더 작은 사이즈로 작업해서 업로드 하는 등 여러가지 방법을 동원하면 좀 더 만족할만한 이미지를 얻을 수 있으나, 위의 사이트는 사실 오늘 추천하고자 하는 사이트가 아니다.

http://realfavicongenerator.net/

최근 생긴 파비콘 제작 사이트인데 아직 베타 버전이지만 아주 쓸만한 기능들을 가지고 있다.

Instead of giving you a single favicon.ico file, RealFaviconGenerator generates all the pictures and HTML code you need to get a cool, mobile- and tablet-ready favicon. Your favicon will be perfect for:

• PC and Mac, as usual
• iPhone and iPad
• Android phones and tablets
• Windows 8 tablets
• And more...

Your site deserves a cross-platform favicon. Generate your favicon now.

출처 : http://realfavicongenerator.net/

PC, 맥, 아이폰, 패드, 윈도8 태블릿 등등 다양한 디바이스의 조건을 모두 충족시키는 파비콘을 만들 수 있다.

만들어진 파일은 zip의 형태로 압축되어 다운받을 수 있으며, 옵션으로 이미지 처리 방식을 선택하여 가장 마음에 드는 결과를 눈으로 보면서 고를 수 있다.

위의 아이콘을 real favicon generator에 올려보겠다.

iOS용으로 최적화 시킬 수 있는 옵션이 등장한다. 배경색을 지정하거나 마진을 줄 수 있다.

그 아래에는 Windows8의 타일에서 사용되는 옵션을 고를 수 있다. 해당 파비콘의 배경색과 동일한 배경색을 지정하면 조금 더 보기가 좋다.

그 아래에는 웹에서 사용되는 옵션들이 있는데 아래의 그림을 참고하자.

이미지를 클릭해서 원본 사이즈로 확인하기 바란다.

이미지 압축 방식에는 여러가지 알고리듬이 존재하는데 위의 옵션을 통해서 가장 아름다운 형태의 파비콘을 고를 수 있다. 개인적으로는 Mitchell이나 Lanczos 방식이 좋아보인다.

원하는 옵션을 모두 고른 후 하단의 진행버튼을 누르게 되면 모든 작업이 완료된다.

Favicon package 버튼을 통해 다양한 사이즈로 작업된 파비콘의 압축파일을 다운로드 받을 수 있으며,

웹사이트 내에 적용할 HTML의 샘플 또한 얻을 수 있다.

위의 샘플을 HTML내의 HEAD TAG 안에 넣으면 된다. 물론 이미지의 경로는 자신에게 맞게 수정을 해 주어야 한다.

압축 파일의 내용물은 다음과 같다.

압축파일 안에 XML 파일이 있는데 Windows 8의 타일에 사용되는 소스이다.

XML 파일의 내용은 다음과 같다.

여러가지 파비콘 만드는 사이트를 이용해 보았는데 real favicon generator 만큼 좋은 결과물과 훌륭한 옵션, 다양한 플랫폼을 지원하는 사이트는 없었다.

주의사항 : 최소 사이즈는 70x70픽셀이 권장된다. 하지만 windows8의 고해상도 타일 사이즈가 260x260px이기 때문에 그보다 크거나 260x260px의 이미지를 업로드 하는게 좋다.

파비콘을 쉽고 멋지게 만들고자 하는 사람에게 강력하게 추천한다.

http://realfavicongenerator.net/