티스토리에서 파비콘 등록하는 방법 및 무료 파비콘 생성 사이트

운영하고 있는 티스토리에 파비콘을 등록하는 방법과 파비콘을 무료로 생성할 수 있는 사이트를 알아보겠습니다. 우선 파비콘을 등록하기 전에 파비콘이 무엇인지 간단하게 설명하고 넘어가겠습니다.

 

파비콘은 위 이미지에 보이는 것처럼 웹사이트에서 사용할 수 있는 작은 사이즈의 아이콘으로 웹 브라우저(크롬, 엣지, 사파리 등), 북마크, 검색 엔진(구글, 네이버 등)에 표시됩니다. 제가 운영 중인 블로그의 파비콘은 한 눈에 알아보기 어려워 잘못 만든 파비콘이지만 옛날에 만들어서 계속 사용하고 있습니다. 파비콘을 만들 때는 한 눈에 알아보기 쉽도록 만드는 것이 좋습니다.

 

파비콘은 주로 16x16 또는 32x32이 사이즈의 .ico 파일 형식을 사용합니다. 최근에는 .png나 .svg 파일도 파비콘으로 사용할 수 있지만 티스토리에서는 아직 .ico 파일로만 파비콘을 등록할 수 있습니다. 파비콘을 통해 해당 사이트를 쉽게 구분할 수 있어 UX(사용자 경험)에서도 이점을 얻을 수 있습니다.

 

파비콘 무료 생성 사이트

구글 검색에서 "favicon"을 검색해 첫 번째에 노출되는 favicon.io 사이트를 클릭해 사이트에 접속해주세요. 아래 링크를 클릭해 해당 사이트에 바로 접속할 수도 있습니다.

https://favicon.io/

Favicon.io - The Ultimate Favicon Generator (Free)

 

파비콘 만들기

사이트에 접속하면 이미지, 텍스트, 이모지를 변환해 파비콘을 만들 수 있습니다. 이 글에서는 이미지, 텍스트로 파비콘을 만드는 방법만 다루겠습니다.

 

텍스트로 파비콘 만들기

우선 텍스트로 파비콘을 만드는 방법부터 알아보겠습니다. 사이트에서 2번 째 Text를 클릭하면 위와 같은 페이지가 보이게 됩니다. 이 페이지에서 파비콘에 넣을 텍스트를 입력해줍니다. 한글도 입력할 수 있지만, 한글은 폰트(글꼴)가 제대로 반영되지 않을 수도 있으니 영어를 입력해 주는 것이 좋습니다. 원하는 텍스트를 넣었다면 백그라운드(배경)의 모양과 색상도 지정해 줄 수 있습니다. 사각형, 모서리가 둥근 사각형, 원 3가지 모양 중에 선택하고 원하는 백그라운드 색상을 팔레트에서 선택하거나 헥사 코드로 넣어주면 됩니다.

 

마지막으로 폰트와 폰트의 스타일을 설정해주면 됩니다. 원하는 글꼴, 굵기, 사이즈를 선택하고 우측 상단에 있는 다운로드 버튼을 클릭해줍니다. 파일을 다운로드하면 ico 파일, 앱에서 사용할 수 있는 png 파일 등이 압축 파일로 다운됩니다.

 

이미지로 파비콘 만들기

파비콘에 사용할 이미지 파일이 있다면 더 쉽게 파비콘을 생성할 수 있습니다. 파란색 그림자가 표시된 영역을 클릭한 후 파비콘에 사용할 이미지를 선택해주세요.

 

이미지를 선택하면 좌측 하단에 선택한 이미지가 미리보기로 표시됩니다. 다운로드 버튼을 누르면 텍스트로 파비콘을 만들 때와 마찬가지로 압축 파일이 다운됩니다.

 

티스토리에 파비콘 등록하기

파비콘을 만들었다면 블로그관리에서 블로그를 선택하면 아이콘과 파비콘을 등록할 수 있는 영역이 있습니다. 아이콘에는 만들었던 파일 중 .png 형식의 파일을, 파비콘에는 .ico 파일을 불러오기 버튼을 눌러 넣어주면 됩니다.

 

위 이미지처럼 파일을 넣은 후 변경사항 저장 버튼을 눌러주면 파비콘이 적용되게 됩니다.

 

좌측이 파비콘을 적용하기 전, 우측이 파비콘을 적용한 후의 이미지입니다. 변경사항 저장 버튼을 눌렀는데 좌측 이미지처럼 보인다면 Ctrl + F5 키를 눌러 페이지를 새로고침해주면 파비콘 적용됩니다.

 

사이트에서 보이는 것과는 별개로 구글이나 네이버 등 검색 엔진에서는 파비콘이 즉시 반영되지 않고 1~2주 후에 변경됩니다.