티스토리의 파비콘(Favicon) 을 적용해 보자.

다시 블로깅을 본격적으로 시작해 볼까 하는 마음에서, 이전에 가지고만 있고 썩혀두던 도메인을 블로그에 연결하고 본격적으로 글을 작성하고 있다. 이전엔 네이버 블로그나, 티스토리의 전신인 텍스트큐브, 혹은 워드프레스 등을 이용하여 블로그를 운영하고는 했는데.. 요즘은 예전보다 제약도 많이 줄어들었고, 별도로 설치를 하지 않더라도 자유도가 꽤 많이 높아진 것 같아 훨씬 쾌적한 듯 하다. 도메인 연결도 클릭 몇 번으로 순식간에 해결되었으니 말이다.

그 와중에, 전체적인 디자인은 조금 천천히 고려하더라도 세부적인 것을 만져보고 싶은 마음에 설정에 들어갔더니, Favicon 을 삽입할 수 있는 것 까지 있어 조금 놀랐다. 

Favicon 이란, 해당 홈페이지에 들어왔을 때, 혹은 웹사이트에 대한 즐겨찾기, 바로가기 등을 지정하였을 때 생성되는 아이콘을 뜻한다. 개인 홈페이지를 운영할 때, Favicon 을 설정하지 않으면 무언가 허전한 느낌이 들었던 기억이 있는데, 그 것 까지 티스토리에서 제공한다니 안 해볼 수 없지 않겠는가.

이게 전부 파비콘(Favicon) 이다.

준비물은, 파비콘으로 활용하고자 하는 적당한 크기의 이미지. 이 웹사이트에서는 700x700 이상의 크기를 권장하는 듯 하지만, 단순 웹사이트 파비콘으로만 이용하려면 그정도까지 클 필요는 없다. 디자인에 따라 다르겠지만, 배경화면이 투명한.. 일명 '누끼' 가 따져있는 PNG 형식의 영상이면 금상첨화일 듯 하다. 필자는 이미 테크토스트라는 로고 겸 아이콘을 예전에 만들어 둔 것이 있어, 바로 그냥 이용했다.

요즘은, 이런 간단한 정도는 웹사이트를 이용해 간단하게 프로세싱해주는 곳이 많아, 그 중 하나를 이용하도록 한다. 이용한 웹사이트는 real favicon generator 라는 사이트. https://realfavicongenerator.net/

방식은 매우 간단하다. 

• 이미지를 업로드하고, 

• 활용도에 따라 옵션을 선택하고 

• 다음을 누르면

• 만들어진 이미지를 압축파일 형태로 다운받을 수 있다.

웹사이트에서 저 부분을 클릭하여, 파일을 업로드 한다. 

필자가 업로드한 파일. 배경화면이 투명으로 되어 있기 때문에, 투명을 대표하는 저런 체크무늬 배경으로 저장되어 있다. 영상이 꼭 정사각형일 필요는 없다. 본 영상도 원래는 가로로 긴 영상이었다. 영상의 형태가 정사각형이 아닌 영상을 업로드 했는데, 자동으로 정사각형으로 위 아래로 넓혀주는 편리한 기능이 있다. 

 

다음 화면으로 넘어가면, 생각보다 꽤 많은 옵션이 있다. 해당 아이콘을 iOS, 안드로이드, 윈도우 메트로 용  앱 개발에도 활용할 예정이라면 섬세하게 조건을 구경하는 것도 괜찮을 듯 하다. 본 테크토스트는 개인사업자로, 앱 개발와 웹 개발도 도맡아서 진행하고 있기 때문에 한 바퀴 둘러 보았으며, 각 옵션에 대한 조절 결과가 생각보다 꽤 디자인 면에서 맘에 들었다. 아이콘을 자동으로 흑백 비트맵화 시켜준다던지, 자동으로 그림자 효과를 살짝 넣어 준다던지, 옆에 공백을 추가하여 아이콘을 더 가운데 몰려 보이게 만든다던지 하는, 실제로 손으로 하기엔 귀찮아서 편리한 기능들이 좀 있는 편이다.

그러나, 본 목적은 단순이 티스토리에 적용하기 위한 ICO 확장자의 영상을 얻으면 되는 것이므로, 중간 과정은 전부 넘어가도록 하자. 

결과 압축파일은 다음 버튼을 눌러 다운받을 수 있다. 다운받은 압축파일을 열어, favicon.ico 파일만을 추출한다. 우리가 필요한 파일은 이 파일 뿐이다.

해당 파일을, 관리 -> 블로그 메뉴로 들어가서, 밑에 있는 파비콘 부분에 업로드 하면 완성.

적용이 잘 되었는지, 블로그에 접속하여 확인한다. 

역시 배경이 투명인 아이콘이 이모저모 깔끔하게 활용된다. 그림 혹은 일러스트를 제작할 때 꼭 참고할 것.