블로그에 파비콘(Favicon)을 달자!
This post was written on April 12, 2010

이번 포스트는 블로그를 만들고, 마지막에 해야하는 일에 대한 내용입니다.
바로 파비콘(Favicon – 즐겨찾기 아이콘)을 만들어서 블로그에 적용하는 일인데요.

블로그를 주제로 설명하지만, 모든 웹 사이트에 적용이 가능합니다.
사이트의 깃발을 만드는 의미로 보시면 될 것 같습니다.

이 글을 보는 대부분의 사람들이 다 알고 있겠지만,
혹시 모르시는 분이 있을 가능성을 고려하여, 파비콘에 대해 잠시 설명하자면
파비콘은 아래의 그림과 같습니다.

잘 보이시나요? ^^;;
물론 잘 안보일 겁니다.
파비콘(Favicon – 즐겨찾기 아이콘)은 한 사이트, 블로그의 상징이지만
눈여겨 보지 않으면 잘 보이지 않는 부분이기 때문입니다.

아래 부분은 브라우저 별로 파비콘 영역을 확대한 모습입니다.

보시다시피 HyunsikLog 는 회색 H 를 파비콘으로 사용하고 있는데요.
디자인 감이 없어서 문자를 썼습니다. ^^;

파비콘을 만드는 순서는 다음과 같습니다.

1. ico 파일 생성 : 이미지 변환 혹은 파비콘을 만들어주는 사이트에서 생성
2. ico 파일을 업로드 : 파일을 블로그 서버로 업로드(혹은 블로그의 툴을 이용해서 업로드)
3. 파비콘 관련 태그 삽입

파비콘을 만드는 것은 큰 어려움이 있는 작업은 아닙니다만,
단지 특이한 점이 하나 있다면, 파비콘의 파일은 확장자가 ico 인 icon 파일이어야 한다는 것입니다.
파이어폭스, 사파리, 크롬 등의 대부분의 브라우저가 jpg와 gif 같은 일반적인 이미지 파일들을
파비콘으로 수용하는 것과는 다르게 익스플로러에서는 ico 파일만을 고집하기 때문입니다.

그래서 익스플로러에서도 파비콘을 보이게 하고 싶다면,
일반 이미지 파일을 ico 파일로 변환시켜주는 프로그램이나 사이트가 필요합니다.

//www.favicon.cc/
//favicon-generator.org/

위의 경로들은 일반 이미지 파일을 ico 파일로 변환해주는 사이트들의 링크이고,
만약 포토샾에서 변환을 원한다면 ico 파일을 지원하도록 업데이트를 해야 합니다.

위의 사이트들이나 포토샾, 일반 프로그램을 이용하여
원하는 모양의 파비콘(ico 파일)을 만들었다면
블로그가 있는 서버의 적당한 위치에 파일을 업로드하고,
블로그의 HTML에서 HEAD 영역을 조금 수정해야 하는데,
다음의 태그를 <HEAD>와 </HEAD>  사이에 넣어주는 것입니다.

<link rel=”shortcut icon” href=”[파비콘주소]” type=”image/x-icon”>
<link rel=”icon” href=”[파비콘주소]”type=”image/x-icon”>

ico 파일이 제대로 생성되었고, 원하는 정확한 경로에 파일이 업로드 되었으며
위의 태그가 블로그에 잘 삽입되었다면 파비콘이 잘 보여진다고 생각하면 되겠습니다.
※ 파이어폭스와 같은 일부 브라우저에서는 움직이는 파비콘도 가능합니다.

경우에 따라 모든게 올바르게 되었는데, 파비콘이 바로 보이지 않을 수가 있는데요.
파비콘은 즐겨찾기 아이콘이므로 블로그의 접속 사용자 컴퓨터로 다운로드 되는 것이기 때문입니다.
사용자 컴퓨터의 브라우저들이 파비콘을 캐시하여 파비콘이 바로 보여지지 않고,
기존 파비콘이나 파비콘이 없다는 정보를 브라우저가 계속 가지고 있는 것이지요.

때문에 파비콘이 바로 적용이 안된다면, 다음과 같은 약간의 노력이 필요합니다.
익스플로러 8 기준으로 메뉴에서 도구 → 인터넷 옵션 에 가셔서 검색기록을 모두 삭제하고,
브라우저를 모두 종료하고, 다시 실행합니다. 이상이 없다면 잘 보여질 것입니다.

이런 이유로 파비콘은 바로 적용된다고 생각하기 보다는(실질적으로는 바로 적용되는 것이지만)
시간이 지남에 따라 점차적으로 확대적용된다는 의미로 생각하시는 것이 좋습니다.

아래 몇가지 도움이 될만한 블로그의 링크입니다.

익스플로러에서 파비콘 나오게 하기(파폭에선 나오는데 익스에선 안나올 경우) – 웹으로 말하기
파비콘(Favicon) 만들어 주는 사이트들 – 부스카의 ComFunny

꼭 깃발을 획득하시기 바라겠습니다. ^^

아이폰녀와 함께 마무리하겠습니다.
좋은 시간 되십시오.
감사합니다.

매우 오래된 영상(object 방식) : 원본이 삭제된 경우, 지원되지 않을 가능성이 높습니다.

- hyunsik.me -

Related Posts

  • HTML5 오픈 컨퍼런스 열린다. * 2010년 7월 2일
  • MS 인터넷 익스플로러 9 베타, 테스트 후기
  • [OPEN API] H Naver AJAX Search 0.51 : 네이버 검색 API 활용 워드프레스 플러그인
  • 구글 애널리틱스(Google Analytics)를 사용해보며
  • 마이크로소프트의 웹 오피스, 오피스 웹 앱스(Office Web Apps on SkyDrive)
  • 봄날 밤의 생각 – 2010년 5월
  • 아이폰과 워드프레스 사이, 워드프레스II의 활약
  • 애플, 아이폰 4(iPhone 4) 공개 및 국내 출시 확정
  • 애플의 HTML5 데모 사이트 – Safari Technology Demos
  • 애플의 맥 OS X 10.7 라이온(Lion)을 바라보며
  • 오페라(Opera) 10.50, 구글 크롬(Chrome) 보다 빠르다.
  • 워드프레스 설치 방법 1/2. 웹 호스팅 받아내기!!
  • 워드프레스 설치 방법 2/2. 워드프레스 인스톨하기
  • 워드프레스 플러그인 Trackback for Korea – 이글루스로 트랙백을 보내자.
  • 워드프레스 플러그인 WP Page Numbers : 페이저, 페이징바

    • HS LOG List of IT ISSUE
    3 Comments

    1. 막달리자 April 12th, 2010 at 12:24 PM

      아.. 파비콘이 저거 였군요.. 전 뭔가 했네요 ㅎ
      그러고 보니 제 블로그에도 나오네요 ㅎ 좋은글 잘 보고 갑니다.

    2. hyunsik April 12th, 2010 at 2:16 PM

      막달리자님의 파비콘은 예쁘네요. ^^
      좋은 하루 되세요~

    3. 래퍼라진호 March 20th, 2013 at 5:21 PM

      와우..좋은 글 잘 보고 갑니다…^^ 파비콘에 대해서 많이 배웠습니다..

    Thank you for visiting. If you leave a comment, I will not forget.

    HS LOG List of IT ISSUE

     
    The number of visitors for this post is 355 (measured by Jetpack).