티스토리, 파비콘 (Fabicon) 만들기

티스토리 블로그의 커스터 마이징(Customizing) 작업이 서서히 완료단계에 들어가고 있습니다.

물론 제가 아는 범주 내에서의 작업들입니다.

앞으로 블로그 작업을 해가면서 새로운 것들을 배우게 되면 계속 시도를 해 보면서 공유를 해 가도록 하겠습니다.

오늘은 제 블로그의 파비콘을 만드는 작업에 대해서 기술을 해 보고자 합니다.

1. 파비콘 (Fabicon)이란?

Fabicon은 Favorite icon이 단축 표현입니다. 가장 좋아하는 아이콘이라는 말이 되겠네요.

"가장 좋아한다는 말" 답게 가장 먼저, 가장 대표적으로 표현되는 아이콘을 이야기합니다.

웹브라이저 창 (Window)의 상단에 보이는 작은 아이콘으로 Website icon, Tab icon, URL icon이라고도 불리는 것입니다.

바로 아래 그림에서 보이는 것입니다.

만일 자신의 블로그에 파비콘이 없으면 티스토리 대표 아이콘이 그 자리에 나타납니다.

아래 그림처럼 말입니다.

이왕이면 자신만이 파비콘을 만들어서 그것으로 표시가 되도록 하는 것이 좋겠지요.

2. 파비콘 파일 포맷?

파비콘 등록은 "티스토리 관리자"의 "블로그 설정"에서 지정할 수가 있습니다.

바로 아래 화면입니다.

내용을 보면 파비콘은 파일 형식이 ICO 포맷만 된다고 되어 있습니다.

ICO 포맷은 비교적 생소한 이미지 파일 포맷입니다.

JPG, PNG, BMG, TIF 등은 비교적 친숙하지만 ICO는 드물게 사용됩니다. 이 것은 마이크로소프트 (Microsoft)가 윈도즈용 아이콘을 위해서 만든 파일 포맷입니다.

윈도즈 화면에서 보이는 다양한 아이콘들이 이 포맷으로 만들어진 이미지라는 정도로 이해하면 되겠습니다.

어쨌든, 티스토리에서 파비콘을 등록하기 위해서는 ICO 파일이 필요한데 문제는 우리가 ICO 포맷의 파일을 직접 제작하기 어렵다는 것입니다. '

그래서 이용하는 방법이 일반적으로 만들기 쉬운 PNG 파일로 파이콘 이미지를 먼저 만들고 이것을 "PNG to ICO 변환 사이트"의 도움을 받아 ICO 포맷으로 바꾸는 것입니다.

3. PNG to ICO 파일 변환 사이트

지난 포스팅에서 제 블로그의 로고를 만든 과정을 소개했습니다.

2020/03/28 - 티스토리, 블로그 로고 만들기

이렇게 만들어진 로고는 PNG 포맷으로 되어있는데 이를 아래 사이트를 활용해서 ICO 파일로 변환해서 파비콘 (Fabicon)으로 등록하였습니다.

제가 활용한 사이트는 아래 사이트입니다. 이 사이트 외에도 다양한 사이트들이 있으니 구글을 활용해 보시기 바랍니다.

https://convertico.com/

ConvertICO.com - Convert PNG to ICO and ICO to PNG files

This free online icons converter allows you to convert PNG to ICO files with ease.

convertico.com

4. 변환 & 등록 방법

변환 방법은 매우 간단합니다. 아래 그림의 번호를 참고하시기 바랍니다.

1) 아이콘 레이어 사이즈를 결정해 주고, 저는 48x48로 했음

2) 로고 파일 (PNG 포맷)을 폴더에서 이곳으로 드래그 & 드롭을 함

3) 잠시 후에 오른쪽 3번 영역에 변환된 파일이 보이므로 이를 화살표를 눌러서 다운로드하면 됨.

이때 중요하는 것은 티스토리에서 파비콘을 등록하기 위해서는 10KB 사이즈 이하가 되어야 하는데

이에 맞추려 하고 하면 잘 못하면 이미지가 매우 흐려집니다. 제 경우는 PNG 파일이 480x480이었고, 레이어 사이즈를 48x48로 하니 만족할 만한 수준으로 만들 수 있었는데,,, 이미지의 내용이나 사용 색상의 숫자 등에 영향을 받을 수 있으므로 여러 번 시도를 해서 좋은 이미지를 찾아내도록 합니다.