티스토리 블로그 파비콘 만들기

파비콘 만들기

티스토리 블로그를 완성하는 단계에서 거치는 절차가 있습니다. 블로그 설명을 비롯 아이콘과 파비콘(favicon)을 등록하는 절차입니다.

티스토리 마무리 과정에서 등록 사항들

파비콘은 영어로 favicon인데 다음 사전에 의할 것 같으면 즐겨찾기 아이콘이라 정의했네요. 특정 웹사이트와 관련된, 보통 웹브라우저에서 URL 앞에 내보이는 16 ×16 화소 아이콘이라고. 아주 작은 아이콘인데 형식이 [~.ico]로 된 파일이랍니다. 아이콘은 [JPG], [GIF], [PNG] 모두 된다는데 파비콘은 [ICO] 확장자의 이미지 파일이라고요.

그래 찾아낸 사이트가 [favicon.io] 입니다. 이 사이트에서 이미지, 텍스트 그리고 이모티콘까지 제공한다면서 유일한 파비콘 생성 사이트라고 자랑 치네요.

favicon.io 홈페이지

저의 경우는 이미 만들어진 64 ×64 픽셀의 PNG 파일을 이용해서 만들어 보겠습니다. 아래 파일이 64 ×64 픽셀의 PNG 파일입니다.

이미지

이미지로 파비콘 만들기

위 이미지를 이용하여 파비콘을 만들기 위해서 이미지에서 파비콘 생성 메뉴를 선택합니다. 다음과 같은 창에 변환기 아래를 클릭하여 파일을 선택하던지, 마우스로 이미지를 끌어올리던지 하면 됩니다. 저는 클릭하여 이미지를 선택했습니다.

바로 파비콘이 생기면서 다운로드 버튼 앞에 이미지로 나타나군요. 다운로드 버튼을 클릭하면 압축된 파일 [favicon.io.zip] 파일이 받아집니다. 그 안에 여러 크기의 이미지 파일을 볼 수 있네요.

만들어진 파일 다운로드 창

만들어진 압축파일을 다운로드하여 풀었습니다. 다음과 같은 파일들이 보입니다. 그중에 하나가 [favicon.ico] 이름의 파비콘 파일이군요. 나머지는 PNG 파일로 다양한 사이즈를 제공하고 있습니다.

192×192

512×512

apple-touch-icon

16×16 아이콘	32×32 아이콘

텍스트로 파비콘 만들기

텍스트는 [즐], 글꼴 색은 하얀색, 배경색은 [#209CEE]. 글꼴은 나눔고딕을 선택하고 다운로드 버튼으로 내려받습니다.

텍스트로 파비콘 만드는 창

역시 이미지로 만들 때와 마찬가지로 압축파일로 내려받습니다. 이것을 풀어보니 이미지에서 받은 것과 동일한 종류의 아이콘과 파비콘이 만들어졌군요.

만들어진 아이콘과 파비콘

만들어진 이미지 중에서 하나인 [favicon.ico]가 파비콘 파일입니다.

이모티콘 파비콘을 사용하려면

오픈 소스 프로젝트인 Twemoji에서 제공된 이모지를 파비콘으로 사용할 수 있는 방법입니다. 사용하기 전에 라이선스를 검토하라는 당부가 있네요.

이모티콘으로 파비콘 사용

여러 카테고리로 분류되어 있기 때문에 골라서 자신의 블로그 성격에 맞는 이모티콘을 선택하면 되겠네요. 저의 경우는 '즐거운 인생'이라는 블로그 성격에 어울리는 웃는 얼굴을 택했습니다.

웃는 눈으로 빛나는 얼굴 선택

다음 단계로 진행하니 다양한 크기의 파비콘을 보여주군요. 압축파일로 다운로드합니다.

이모티콘으로 만든 파비콘 다운로드

다운로드하여 압축을 푼 결과입니다. 역시 위와 마찬가지로 다양한 사이즈의 아이콘과 파비콘 파일을 획득하게 되는군요.

이모티콘으로 만들어진 다양한 아이콘과 파비콘

티스토리에 파비콘 적용

티스토리에 파비콘을 적용하는 것은 티스토리 블로그의 관리창에서 아래에 있는 블로그 메뉴를 선택합니다. 가장 나중에 만든 이모티콘으로 제작된 파비콘을 올렸습니다. 웃는 낯으로 반짝이는 파비콘이 올라갔습니다.

이모티콘으로 만든 파비콘

파비콘처럼 항상 웃는 '즐거운 인생'이 되기를 희망합니다.

그럼 항상 웃기를 권하면서...... 이만.