ref

명칭은 site icon, shortcut icon 또는 favicon이라고 불린다. 이는 웹사이트 또는 웹페이지에서 보여지는 작은 이미지를 말하는데, 탭 바에서 주로 확인할 수 있다.

이번 글에서는 Explorer 9에서 어떻게 최상의 아이콘을 표시할 수 있는 지에 대해서 알아본다.

Internet Explorer 9에서의 사이트 아이콘

일반적인 사이트 아이콘은 브라우저의 히스토리 주소창에서 또는 즐겨찾기 리스트에서 볼 수 있다. 각각의 사이트를 구분하기 위해서 사용된다.

.ICO파일은 다른 해상도의 이미지들을 가질 수 있으며, 초기 Internet Explorer에서는 16x16 또는 32x32 pixels 단위의 사이즈를 추천한다.

하지만 데스크톱 해상도의 변화에 따라 조금씩 커져가는 추세로 64x64 pixels 단위 또는 그보다 큰 단위를 사용하기도 한다.

아래는 Internet Explorer 9에서 사용되는 사이즈들이다.

  • Address Bar (16x16)
  • New Tab page (32x32)
  • Taskbar button (32x32)
  • Pinned site browser UI (24x24)

추가적으로 아래의 사이즈가 필요할 수 도 있다.

  • Jump List tasks (16x16)
  • Thumbnail Toolbar buttons (16x16)
  • Overlay icons (16x16)

Internet Explorer 9에서 최적의 아이콘을 제공하기 위해서는 아래와 같은 사이즈를 사용한다.

Recommended 16x16, 32x32, 48x48


Optimal 16x16, 24x24, 32x32, 64x64


사이트 아이콘 만들기

사이트 아이콘을 만들기 위한 가장 시운 방법으로 X-Icon Editor을 사용할 수 있다. X-Icon Editor는 무료로 제공하는 어플리케이션이며 HTML5 Canvas기반으로 작성되어 있다. 이 어플리케이션은 브라우저 내에서 고해상도의 아이콘 제작해준다.

어플리케이션을 통해 다 만들었다면 쉽게 다운로드가 가능하다.

만든 아이콘을 웹사이트에 추가하기 위해서는 link Element를 사용하며 아래와 같이 이용될 수 있다.


이 사이트 아이콘 파일은 웹사이트 디렉토리 어디에나 위치시킬 수 있다.

왜냐하면 사이트 아이콘은 Internet Explorere에서 사용되기 때문이다. 오직 .ICO 파일 포멧만 지원된다. 만약 개발중에 아이콘을 변경하게 되면 브라우저 캐스 또는 파일명을 재작성해야될지도 모른다.