티스토리 파비콘 간단하게 만드는 방법 (How to Make Tistory Favicon Simple)

---

 

• 파비콘이란?

Favorite Icon의 줄임말로, 즐겨찾기 아이콘이라고 생각하면 됩니다. 바로 요렇게요

빨간색 동그라미 안 아이콘이 바로 '파비콘'

 

티스토리 블로그에서는 이 파비콘을 우리 마음대로!! 설정을 할 수가 있습니다.

오늘은 우선 간단하게 만들어보고, 나중에 기회가 되면 직접 디자인해서 특별하게 만들어봅시다.

 

---

www.favicon.io/favicon-generator/

The best Favicon Generator (completely free)

 

사실 너무 쉬워서 사이트 들어가자마자 어떻게 하는지 단박에 알 수 있으신 분도 계실 거예요.

그래도 설명과 작은 팁 하나를 알려드릴게요!

저와 함께 만들면 오뚜기 3분 요리보다 더 빨리 만들 수 있습니다. 정말로요.

 

 

홈페이지의 첫 화면

 

사이트에 들어가면 이렇게 기본 설정이 되어있습니다.

 

 

• ㉠ Text : 파비콘 안에 들어갈 문자를 입력합니다.
• ㉡ Background : 문자 뒤 배경 모양을 설정합니다.
• ㉢ Font Family : 글꼴을 설정합니다.
• ㉣ Font Size : 문자의 크기를 조절합니다.

 

상단 Previwe 부분이 나의 파비콘입니다. 그리고 오른쪽에서 색을 고르시면 됩니다.

색상 부분에서 왼쪽 박스는 문자의 색상, 오른쪽 박스는 배경의 색상입니다.

다른 색을 원하시는 분은 다음 색상표를 참고하시면 됩니다. 색상표는 아래 링크에서 보시면 됩니다.

네이버에 '색상표' 검색하시면 아래 처럼 나옵니다. 링크는 여기를 클릭해주세요.

 

 

색상표를 참고해 내가 원하는 색을 골랐으면, 색 옆 #xxxxxx 문자를 복사합니다.

 

 

그리고 붙여 넣기 하면 색상을 바꿀 수 있습니다.

 

 

문자는 B, H, E 등 하나만 되는 줄 알았는데 제한이 없더라고요.

 

 

문자의 길이에 대한 제한은 없지만, 너무 길게 써서 배경 영역의 범위를 벗어나면 문자는 잘려서 보입니다.

 

 

Bliss를 써봤습니다. 꽤 긴데 되네요!!! 대신 문자 크기를 줄였습니다.

폰트 : Euphoria Script

 

 

똑같은 조건에 다른 폰트를 써봤는데, 이번에는 문자가 잘립니다.

폰트에 따라 맞지 않는 경우도 있습니다.

폰트 : El Messiri

즉, 문자를 길게 쓰실 분은 사이즈를 줄여야 하고, 맞는 폰트를 찾아야 합니다.

폰트는 거의 1398559382개 정도 있어서 다 훑기는 힘듭니다.

그냥 랜덤으로 클릭클릭 몇 번만 하면 맞는 폰트가 나옵니다.

 

 

 

또, 한글도 가능합니다.

다만, 한글은 폰트 지원이 안돼요. 어떤 폰트를 클릭해도 저 폰트만 나타나는 것을 볼 수 있습니다.

그래도 한글은 예쁘네요.

 

나만의 파비콘을 만들었다면 상단 파란 배경의 다운로드 버튼을 클릭합니다.

 

 

압축된 폴더 하나를 다운로드하게 되는데 압축을 풀면 7개의 파일이 들어있습니다.

너무 친절한 거 아닌가요? 사이즈마다 생성해주다니!

 

 

이제 설정에서 파비콘 불러오기를 클릭해서 다운로드한 파비콘을 적용시켜봅시다.

 

 

여러 파일이 있지만 우리가 쓸 파일은 단 1개입니다. 확장자명은 ICO 입니다.

파일 이름은 favicon 으로 생성이 됩니다.

 

 

그리고 변경사항 저장을 하면?

 

 

요렇게 적용이 된 모습을 볼 수 있습니다!

내 블로그에 나만의 파비콘을 적용할 수 있다니 두근두근 합니다. ㅋㅋㅋㅋㅋ

나중에 로고 같은 것을 정하고 파비콘도 더 예쁘게 바꿔봐야겠어요.

그런데 글자만 보이게 하려고 배경을 일부러 하얗게 했는데 파비콘 뒤에 또 회색 배경이 있네요? 하하ㅏ하

왜죠????

 

---

1. 폰트와 사이즈 조절로 문자는 적당히 길게 가능하다.

2. 한글도 가능하지만 폰트 선택은 안된다.