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

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

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

 

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

 

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

파비콘 Favicon 인터넷 익스플로러 브라우저 Internet Icon 아이콘 다음 네이버 구글다음, 네이버, 구글의 파비콘

파비콘에 쓸 ICO 파일 만들기

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

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

 

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

파비콘 Favicon 인터넷 익스플로러 브라우저 Internet Icon 아이콘이미지 파일을 올리고 파비콘 형태를 정한 후 Convert Now! 버튼을 누르면 끝

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

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

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

파비콘 Favicon 인터넷 익스플로러 브라우저 Internet Icon 아이콘 티스토리티스토리 관리자의 [기본 정보]-[파비콘]에서 설정

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

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

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

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

파비콘 Favicon 인터넷 익스플로러 브라우저 Internet Icon 아이콘 티스토리포털의 파비콘은 보여주고, 내 파비콘은 안보여주는 인터넷 익스플로러

 

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

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

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

파비콘 Favicon 인터넷 익스플로러 브라우저 Internet Icon 아이콘 티스토리 크롬 파이어폭스 chrome firefox크롬과 파이어폭스에서는 잘 보이는 파비콘

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

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

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

 

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

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

파비콘 Favicon 인터넷 익스플로러 브라우저 Internet Icon 아이콘 티스토리파비콘을 티스토리에 업로드하고 업로드된 주소를 복사

 

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

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

파비콘 Favicon 인터넷 익스플로러 브라우저 Internet Icon 아이콘 티스토리skin.html에서 파비콘 관련 행을 검색

 

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

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

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

파비콘 Favicon 인터넷 익스플로러 브라우저 Internet Icon 아이콘 티스토리경로를 복사한 주소로 대체

 

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

파비콘 Favicon 인터넷 익스플로러 브라우저 Internet Icon 아이콘 티스토리인터넷 익스플로러에서도 파비콘이 잘 보인다! *,.*

 

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

 

이 글을 공유하기

댓글 :: 질문 댓글은 공개글로 달아주세요. 특별한 이유없는 비밀 댓글에는 답변하지 않습니다

Designed by JB FACTORY