티스토리 블로그 아이콘 파비콘 다운 / 아이콘 파비콘 설정 (티스토리 / 블로그 / 팁 / 블로그 팁 / 아이콘 / 파비콘 / 아이콘 설정 / 파비콘 설정 / 아이콘 다운 / 파비콘 다운 / 아이콘이란? / 파..

이번엔 아이콘과 파비콘에 대해 알아보겠습니다.

먼저 아이콘에 대해 알아볼게요.

아이콘은 블로그에 댓글을 달거나 방명록에글을 남겼을 때 아이디 옆에 작은 그림이 표시됩니다.

이 그림을 바로 아이콘이라고 하는 거죠.

▲ 그리고 위 사진에서 빨간색 네모 안에 있는 그림과 같이

주소창 옆이나 즐겨찾기에 추가했을 때 나타나는 그림을 파비콘이라고 합니다.

그럼 본격적으로 아이콘과 파비콘을 설정하는 방법을 알아봅시다.

일단 아이콘과 파비콘을 설정하려면 이미지가 있어야하겠죠?

이미지는 직접 만드는 방법과 다운로드를 받는 두 가지 방법이 있습니다.

아이콘 / 파비콘 다운로드 : https://www.iconfinder.com/

저는 위 사이트에서 아이콘, 파비콘 이미지를 다운 받았어요.

이 사이트에서 양질의 이미지를 다운 받을 수 있기 때문에

저는 직접 만들지 않고 다운받았습니다.

▲ 위 사이트에 들어가시면 이런 화면이 뜨는데

검색창에 이름을 쳐주시면 그와 관련된 이미지들이 뜬답니다.

그 중에서 맘에 드시는 것을 다운받아주세요.

(유료 이미지와 무료 이미지가 있습니다. 저는 무료를 받았어요.)

▲ 저는 nation 이라고 검색어를 쳤더니 이런 것들이 나오네요.

맨 오른쪽에 있는 키보드 자판 같은 이미지를 다운로드 해 보겠습니다.

▲ 그러면 이런 화면이 뜨는데

우리는 아이콘과 파비콘을 설정해야하므로 두 종류의 이미지를 다운받아야 합니다.

위 사진에서 빨간색 네모 부분 안에 있는 것을 클릭해서 다운받아주시면 돼요

▲ 이렇게 폴더 하나를 만들어서 다운받았습니다.

▲ 그리고나서 티스토리 관리자 페이지에 들어가서

위 사진의 빨간색 네모 부분에 있는 기본 정보를 클릭하면

▲ 요런 화면이 뜨겠죠.

여기서 빨간색 네모 부분에 있는 찾아보기 버튼을 눌러서 아까 다운받은 이미지를 설정해주시면 됩니다.

여기서 파란색 네모 부분을 보시면

아이콘의 확장자는 jpg, gif, png 이고

파비콘의 확장자는 ico 입니다.

▲ 그러면 위 사진의 빨간색 네모 부분처럼 적용이 되었죠.

이제 저장을 눌러주세요.

그리고 잘 되었는지 확인해봅시다.

▲ 보시면 위의 사진의 빨간색 네모 부분처럼 설정한 아이콘이 나타났죠.

아이콘은 제대로 설정 된 것입니다.

그러면 파비콘이 제대로 설정 되었는지 확인해봅시다.

▲ 그런데 문제가 생겼습니다.

위 사진의 빨간색 네모 부분을 보면 아시겠지만

분명히 파비콘을 설정했으나 실제 나오는 것은 티스토리 기본 파비콘이네요.

 

 

 

이때의 해결법을 알려드리겠습니다.

이런 경우처럼 파비콘을 설정했는데도 불구하고 파비콘이 실제 적용되지 않는 경우!

 

 

▲ 'HTML/CSS 편집‘에 들어가셔서

▲ 파란색 네모 부분의 ‘파일업로드’를 클릭해주시고

빨간색 네모 부분에 있는 ‘추가’ 버튼을 눌러주세요.

▲ 그리고 나서 파비콘 이미지를 찾아주시면 됩니다.

그런데 처음 부분에서 말씀드린 바와 같이 파비콘의 확장자는 ico입니다.

그래서 처음에 두 가지 이미지를 다운받았었는데

그 중 확장자가 ico인 것을 설정해주시면 됩니다.

확장자가 ico인 것을 선택하고 ‘열기’버튼을 누르면

▲ 빨간색 네모 부분처럼 하나가 추가되고

추가된 것을 클릭해 보니

위 사진에서 파란색 네모 부분을 보시면 파비콘 모양이 제대로 떳죠.

▲ 그리고 빨간색 네모 부분에 마우스 커서를 놓고

마우스 오른쪽 버튼을 클릭해서‘속성’을 눌러주시면

파란색 네모부분처럼 속성 창이 뜹니다.

그리고 속성 창에서 초록색 네모 부분의 주소를 처음부터 끝까지 복사해줍시다.

▲ 주소를 복사하셨으면

위 사진의 빨간색 네모 부분에 있는 ‘HTML/CSS 편집’을 클릭클릭~

그리고 Ctrl+F로 favicon 을 찾아줍시다.

그러면 딱 하나가 나오죠.

<!--파비콘 start-->

<link href='복사한 파비콘 주소' rel='shortcut icon' type='image/ico'/>

<!--파비콘 end-->

▲ 그리고 위의 코드에서

밑줄 친 부분의 글자를 지우시고

아까 복사한 파비콘 주소를 붙여 넣어줍시다.

<!--파비콘 start-->

<link href='http://cfs.tistory.com/custom/blog/170/1708908/skin/images/1413015764_88143.ico?=570554666' rel='shortcut icon' type='image/ico'/>

<!--파비콘 end-->

그러면 저는 이렇게 되겠네요.

그리고 이것을 다 복사해서 아까 찾은 favicon 바로 위에 붙여주세요.

▲ 위 사진의 빨간색 네모 부분처럼 붙였습니다.

그리고 저장을 눌러주시면 완료가 됩니다.

한번 잘 적용이 되었나 확인해봅시다.

▲ 보시면 위 사진의 빨간색 네모 부분처럼 잘 적용이 된 것을 볼 수 있습니다.