티스토리 파비콘(favicon)을 설정하면서 시간을 꽤나 썼기 때문에 다른 분들에게 도움이 되고자 이 글을 씁니다:)
파비콘(favicon)은 아래 사진처럼 탭 상단에 위치하고, 웹사이트를 대표하는 아이콘입니다.
AI로 이미지를 만들고, 그 이미지를 파비콘으로 설정하는 과정을 지금부터 설명하겠습니다!
1️⃣ 파비콘 이미지 만들고, 저장하기
티스토리에 파비콘을 설정하기 위해 처음으로 해야 하는 것은 파비콘으로 만들 이미지를 생성하는 것입니다.
저의 경우에는 bing image creator를 사용해서 이미지를 만들었습니다.
다른 이미지 AI 툴을 쓰시는 게 있다면 그것을 사용해도 좋습니다.
https://www.bing.com/images/create?FORM=GDPUP1
Bing
Bing은 지능적인 검색 기능은 사용자가 원하는 정보를 빠르게 검색하고 보상을 제공합니다.
www.bing.com
microsoft 계정으로 로그인을 하신 후, 원하는 이미지의 설명을 입력하고 만들기 버튼을 클릭합니다.
저 같은 경우에는 "흰색 배경, 무지개 색으로 된 알파벳 C 로고 아이콘"이라고 입력을 했습니다.
흰색 배경으로 한 이유는 나중에 배경제거를 하기 위함입니다.(배경 색상이 있으면 좋겠다 하시는 분은 원하는 색상으로 하시면 되세요!)
생각보다 정말 좋은 결과물들이 나왔네요.
바로 이 녀석으로 저장을 했습니다.
2️⃣ 저장한 이미지 배경제거하기
개인적인 생각으로는 배경이 없는 편이 더 깔끔하다고 생각하기 때문에 배경제거를 했습니다.
배경제거를 안 하고 싶으시면 이 과정은 넘어가 주세요~
요즘은 배경 제거하는 무료 사이트들이 많아 버튼 몇 번을 누르면 배경제거를 할 수가 있습니다.
제가 사용한 사이트는 https://www.remove.bg/ko입니다.
아까 저장한 이미지를 업로드하고,
다운로드하시면 됩니다.
정말 깔끔하게 배경제거가 되었습니다. 만약에 원하는 대로 배경에 지워지지 않았으면 지우기/복원 기능을 이용해 주세요.
배경제거가 된 결과물입니다.
이제 설정하기까지 얼마 안 남았습니다!
3️⃣ 결과물을 ico 파일 형식으로 변환하기
결과물을 ico 파일 형식으로 변환해 주는 프로그램이 필요합니다.
저는 아래의 사이트를 사용했습니다. 다른 사이트들은 변환하고 나서 화질이 깨졌는데 이 사이트는 변환 후에도 선명했습니다.👍
X-Icon Editor
X-Icon Editor is an HTML5 application (based on <Canvas>) that allows you to create high resolution icons that lets your sites shine. With X-Icon Editor you can quickly get your site ready with a large icon which will be available for pinned sites and the
www.xiconeditor.com
이 사이트는 .jpeg 파일 형식은 import가 안되기 때문에 위에서 저장한 사진이 .jpeg이신 분들은 .jpg로 파일 형식을 변경해 주세요.
배경제거하신분들은 .png 파일 형식이라 문제없이 import 됩니다!
Import 버튼을 누르고,
아래의 과정을 거쳐
Export 버튼을 누르고
Export your icon을 누르면 ico 파일 형식의 이미지가 저장됩니다.
저장된 ico 파일입니다.
4️⃣ 티스토리 파비콘 설정하기
이제 만든 파비콘을 티스토리에 설정하기만 하면 끝입니다.
블로그 관리 > 관리 > 블로그 > 파비콘으로 들어와 아래 사진과 같이 하면 끝입니다.
짜잔! 파비콘 변경이 완료됐습니다!🙌
