티스토리에 파비콘(favicon) 달기
티스토리에 파비콘(favicon) 달기
인터넷을 사용하다보면 웹브라우저 주소창에 아이콘이 표시되는 것을 볼수 있습니다.
예를 들어 네이버 같은 경우 다음과 같이 녹색의 ’N’자 아이콘이 주소창에 표시됩니다.
이렇게 주소창에 표시되는 아이콘을 파비콘(favicon) 이라고 합니다.
즐겨찾기 아이콘. 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 주소창에 조그만 아이콘으로 표시되어 있다. 아이콘 에디터로 16x16 크기의 적당한 아이콘을 만든 후 그 이름을 favicon.ico로 한 다음 웹 사이트의 루트 디렉터리에 갖다 넣으면 된다.
출처 : [네이버 지식백과] 파비콘 [favicon] (IT용어사전, 한국정보통신기술협회)
그럼 이러한 파비콘을 내 블로그에 다는 방법을 알아보도록 하겠습니니다.
1. 파비콘 만들기
우선 파비콘으로 만들 이미지를 준비합니다.
저는 제 블로그에 사용되는 커리컬처를 준비하였습니다.
이미지를 준비한 후 다음의 파비콘 생성 사이트를 방문합니다.
준비한 이미지 파일을 드래그해서 끌어다 놓습니다.
잠시후에 파일이 만들어 집니다. 만들어진 파일의 종류는 ICO, ICNS, PNG가 있습니다.
여기서 [ICO] 아이콘을 클릭합니다.
[다운로드] 폴더에서 다운받은 파일을 확인할 수 있습니다.
파일 이름을 favicon.ico로 변경합니다.
2. 블로그에 파비콘 설치하기
본인의 블로그에서 [관리자 > 기본 정보]로 이동합니다.
[아이콘] 항목의 [파비콘]에서 [찾아보기] 버튼을 클릭한 후 앞에서 만든 파비콘을 선택합니다.
[파피콘]이 추가된 것을 확인할 수 있습니다.
[저장] 버튼을 클릭합니다.
3. 브라우저에서 파비콘 확인하기
이제 브라우저에서 파피콘이 적용되었는지 확인해보겠습니다.
그런데 Safari에서는 적용이 안됩니다.
하지만 Chrome을 실행 시켜보면 적용이 잘 되는것을 확인할 수 있습니다.
또한 Internet Explorer 에서도 잘 적용되는 것을 확인할 수 있습니다.
이상하게 Safari에서만 적용이 안됩니다.
블로그의 주소를 즐겨찾기에 넣어보았습니다.
마찬가지로 파피콘은 나타나지 않습니다.
하지만 아이폰에서는 파피콘이 나타납니다.
4. 파피콘 추가 설정하기
이제 Safari 에서 주소창에 파피콘이 나타나게 설정을 해 보겠습니다.
다시 블로그의 [관리자 > HTML/CSS 편집]으로 이동합니다.
[파일 업로드] 탭을 선택합니다.
추가버튼을 클릭하여 앞에서 만든 파피콘을 추가합니다.
파비콘이 추가되었습니다.
이제 HTML/CSS 탭을 선택합니다.
여기서 다음과 같은 favicon.ico 링크 부분을 찾습니다.
<link rel="shortcut icon" href="https://hjsong.net/favicon.ico" />
이 부분을 복사하여 바로 아래줄에 붙여 놓고 아래와 같이 수정합니다. 잘못 수정할 때를 대비해서 기존 내용을 보관하기 위해서 입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="내가 살아가는 풍경" href="https://hjsong.tistory.com/rss" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<!-- <link rel="shortcut icon" href="https://hjsong.net/favicon.ico" /> -->
<link rel="shortcut icon" href="./images/favicon.ico" />
<title>내가 살아가는 풍경 :: 티스토리에 파비콘(favicon) 달기</title>
</head>
이제 다시 Safari에서 확인해 봅니다. 파피콘이 적용되었습니다.
즐겨찾기에도 파피콘이 적용된 것을 확인할 수 있습니다.
참고) 다양한 아이콘을 다음의 사이트에서 얻을 수 있습니다.
'IT세상 > 블로그' 카테고리의 다른 글
| 네이버 블로그 이미지 테두리 추가하기 (0) | 2021.12.27 |
|---|---|
| 모바일에서 네이버블로그 예약발행 하기, 예약발행 수정하기 (0) | 2021.12.24 |
| 네이버 에드포스트 등록 성공 (0) | 2021.12.11 |
| 방문자 수? (2) | 2014.10.20 |
| 티스토리에 트위터 위젯 달기 (1) | 2014.02.22 |