본문 바로가기
블로그팁/TISTORY

티스토리 블로그 파비콘(Favicon) 변경 및 설정하는 방법

POSTED BY© 듀륏체리 2023. 8. 7.

 인터넷 웹 브라우저의 주소창에 표시되어 웹사이트나 블로그를 대표하는 아이콘인 파비콘(favicon: favorites + icon)은 인터넷 익스플로러는 '*.ico'와 '*.png', '*.gif', 사파리는 '*.jpeg', ' 크롬은 '*.animation gif', 파이어폭스와 오페라는 '*.apng' 이미지 파일을 추가적으로 표시할 수 있습니다. 티스토리 블로그 파비콘은 초기에 물방울 모양의 주황색에서 '' 둥근 문자 모양의 주황색으로 변경 되었다가, '⦁' 둥근점 5개로 구성되어 있는 'T'에서 다시 둥근문자 모양의 주황색 ''로 다시 변경 되었는데, TISTORY는 Blog의 주제를 상징할 수 있는 아이콘과 이미지를 이용하여 Favicon을 변경하여 사용할 수 있습니다.

 

tistory logo

 

1. How to change and set up TSTORY Blog Favicon

How to change and set up TSTORY Blog Favicon

 

 티스토리 블로그 파비콘 변경하는 방법은 먼저, TISTORY 계정에 로그인 한 후 '🏠 블로그 관리 홈' 좌측 메뉴 하단 ' 관리'의 '블로그' 항목을 선택 합니다. 참고로, Favicon으로 사용할 '*.ico'와 '*.png', '*.gif' 포맷의 정사각형 이미지 파일을 미리 준비해야 합니다. 

 

티스토리 블로그 설정

 

 TISTORY 블로그 관리에서는 블로그 대표 프로필 이미지와 이름, 닉네임과 설명, 기본 도메인 주소 설정과 가비와와 후이즈 등에서 구입한 개인 도메인도 연결 설정 할 수 있으며, 블로그 설정의 '파비콘 파일형식 ICO' 우측의 '불러오기' 버튼을 클릭하여 시스템에 저장되어 있는 아이콘 파일 '*.ico' 또는 '*.png' 이미지 파일을 불러오기 다음 '변경사항 저장' 버튼을 누르면, 티스토리 파비콘이 변경 됩니다.

 

반응형

 

2. 티스토리 파비콘 설정하는 방법


티스토리 스킨 편집

 

 TISTORY 블로그 Favicon 설정하는 방법은 먼저, TISTORY 계정에 로그인 한 후 '🏠 블로그 관리 홈' 좌측 메뉴 하단 '꾸미기'의 '스킨 편집 ♐' 항목을 클릭하면, 브라우저의 새 탭으로 '스킨 편집' 메뉴가 활성화 됩니다.

 

티스토리 HTML 편집

 

 티스토리 스킨 편집이 새 탭으로 활성화 되면, 좌측에는 미리 보기 우측 페이지에서는 블로그 세부 설정과 함께 사용하고 있는 스킨 이름 'ex. Book Clib'을 확인할 수 있고, 스킨 이름 우측 썸네일 이미지 아래의 'html 편집' 버튼을 클릭합니다. 참고로 스킨 편집 메뉴에서는 글 수와 목록 구성 요소의 홈 설정 과 글목록 수 등의 기본 설정, 홈 프로모션과 사이드바 위치, 리스크 타입과 푸터 설정 등 추가 설정을 할 수 있으며, 세부 옵션을 사용하고 있는 스킨에 따라 차이가 있습니다. 

 

티스토리 파일업로드

 

 TISTORY 블로그 'html 편집' 버튼을 클릭하여 우측의 '스킨 편집' 메뉴에 'HTML' 편집 페이지가 활성화 되면, 상단의 '파일업로드' 항목을 클릭한 후 하단의 '✚ 추가' 버튼을 선택하여 파비콘으로 사용하는 '*.ico' 또는 '*.png' 파일을 불러오기 하여 업로드 합니다. Favicon이 업로드 되면, 파일 목록의 'images/*.ico' 파비콘에 마우스 오른쪽 버튼을 눌러 '링크 주소 복사'를 선택하여 클립보드에 저장된 이미지 주소를 메모장에 붙여넣기 합니다.

 

메모장 HTML 편집

 

 티스토리 '파일업로드' 업로드 한 'images/*.ico' 파비콘에 마우스 우클릭 후 '링크 주소 복사'를 선택하여 클립보드에 저장된 이미지 주소'를 '<link rel="shortcut icon" href="복사한이미지주소">'의 '복사한 이미지 주소' 부분에 붙여넣기 합니다. 참고로, 첨부 파일의 'favicon.ico.txt' 텍스트 문서를 다운로드 받아 편집하여 사용하면 됩니다.

 

티스토리 HTML 편집

 

 티스토리 '블로그관리 홈 - 스킨 편집 - HTML'에서 '<link rel="shortcut icon" href="복사한이미지주소">' 코드를 '<head> ~ </head>' 사이에 붙여넣기(Ctrl + V)하여 입력하고 상단 우측에 '적용' 버튼을 누르면, 티스토리 파비콘 설정이 적용 됩니다. 참고로, 'Favicon.ico' 파일은 정사각형의 '*.png' 이미지 파일을 이용하여 변경하거나 설정할 수 있으며, 업로드하거나 적용하는 '*.png' 이미지 포맷이나 확장자를 '*.ico'로 변경하거나 그대로 사용하여도 파비콘이 적용되며, Favicon은 블로그 관리에서 업로드 하는 방식에서는 지구본 모양으로 표시되는 경우가 있어 HTML 코드를 추가하는 방법 2가지를 모두 적용하여 사용하고 있습니다.

반응형

댓글