파비콘 만들어서 티스토리 블로그에 설정하는 방법

안녕하세요. 오늘은 파비콘을 만들고 티스토리 블로그에 적용하는 법에 대해 알아보고자 합니다.

---

파비콘이란? 

웹사이트를 열면 주소창이나 탭바, 북마크가 열립니다. 아래 표시된 영역을 탭바라고 부릅니다. 

이 탭바 앞에 보시면 작은 그림들이 있는 걸 볼 수 있습니다. 이런 그림들을 파비콘이라고 부릅니다. 

 

파비콘이 필요한 이유?

특정 웹사이트라는 걸 식별하기 위한 그림입니다. 일종의 작은 간판들이죠. 

 

파비콘 만들기 

준비물: 로고, 그리고 파비콘 만드는 사이트 

 

아무래도 작게 보이는 그림이다 보니 작은 사이즈로 많이 만듭니다. 픽셀 기준 16x16, 32x32, 48x48 등의 사이즈로도 가능합니다. 요즘은 다양한 화면 크기의 기기들이 많으니 상황에 따라 맞는 사이즈로 할 건데요. . 보통 파비콘은 탭바에서 더 자주 보이기 때문이죠.

 

이제 파비콘을 만들어 보겠습니다. 

 

1. 로고를 준비합니다.

로고는 제 다른 블로그용 로고를 가지고 왔어요. 

 작아질 거기 때문에 명확하고 큰 글씨와 그림이 좋습니다. 

 

2. 이제 아래 주소로 들어갑니다. 파비콘을 만들어 주는 사이트예요.

https://www.favicon-generator.org/

Favicon & App Icon Generator

 

영어라고 당황하지 마시고 사진과 같이 파일 선택을 눌러 줍니다.

파일에서 파비콘으로 만들 로고 선택해 주시고 열기 누릅니다.

파일이 들어갔으면 파일 이름이 뜰 거예요. 그 옆에 Create Favicon을 누릅니다

또 영어로 이상한 문구들이 막 나옵니다. 무시하시고, 그림 옆에 Download the generated favicon을 클릭하세요

그러면 다운로드가 됩니다. 폴더에서 다운로드 폴더 들어가 주세요. 모르시겠으면 크롬 기준 창 오른쪽 위에 다운로드창을 클릭해 주시면 됩니다. 그러면 작은 창이 나오고 표시한 것처럼 오른쪽에 폴더 그림을 클릭해 주면 다운로드한 파일 위치가 나옵니다.

폴더에서 압축 꼭 풀어주세요.

이제 티스토리에 적용해 볼게요.

티스토리에 로그인하시고 관리에 들어가 주세요

쭉 내리면 관리 카테고리에 블로그라고 있습니다. 

마침 블로그 하나를 설정 중이어서 이거로 시연할게요. 

블로그 설정을 누르시면 아래와 같은 화면이 나옵니다. 조금만 내리시면 파비콘이라고 되어 있을 거예요. 거기에 불러오기를 클릭합니다. 

불러오기에서 아까 다운 받고 압축까지 푼 폴더 들어갑니다. 파일 형식은 ICO만 되는 거라 ICO 파일만 보일 겁니다. 

열기 누르면 다시 파비콘이 적용된 게 보입니다. 

변경사항 저장까지 꼭 눌러 주세요!

 

파비콘 적용까지는 시간이 걸리니 한 시간쯤 뒤에 확인하시면 됩니다. 

 

파비콘을 만들어서 티스토리에 설정, 적용까지 해 보았습니다.