나만의 티스토리 파비콘(Favicon) 만들기

파비콘이란?

파비콘은 웹사이트에 접속했을때 웹 브라우저에 맨 좌측에 나타나는 아이콘을 의미 합니다. 티스토리인 경우에는 붉은색 T 아이콘이 기본적으로 보여지게됩니다. 저는 이걸 저의 사이트 아이콘으로 바꿨습니다. 이때 사용하는것이 파비콘 아이콘입니다.

 

 

티스토리에 파비콘을 등록하는 방법은 아래와 같습니다. 먼저 티스토리 블로그 설정 화면으로 들어갑니다. 블로그 설정에 보시면 아이콘, 파비콘 불러오기 삭제 버튼이 있는데 기본적으로 아무것도 세팅하지 않았다면 파비콘은 티스토리 아이콘이 설정되어 있습니다. 

 

 

여기에 개인 파비콘 아이콘을 불러오기해서 선택해 주면 아래처럼 개인 블로그 아이콘이 나타나게 됩니다.

 

첫번째 방법: 파일 확장명 바꾸기

 

이렇게 할려면 먼저 파비콘 아이콘 파일이 있어야 됩니다.  기존에 PNG 형식의 파일이 있다면 그냥 확장자만 ico 로 변경해 주면 됩니다. 이 방법이 가장 간단합니다. 

 

파일 확장자 png > ico

 

파일 확장명이 보이지 않는다면 파일 탐색기에서 보기 메뉴를 클릭하고 아래의 표시 > 파일 확장명을 선택해 체크해 주면 파일 확장명이 보이게 됩니다.

파일 확장명 보는 방법

 

보통의 경우 파비콘 아이콘의 크기는 16x16 pixel을 사용한다고 합니다만 저는 개인적으로 48x48를 사용했습니다. 이유는 구글 검색에는 48x48 크기가 Standard 입니다. 구글 권장사항을 따르지 않으면 구글 검색에서는 아래처럼 파비콘이 적용되지 않게 나옵니다 

 

이미지의 크기를 알아보는 방법은 아래처럼 파일에서 마우스 오른쪽 버튼을 누른 후 속성 메뉴를 선택해서 들어갑니다.

파일 이미지 크기 보는 방법 속성 > 자세히

 

속성창에서 '자세히' 텝으로 가면 현재 사진의 크기가 나오게 됩니다.

48x48

 

두번째 방법: 웹사이트 이용하기

 

위 방법처럼 하기가 복잡한 경우 파비콘 형식으로 파일을 변환해 주는 웹 사이트가 있습니다. 무료로 변환해 주고 별도의 라이센스가 필요 없습니다. 

 

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

Favicon & App Icon Generator

 

변환하는 방법은 먼저 변환하고 싶은 파일을 선택해 줍니다.

 

파일 선택후 Create Favicon 버튼을 클릭하면 아래와 같은 화면이 나오면서 변환된 파일을 다운로드 받을 수 있습니다.

'Download the generated favicon' 를 클릭하면 사이즈 별로 변환된 파일들이 zip 파일로 압축되어 다운로드 됩니다. 압축을 풀고 그중에서 적합한 사이즈를 선택해서 사용하면 됩니다.

 

다운로드한 파일의 압축을 풀면 아래와 같은 다양한 변환된 파일들이 있습니다.

 

위 두가지 방법 중 편한것을 선택해서 파비콘을 적용해 주시면 됩니다.

 

아직도 구글 검색 결과에는 파비콘이 표시되지 않아요

 

파비콘을 48x48 사이즈로 등록해도 구글 검색 결과에 파비콘이 적용되지 않는 경우에는 한가지 더 세팅을 해 줘야합니다. 바로 HTML 을 직접 수정해 줘야합니다. 방법은 간단하니 아래와 같이 적용하면 됩니다.

 

우전 티스토리 스킨 편집으로 들어갑니다. 여기서 'html 편집' 버튼을 누릅니다.

 

아래 내용을 <header> </header> 테그 안에 넣어줍니다. 본인의 블로 풀 주소를 입력해주면 됩니다.

 

예를 들자면 저는 https://sixthyprojects.tistory.com 이 블로그 전체 주소입니다.

<link rel="icon" href="블로그 전체주소/favicon.ico">
<link rel="shortcut icon" href="블로그 전체주소/favicon.ico">

 

이렇게 적용하고 구글 서치 콘솔에서 색인 요청을 하면 됩니다. 서치콘솔에 등록하는 방법은 이전 포스팅을 참고하시면 됩니다.

2025.02.01 - [취미] - 🔍티스토리 블로그를 구글 검색엔진(Google Search Console)에 등록하는 방법