Favicon(파비콘) 안보이는 경우 해결하기(최종)

지난 번에 파비콘이 안보이는 경우 해결하는 방법으로 아이콘 크기를 "16X16"으로 해야 한다는 글을 올렸었는데, 제가 너무 우물 안 개구리였던 것 같습니다. ▶ Favicon (파비콘) 안보이는 경우 해결하기

제 블로그부터 이사하면서 새로 도메인을을 바꿨더니 갑자기 파비콘이 제대로 표시가 안되는 것이었습니다.

그래서 이번 참에 "파비콘 너를 제대로 분석해보겠다~!"라는 각오로 차근차근 문제해결을 해나가는 기회를 가져보도록 하겠습니다.

사이트 방문자 측면

▲ 증상1: 인터넷 익스플러어에서 방문한 사이트의 파비콘이 표시가 안된다.
▲ 증상2: 잘 보이던 파비콘이 어느 날 갑자기 표시가 안된다.

▲ 원인
1) 위 증상들이 파이어폭스나 오페라, 사파리 등의 타 브라우저에서는 잘 나타나지 않습니다.
2) 대부분의 원인이 인터넷 익스플러어의 파비콘 처리 방식과 버그 때문이라고 알려져 있습니다.[footnote]IE7부터는 다소 나아졌다고 하지만 근본적으로 해결은 안되었다고 하네요.[/footnote]

인터넷 익스플러어는 파비콘 이미지를 임시 인터넷 폴더에 기본적으로 저장하게 되는데 이 폴더의 캐시가 제대로 반영이 안되거나 백신 프로그램 등에 의해 삭제가 되어서 위와 같은 증상이 나타나게 됩니다.
그래서 파비콘이 출력되어야 할 사이트를 방문해도 파비콘이 안보이거나 즐겨찾기를 해도 바로 반영이 안되는 경우에는 인터넷 익스플러어를 다시 시작하거나 컴퓨터를 다시 시작하면 대부분은 해결이 됩니다.

대신 캐시가 삭제된 경우에는 어쩔 수 없이 해당 사이트를 다시 방문해서 새로 즐겨찾기를 해야 즐겨찾기 목록에 파비콘이 반영이 됩니다.[footnote]이 경우에도 보통은 바로 파비콘이 표시가 안되는 경우가 많습니다. 역시 재부팅이 필요합니다.-ㅅ-;;[/footnote]

만약 그래도 제대로 안보인다면 favicon refresher라는 프로그램을 이용해서 해결해보는 방법도 있습니다.

favicon.zip

사이트 운영자 측면

자 만약 당신이 블로그나 사이트 운영자라면 좀 더 심각하게 고민이 생깁니다.
사이트를 방문자에게 어필하기 위해 수고스러움을 무릅쓰고 파비콘을 만들었는데 방문자 브라우저[footnote]99% 인터넷익스플러어일겁니다...[/footnote]에 제대로 표시가 안되면 낭패이죠.

이런 경우의 원인은 앞서 언급한 문제요인들을 포함한 여러가지의 경우일 확율이 높습니다.
따라서, 하나의 정답이 있을 수가 없고 문제가능성이 있는 부분부터 차근차근 제거해나가야 합니다.

1. 표시여부 확인

우선 내 컴퓨터에서 내 사이트(또는 블로그)의 파비콘이 안보인다고 해서 다른 방문자들까지도 안보이는 게 아닐 수도 있습니다.
정상적으로 파비콘 아이콘이 올라가 있고 다른 사람들에게는 보여지는데, 단지 내 컴퓨터의 익스플러어 문제로 안보일 수도 있기 때문에 사이트에 이상없이 등록되어 있는지 체크를 먼저 하는 게 좋습니다.

체크하는 방법은 단순히 자기 사이트 URL 다음에 "/favicon.ico"를 붙인 주소를 접속해서 제대로 이미지가 보이는 지 보는 겁니다.
이 방법으로 의심이 쉬이 가시지 않는다면 별도로 체크해주는 사이트에 방문하셔도 됩니다.
▶ http://www.make-a-favicon.com/favicon_test.php


2. 아이콘 확인

다음 순서로는 파비콘의 이미지 즉 아이콘이 형식에 맞는 제대로 된 것이냐를 체크해봐야 합니다.
우리의 익스플러어는 너무 멍청해서 이미지가 조금이라도 잘못되어 있거나 크기가 좀 크면 제대로 소화를 하지 못한다고 하네요.

크기는 16x16 사이즈나 32x32 사이즈가 가능한데 가급적이면 작은 크기가 좀 더 유리하다고 합니다.

특히 요즘에는 이런 파비콘을 만들어주는 사이트들도 많습니다.
포토샵이나 이미지뷰어에서도 저장이 가능하지만, 가급적이면 이런 사이트를 이용하는 것을 권장합니다.

제 경우가 그랬던 경우인데, 이미지뷰어로 만든 파비콘이 확장자만 ico 였지, 실제로는 뭔가 문제가 있었던 것이었죠.

아래 그림을 한번 볼까요?

윈도우즈 탐색기에서 관련 이미지들을 본 상태입니다.
같은 ico 파일인데 위에 아이콘("파비콘_투명_소1.ico")은 썸네일이 표시가 되고 아래 아이콘("파비콘_투명_소.ico")은 표시가 안됩니다.
차이점은 위에 아이콘은 별도 사이트에서 만든 것이고 아래 것은 이미지뷰어에서 만든 것입니다.(소스 이미지는 동일하게 "파비콘_투명_소.gif"입니다.)

처음부터 뭔가 문제가 있는 아이콘을 사이트에 올려두고 파비콘으로 지정하면 그만큼 제대로 안될 확률이 높다고 보입니다.

참고로 제가 이용한 파비콘 사이트입니다. ▶ http://tools.dynamicdrive.com/favicon/ 


3. HTML 설정

파비콘이 정상적으로 사이트에 올라가 있다면 이제 그걸 제대로 호출을 해줘야 됩니다.
보통 티스토리 계정을 이용하시는 분이라면 아래와 같은 html 소스로 되어 있을 겁니다.

<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />

혹은 절대 주소를 바로 지정해주는 경우도 있죠.

<link rel="shortcut icon" href="http://cfs.tistory.com/custom/blog/37/373076/favicon.ico" />

일반적으로 이렇게 해서 제대로 표시가 되면 문제가 없는데, 표시가 안된다면 아래와 같이 html을 수정해보세요.

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

중요한 것은 favicon 앞에 슬래시(/)가 붙은 것입니다. 이렇게 하면 브라우저에게 좀 더 강제성(?)을 줄 수 있다고 합니다.
추가로 인터넷 익스플러어가 한 번 말해서 못 알아들을까봐 2번 호출해주는 센스를 보여줍니다~


4. Favicon refresher

마지막으로 이렇게까지 했는데도 파비콘이 안보인다면 대부분 그 컴퓨터에서만 안 보이는 경우일 확률이 높습니다.
이럴 때는 위에 방문자 측면에서 설명드렸던 favicon refresher라는 프로그램을 통해 강제로 파비콘을 refresh 해주면 속썩이던 컴퓨터에서도 파비콘이 제대로 출력이 되는 기적(?)을 목격하실 수 있습니다. :)

---

이상으로 단계별로 차근차근 살펴보았는데요, 제 경우에는 파비콘을 전문 사이트에서 새로 만들고 3번 단계에서와 같이 html 수정을 해서 파비콘 출력에 성공했습니다.

혹시 파비콘 때문에 고생하시고 계신 분들은 한 번 따라서 해보시고 계속 문제가 생기시면 답글이나 트랙백을 보내주세요.