본격적인 웹 프론트엔드 개발 TIL(Today I Learned)을 블로그에 기록하기 전에 블로그 카테고리나 스킨 같이 초기 설정을 해주어야 할 부분들이 심심치 않았다. 한번에 모든 설정을 건드리기에는 아직 티스토리 플랫폼에 대한 이해도가 부족해서 힘들겠다는 생각을 했다. 카테고리를 만들고 나서 당장 먼저 눈에 보인 브라우저의 최상단, 블로그의 간판이 되어 줄 '파비콘'부터 적용해보고 싶었다.
1. 디자인툴로 파비콘 제작하기
우선, 티스토리 블로그에 적용할 파비콘을 만들어보았다. 각자 편한 디자인 툴을 이용하면 되는데 나는 어도비 일러스트레이터 2022를 활용해서 192 x 192 px의 PNG 파일(or JPG)을 제작했다. 아주 기본 도형으로만 구성된. 어도비는 2년 가까이 구독 중이지만 사용 빈도가 적어서 실력은 제자리걸음인 건 안 비밀. 🤨
2. ico 파일로 변환하기
만들어진 PNG 혹은 JPG파일을 파비콘으로 적용하기 위해서는 .ico 파일로의 변환이 필요하다. 아래는 변환을 쉽게 해주는 사이트 링크이다.
JS PNG to ICO 변환기.
PNG를 ICO로 변환, 온라인, 설치 없음, 파일 업로드 없음
png2icojs.com
링크로 이동하면 위와 같은 창이 보일텐데, 파일 선택을 눌러 만든 이미지 파일을 넣어주고 크기를 선택해서 변하게 하다 버튼을 눌러준다.
변환이 되면 이렇게 파일이 생성된 것을 확인할 수 있다. 나는 이전에 다른 사이트에서 테스트 변환을 했어서 크기별 png파일이 보이는데, 무시해도 좋다. 위에 첨부해 둔 사이트에서의 변환이 가장 간결하고 사용성이 좋았다.
3. 블로그에 적용하기
'설정 - 관리 - 블로그' 경로를 이용하면
파비콘 설정 화면을 볼 수 있는데 아까 만든 42 x 42 px. ico 파일을 불러와서 변경사항 저장을 해주면
.
.
.
두둥!
완성이다.
<포스팅 한줄평>
첫 포스팅인데 굉장히 재밌다. 별 것 아닌 정보일 수 있지만 글을 쓰면서 한번 더 머릿속에서 정리가 되는 기분이 들었다.