인터넷익스플로러에서만 안보이는 티스토리 파비콘, 보이게 설정하는 법

웹사이트, 블로그를 개성있게 꾸미는 파비콘(Favicon)

브라우저 주소창에 뜨는 아이콘을 뜻하는 파비콘, 이게 적용되어 있으면 그냥 흔한 브라우저 기본 아이콘 대신 보다 특색있는 느낌덕분에 많이 적용합니다.

 

저는 파비콘으로 쓸 아이콘을 뭘로 할까 잠시 고민하다가 그냥 지나쳐버린 후, 지금까지 파비콘을 설정하지 않고 있었습니다.

 

그러다 문득 그동안 블로그 댓글 창에 아이콘으로 쓰던 플로피 드라이브 아이콘을 파비콘으로 설정하기로 했습니다.

다음, 네이버, 구글의 파비콘

파비콘에 쓸 ICO 파일 만들기

일단 파비콘을 적용하려면 이미지 파일을 ICO 파일로 만들어야 하는데요, 예전에는 ICO 파일을 만드는 별도의 프로그램을 이용하거나, 포토샵의 ICO 플러그 인을 설치하여 만드는 등의 방법을 썼지만 요즘은 이미지 파일만 넣어주면 ICO 파일을 자동으로 만들어주는 사이트들이 꽤 많이 있군요.

저는 ConvertICO.org 에서 ICO 파일을 만들었습니다.

 

만드는 법은 무척 간단하여 파비콘으로 만들 이미지 파일의 경로를 정해주고 'Favicon for your website' 옵션을 선택한 후 [Convert Now!] 버튼을 누르면 그만입니다.

이미지 파일을 올리고 파비콘 형태를 정한 후 Convert Now! 버튼을 누르면 끝

파비콘을 티스토리에 적용하기

만들어진 ICO 파일을 티스토리에 적용하는 것 역시 무척 간단합니다.

티스토리 관리자로 들어와 [환경설정] 메뉴의 [기본 정보] 항목에서 [아이콘]-[파비콘] 항목을 클릭해 앞서 만든 ICO 파일을 업로드하고 저장하면 그만입니다.

티스토리 관리자의 [기본 정보]-[파비콘]에서 설정

인터넷 익스플로러에서만 안보이는 티스토리 파비콘

자, 이제 적용을 했으니 잘 보이는지 확인을 해야겠죠? 인터넷 익스플로러를 띄우고 제 블로그에 접속을 했습니다.

그런데, 어라? 파비콘이 안보입니다.

옆에 떠 있는 다음 파비콘은 잘 보이는데, 제가 설정한 플로피 디스크 파비콘은 전혀 보이지 않습니다.

포털의 파비콘은 보여주고, 내 파비콘은 안보여주는 인터넷 익스플로러

 

앞서 이미지 파일의 색상이 다르게 보이는 문제에서, 다른 브라우저를 확인해보자는 경험을 얻었기에 크롬과 파이어폭스에서는 어떻게 보이는지 확인해봤더니, 인터넷 익스플로러에서만 안보이는 문제였군요.

혹시 얼마전 업그레이드한 인터넷 익스플로러 10의 문제인가 싶어 노트북의 인터넷 익스플로러 8로 확인해봐도 파비콘은 보이지 않습니다.

반면, 크롬, 파이어폭스에서는 아주 잘 표시됩니다.

크롬과 파이어폭스에서는 잘 보이는 파비콘

인터넷 익스플로러에서만 안보이는 티스토리 파비콘, 수정하기

사실 별것 아닌 작은 파비콘 이지만 문제를 발견했으니 수정을 해야겠죠.

몇번의 삽질을 살짝 한 끝에 문제를 해결할 수 있었습니다. 방법은 다음과 같습니다.

 

티스토리 관리자의 [HTML/CSS 편집] 메뉴에서 [파일업로드] 항목을 클릭한 후, [추가] 버튼을 클릭하여 앞서 만든 ICO 파일을 업로드 합니다.

ICO 파일이 업로드 되면 해당 파일에서 마우스 오른쪽 버튼을 클릭한 후 [바로가기 복사]를 선택해 업로드 된 ICO 파일의 주소를 복사합니다.

파비콘을 티스토리에 업로드하고 업로드된 주소를 복사

 

티스토리 관리자의 HTML/CSS 편집 모드의 skin.html에서 'favicon'의 위치를 찾습니다.

CTRL+F를 눌러 검색창을 띄운 후 favicon을 입력하면 쉽게 찾을 수 있습니다.

skin.html에서 파비콘 관련 행을 검색

 

https://comterman.tistory.com/favicon.ico"와 같이 되어 있던 항목을 앞서 복사해 두었던 ICO 파일의 주소로 대체합니다.

아울러, type='images/ico'를 추가합니다. 원래 적용되어 있던 파비콘 형식과 바뀐 형식을 잘 비교해보면 대체할 부분은 쉽게 확인할 수 있습니다.

수정이 끝나면 저장 버튼을 클릭해 저장하고 빠져나옵니다.

경로를 복사한 주소로 대체

 

이제 인터넷 익스플로러에서 제 블로그를 띄웠더니! 파비콘이 잘 보입니다!!!

인터넷 익스플로러에서도 파비콘이 잘 보인다! *,.*

 

티스토리 파비콘을 설정해 두면, 댓글 창에 아이콘이 두 개로 겹쳐 보이는데, 티스토리 관리자 메뉴의 [기본 정보]에서 설정했던 파비콘을 삭제하면 하나의 아이콘만 볼 수 있습니다.

 

관련글

• 2013/04/12 - 블로그에 올린 사진 색감, 포토샵에서 보던 것과 달랐던 원인은?
• 2013/03/05 - 모빌리스 웹폰트 유료화에 따른 구글 웹폰트의 티스토리 설정법
• 2012/06/25 - 어도비가 내 블로그를 체크해준다 - Adobe BrowserLab
• 2012/06/11 - 내 포스팅의 HTML 소스는 왜 이리 지저분할까?
• 2012/06/09 - 티스토리 이미지와 글 간격을 줄이려면?
• 2012/06/05 - 티스토리 각주 글꼴 색상 설정하려면?