in Web

Web – 사이트 아이콘 커스터마이징 – 튜토리얼 1

ref

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

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

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

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

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

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

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

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

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

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

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

Recommended 16×16, 32×32, 48×48


Optimal 16×16, 24×24, 32×32, 64×64


사이트 아이콘 만들기

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

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

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

<link rel="shortcut icon" href="/favicon.ico" />

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

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

Write a Comment

Comment