[디자인] 파비콘(Favicon) 만들기

동기

우선 파비콘은 브라우저 별로 약간 차이가 있는 것 같은데, 익스플로러는 주소란과 탭에 좌측에 위치해 있고, 크롬이나 파이어폭스 같은 경우 탭에만 타이틀 왼쪽에 이미지가 있다. 이 이미지(아이콘)가 바로 파비콘이다.

프로젝트를 진행하다가 이미지를 넣는 일이 생겼다.

그때는 디자인팀에서 준 이미지를 넣었지만, 한참이 지난 지금에서 그냥 한번 만들어볼 수 있지 않을까 생각이 들어,

'한번 내가 직접 만들어볼 수 있나?' 하고 찾아본 결과 ... 역시 있었다.

방법

파비콘을 만들 수 있는 여러 사이트가 있는 것 같은데, 구글에서 'favicon'라고 치면 제일 위에 나오는 사이트에 들어가서 만들어보자.

#링크 : http://www.favicon-generator.org/

브라우저 기준으로 세로 2/5 정도, 가로 3/7 정도 위치해 있는 'favicon.ico Editor'를 클릭해서 들어가면 그림판처럼 크게 나오는데, 여기서 직접 그려보면 된다. 엄청난 픽셀 수인 16 x 16 으로 그릴 수 있다.

#1 : 파비콘을 만든다. → 우측 하단에 Create Favicon 을 클릭한다.

#2 : 중간에 Download the generated favicon 을 클릭한다.

#3 : 로컬에 저장한다.

내 첫 favicon을 만들었다.