어쩌다알게된것들

#파비콘 (favicon.ico) 만들기.

2015. 5. 19.
SMALL

파비콘은 인터넷창 주소표시줄에 있는 링크 앞에 있는 아이콘을 부르는 말이다.

 

방문했던 사이트를 떠올리면, 첫번째로 그 사이트의 주제나 퀄리티를 기억할테고,

그 다음으로는 개개인의 관심에 따라서 사이트의 전반적인 디자인이나 각 요소들의 위치 등등을 보게 되는데,

파비콘도 어떤 특정 사이트를 기억하는데 일부 요소가 될 수 있다.

 

네이버나 다음, 구글, 티스토리 등 자주 방문하는 사이트들을 즐겨찾기 해놓았다면,

그 앞에 붙는 파비콘들은 아마 익숙할 것이다.

 

네이버 블로그에는 파비콘을 쓸 수 없고, 티스토리같은 자유도가 좀 있는 블로그들에서는 사용이 가능하다.

티스토리의 경우, 환경설정 > 기본정보 > 파비콘 설정에서 변경이 가능하다.

 

 

#파비콘 (favicon.ico) 만들기.

 (2015.0519일 내용 수정 후 재등록)

 

파비콘이란?

즐겨찾기 아이콘. 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 주소창에 조그만 아이콘으로 표시되어 있다.

[네이버 지식백과] 파비콘 [favicon] (IT용어사전, 한국정보통신기술협회) 

 

파비콘은 확장자가 .ico인데, 확장자 변환이 필요없이

사이트에서 그림을 그려 바로 파비콘으로 저장할 수 있는 사이트가 있어, 새로 파비콘을 만들어 보았다.

 

 favicon.cc (바로가기↗)

 

 

 

사이트 구성은 굉장히 간단하다. 들어가면 위에 광고가 하나 있고, 그 아래 간단한 그림판이 있다.

16x16픽셀로 이루어져 있기 때문에, 칸도 16x16칸이다. 점을 하나하나 찍어 그림을 그리면 된다.

 

 

16x16픽셀로 이루어져 있기 때문에, 칸도 16x16칸이다. 점을 찍어 그림을 그리면 된다.

(그림 쪽엔 영 소질이 없어서 결과물이 일단 이렇다.)

 

왼쪽 캡쳐 사진을 보면 use animation 문구가 있다. 이것을 클릭하면 오른쪽처럼 아래로 기능이 펼쳐지는데,

파비콘을 동작할 수 있게 만드는 기능이다.

 

간단히 설명하면, 이렇다.

1. clear frame: 프레임 화면 지우기

2. append new frame: 새로운 프레임 추가

3. copy previous frame: 이전 프레임을 복사해서 화면에 넣기

4. delete frame: 해당 프레임을 아예 삭제

5. 프레임을 보여주는 시간 설정

6. 프레임 반복 횟수 

 

다 완성한 후엔 아래쪽에 있는 Download Favicon에서 완성된 파일을 다운받을 수 있다.

 

 

 

 

 

수박얼굴.ico 

블로그 포스팅용으로 만든 수박얼굴.ico 파일을 첨부한다.

(원한다면) 클릭해서 다운받을 수 있다.

 

 

 

 

 

 이번에 새로 만든 파비콘은 적당한 이미지가 안 떠올라, 티스토리 파비콘을 따라했다.

작게 줄이면 그래도 그림이 나쁘지 않다.

 

 

 

 

 

LIST


공유하기