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

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

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

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


 사이트 방문자 측면  

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

▲ 원인
1) 위 증상들이 파이어폭스나 오페라, 사파리 등의 타 브라우저에서는 잘 나타나지 않습니다.
2) 대부분의 원인이 인터넷 익스플러어의 파비콘 처리 방식과 버그 때문이라고 알려져 있습니다.[각주:1]

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

대신 캐시가 삭제된 경우에는 어쩔 수 없이 해당 사이트를 다시 방문해서 새로 즐겨찾기를 해야 즐겨찾기 목록에 파비콘이 반영이 됩니다.[각주:2]

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

 사이트 운영자 측면  

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

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

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" />

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


일반적으로 이렇게 해서 제대로 표시가 되면 문제가 없는데, 표시가 안된다면 아래와 같이 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 수정을 해서 파비콘 출력에 성공했습니다.

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

  1. IE7부터는 다소 나아졌다고 하지만 근본적으로 해결은 안되었다고 하네요. [본문으로]
  2. 이 경우에도 보통은 바로 파비콘이 표시가 안되는 경우가 많습니다. 역시 재부팅이 필요합니다.-ㅅ-;; [본문으로]
  3. 99% 인터넷익스플러어일겁니다... [본문으로]
신고

    이전 댓글 더보기
  • 비밀댓글입니다

    • 안녕하세요? 답글이 늦어 죄송합니다.
      블로그에 방문을 해봤는데, 처음에는 파비콘이 뜨지않다가(IE8 사용중입니다.) 파비콘 URL로 강제로 한번 더 방문했더니 그제서야 파비콘이 캐시가 됐는지 표시가 되기 시작했습니다.
      아무래도 파비콘 이미지 자체에 문제가 있는 것 같습니다.
      우선 위에 글대로 차근차근 따라해보시되, 특히 2번의 아이콘 확인 부분을 잘 확인해보세요.
      블로그아이콘을 그대로 사용하지 마시고, 가급적 작은 크기로 별도 사이트에서 따로 만들어서 이용해보세요~

    • 감사합니다 'ㅅ'乃

    • IE11 사용중입니다.
      크롬, 파폭에서 문제 없다가 IE에서만 이미지가 보이지 않아 고민이 많았는데 아이헌터님말대로 URL로 강제로 한번 방문 후 파비콘이 캐시 되었는지 이후로 잘 뜹니다.... 이것은 브라우저 문제인것으로 집고 넘어가고 싶지만 서비스를 하는 운영자입장에서 고객들이 파비콘 캐시하는 것도 아니구... 어떻게 해야할런지..

  • 저는 refresh 프로그램 돌리니깐 바로 되네요 ^^

    트랙백보고 달려왔는데 되서 다행이에요 ^^

    감사합니다.

    • 된다니까 다행이네요^^
      다른 브라우저에 비해서 인터넷 익스플러어만 유독 문제있는 거 보면 MS에서 조금 더 신경써야할 문제인 것 같습니다.
      새해 복 많이 받으세요~

  • 전 잘보이는데 친구컴에선
    안보이면 무슨경우죠 ㅋㅋㅋ
    친구컴이 잘못있는건가요?

    • 아무래도 친구분 컴퓨터에 문제가 있는 것 같긴 합니다.
      제 컴퓨터에서는 yabawi님 블로그 파비콘이 잘 보이네요^^
      아무튼 인터넷익스플러어는 이상하게 다른 브라우저에 비해 파비콘 표시가 문제가 많은 편이라 불만이긴 합니다. ㅠ

  • 감사합니다 ^^

  • 좋은정보 감사합니다! 이제 해결됐습니다 ㅠ_-

  • 파비콘에 대한 정말 자세한 설명이군여, 잘 읽었네여

  • 제 웹사이트의 파비콘이 안떠서 엄청 속상했는데, 여기 올려주신 favicon refresher 프로그램으로 해결했습니다. 이제야 속이 시원하네요. 자세한 설명 감사드립니다.

  • 아.. 몇년전 부터 궁금하던 것이었는데..해결이 되었네요~ 좋은 정보 감사합니다.

  • 감사합니다.~~ 컴 다시 미는 바람에 파이콘이 안보였는데..해결됐어요..^^

  • 위에서 말한 사이트에 들어가서 파비콘을 만들어보니 썸네일이 표시됬어요. 티스토리에서 안내해주는 사이트에 들어가서 파비콘을 만들면 바탕화면에서 볼 때 미리보기 화면이 나타나지 않았거든요. 일단 파비콘이 나올지 안나올지는 봐야하겠지만 나올 것 같습니다. 유용한 정보 감사합니다.

  • 티스토리는 파비콘을 새로 적용하면 하루나 이틀 뒤에 적용이 되는걸까요? ㅠㅠ
    예전에도 그런 경우가 있었는데..
    흑.. 아이헌터님의 이렇게 정갈하고 친절한 설명에도 왜 제 파비콘은 감감 무소식일까요 ㅠㅠ

    • 답이 많이 늦어 죄송합니다.^^
      볶님 사이트 방문해서 소스를 보니 파비콘 주소가 잘 못되어 있는 것 같아요.
      <link rel="shortcut icon" href="//favicon.ico" />

      이런 식으로 경로가 조금 이상하네요.
      본문 내용대로 한번 따라 해보시면 보통은 해결되더라구요.
      (IE가 오류가 많아서 그런지 잘 안되는 경우도 있지만요.)
      즐거운 하루 되세요~

  • 오오, 기적이 일어났습니닷!! 감사해요오오_ㅠ 번성하시기 바랍니닷:-)

  • 당신이 실수를했다면, 또 다른 가능성은 항상있다. 당신은 우리가 "실패"떨어지는 다운되지 않습니다 전화 이일을 위해, 당신이 선택하는 순간 상쾌한 시작을하지만, 아래 머물 수 있습니다.

  • Done well. Really pleased with the value of the content presented. I have high hopes that you continue with the good work succesfully done. 전문분야가
    [url=http://www.SantaMonicaFlooring.net/retiring.html]Floor installers Santa Monica[/url]

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

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

  • ㅠ 번성하시기 바랍니닷:-)

  • 티스토리에서 안내해주는 사이트에 들어가서 파비콘을 만들면 바탕화면에서 볼 때 미리보기 화면이 나타나지 않았거든요.

  • IE8에서 안 보여서 고민했는데, 파비콘 표시여부 확인하다가 해결 되었네요.
    IE를 다시 실행해도 안 보이다가 http://url.com/path/favicon.ico로 한 번 브라우저에 띄우고 다시 홈페이지를 열어보니 파비콘이 뜨네요.
    감사합니다~!^^

  • 저 같은경우는 익스플로러 설정을 완전히 초기화 하지않는이상
    파비콘이미지가 아예 뜨지를 않던데 (즐겨찾기파비콘은 첨부해주신유틸로 뜨기는하지만)
    이거 정말 IE버그 맞을가요? 윈도우 새로포맷해서 IE를 사용해도
    간헐적(랜덤)으로 파비콘이 안나오기시작하면 계속해서 안나오는데
    초기화해줘서 제대로 파비콘이 떠도 또 나중에 간헐적으로 파비콘이 안뜨는문제가
    생기는데 혹시 해결방법 아실가요? 이게 IE쓰는 모든유저한테 일어나는버그일가요?
    아님저같은 특정유저한테만 생기는문제일가요?

Write your message and submit