[HTML] favicon(파비콘)생성 및 사이트 적용 방법

요즘.. 각종 포탈이나, 개인사이트, 쫌 알려진 홈페이지에 들어가보면, 주소창 좌측에 이쁜 아이콘들이 많이 붙어 있는 것을 볼 수 있을 것이다.  뭐.. 알고 계신분들도 많겠지만, 현업에서 일하시거나, 웹관련 쪽을 공부를 하시는 분들에게 손쉽고, 편리하게 파비콘(favicon)생성 및 사이트 적용 방법에 대해서 설명한다.^^

우선.. 파비콘이 적용된 예를 함 보자..
 
위와 같이 브라우즈 주소창에 또는 탭에.. 그리고.. 즐겨찾기 목록에  파비콘이 생성된다.
쫌 있어보이는 사이트 또는 블로그를 만들 수 있고, 자신만의 개성을 최대한 살릴수 있는 조그마한 팁일 것이다.ㅎ

자.. 그럼 우선 파비콘 아이콘을 만들어 보자..아이콘을 만드는 방법은 포토샵등과 같은 프로그램을 이용하여 아이콘을 직접만들거나, 이미지를 만들고, 아이콘으로 변경하는 프로그램을 변환하는 방법이 있는데 필자는 포토샵에서 필요한 아이콘의 형태를 기본적으로 만들어서, jpg나 gif로 저장하고,


이라는 파비콘을 가장 안전하고, 손쉽게, 그리고 깔끔하게 생성시켜주는 사이트를 이용한다.

물론 무료로 사용할 수 있도록 되어 있고, 영문사이트이다. 영어에 자신이 없드라도 크게 걱정없이 한두번만 만져보면 바로 제작이 가능할 것이다. 이 사이트 외에도.. 꽤 많은 사이트에서 파비콘 생성을 도와준다. 한번 검색해보시길..^^

참고, 이 사이트에는 파비콘 생성 말고도 꽤 재미있는 기능들이 많이 제공하고 있다..
시간나면 찬찬히 공부해보는 것도 좋을 것이다..ㅎ

favicon Generator 사이트 사용방법에 대해서 설명한다.^^ 

 

 



1. 포토샵에서 생성한 파비콘으로 만들 이미지를 찾아보기해서 고른다.

참고, 이미지가 없다면, 여기서 직접 도트노가다 해가면서 만들 수 도 있다.

2. upload image버튼을 눌러 선택한 이미지를 업로드 시킨다. 


 3. 업로드가 끝나면, 위와 같은 화면이 보이고, 여기서 원하는 만큼 크롭영역을 정한다. 4. 영역선택이 끝나면, Crop picture 버턴을 클릭한다. 



5.  Crop picture 버턴을 클릭하면 원래화면으로 돌아오면서, 크롭된 이미지도 같이 들어온다. 여기서 붓으로 색을 변경하거나, 정리할 부분 정리해서 이미지를 완성하고, 배경을 투명하게 만들려면, 색상 팔래트 좌측상단(5번 위치)에 있는 투명색을 선택하고, 붓으로 투명하게 만들 부분을 칠하면 위의 이미지처럼, 배경이 투명으로 바뀐다.

6.  정리가 마루리 되면, Make Favicon! 버턴을 클릭한다.



7.  Make Favicon! 클릭하면, 바로 아래 연두색 화면 중간에 조그마한 파비콘 아이콘 이미지가 보이고 이 이미지를 파비콘 아이콘으로 저장하기 위해서 이미지위에 마우스를 위치시키고, 마우스 오른쪽 버턴을 눌러 메뉴에서 다른이름으로 사진 저장 메뉴를 클릭한다. 8. 다른 이름으로 사진 저장에서 원하는 저장위치를 선택하고, 이름과 확장명은 변경하지 않은 상태로 저장하기 버턴을 누르면 된다. 

파일
명은 favicon.ico 라고 저장이 되고.. 파일명과 확장명은 변경하지 않은 상태에서 여러분들의 
웹서버에 업로드 시키면 된다.

자.... 가장 간편하게... favicon.ico 파일을 생성시켜봤다..
물론 이 사이트에서 만들어주는 아이콘이 16x16 사이즈이다. 32x32도 작동하지만, ie에서는 한번씩 오작동하거나, 아에 나타나지 않을 가능성이 다분히 높기 때문에 가급적이면, 16x16사이즈를 적극 추천한다.


실제 웹사이트(블로그등)에 적용시켜보자..
메모장이나, 나모, 드림위버 또는 에디트플러스등과 같은 웹에디터를 이용해서, index.html 또는 index.htm, index.php, index.asp 등과 같은 파일을 오픈하고, 아래 코드를 복사해서 붙여넣기 하면된다.

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<link rel="shortcut icon" href="http://사용자도메인명/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://사용자도메인명/favicon.ico" type="image/x-icon" />

<title>서관덕의 시간이 머문 작은공간</title>
</head>

<head></head> 사이에. <link rel="shortcut icon" href="http://사용자도메인명/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://사용자도메인명/favicon.ico" type="image/x-icon" /> 위 같이 붙여넣고, 여러분들의 도메인주소와 경로에 맞게 설정해주면 끝난다.. 경로는 풀ULR 주소를 입력해도 좋고  href="/favicon.ico" 이렇게 절대경로를 이용해서 적용해도 된다... 두개의 코드를 이용하는 것은 한번 호출했을 때, 작동하지 안될 가능성 때문에.. 두번 호출하는 것이다.

한마디로.. 안전빵..ㅋ

셋팅이 끝나면, 저장해서, ftp를 이용해서 여러분들의 웹계정에 업로드 시켜주고, 현재 열려있는 모든 브라우즈를 종료하고, 다시 접속하면 정상적으로 파비콘이 보일 것이다.
만약.. 위와 같은 방법으로 생성하고, 코딩했는데 보이지 않는다면,...ㅡ,.ㅡ;

참고. 이넘의 파비콘이.. 브라우즈 환경이나, 시스템환경에 쪼금 민간한넘이라....
참고. ie6에서는 이 파비콘이 제대로 작동하는 꼬라지를 못봐서... 절대 비추천 브라우즈...ㅡ,.ㅡ;
가능하면, 여러분들의 인터넷 브라우즈를 ie7 이상 업그레이드 시키는 것을 추천한다.ㅋ
참고. 여러분들 컴에서만 안보일수도 있다.

안보이는 경우.. 이유가 여러가지 있을 수 있다..
예를들어, 위에서 언급했듯이 브라우즈가 ie6인 경우.ㅋㅋ... 생성한 파비콘이 약간 비정상적일 때.. 사이즈가 클때..인터넷 캐시처리 문제.등등등 여러가지 이유가 있겠지만.... 직접 제작하지 않는한.. 대부분 보인다고.. 생각해도 무방할 것이다...라고 호언장담은 못합니다.ㅋ

파비콘이 제대로 작동하는지 확인해보고 싶다면, 간단하게.. 주소창에 http://여러분들도메인명/favicon.ico 이라고 입력하고 브라우즈 창에 정상적으로 아이콘이 타나면, 여러분들 컴터에서는 안보이더라도, 다른 사용자 컴에서는 보인다고 확신하시면 된다.

내컴에서도 파비콘을 강제적으로 보겠다면... favicon refresher라는 프로그램을 이용해서 강제로
리플래쉬시켜서 보이게 할 수도 있다.

이것으로 멋진 홈페이지 제작에 조금이라도 도움이 될만한 파비콘 생성 및 설치방법에 대해서 알아보았다..파비콘이란게... 이리저리 설정값에 민감하게 작동하는 넘이라...
너무 서두르지 마시고.. 찬찬히 만들어 보시길..^^

Comments 12

  • Favicon of http://moova.tistory.com BlogIcon moova

    유용한 팁이군요~ 잘 보다 갑니다.~

  • Favicon of http://kkid.tistory.com BlogIcon 그냥 꼬꼬마

    저도 살포시 트랙백 넣어놓고 갈께요 +_+ㅋ

  • Favicon of http://blog.naver.com/code0317.do BlogIcon 초이스

    드림위버배우고있는중인 초보학생입니다.
    웹사이트 지금만들고 있는중 파비콘을 만들고 싶어서 자료를 참고했더니 너무 잘되네요.
    감사합니다.

  • Favicon of http://meinherz.tistory.com BlogIcon 달을 꿈꾸는 조우리

    정보 감사합니다. 파비콘 적용이 잘되다가.. 얼마 전 스킨 리뉴얼 후에 갑자기 없어지더라구요.. 그래서 다시 보이게 하느라 좀 고생했네요..
    분명히 파비콘을 등록해놓았는데도 자꾸 없어져서.. ㅠㅠ
    그런데 제 블로그에선 댓글 앞에도 파비콘이 뜨는데 너무 크기가 크게 뜹니다. 이건 어떻게 고치나요..?
    저는 댓글에서 닉네임 앞에는 파비콘이 아예 안 뜨던가 아니면 16x16크기로 보이게 하고 싶은데.자꾸 64x64인지.. 하여간 엄청 크게 보이네요....
    파비콘 크기 자체는 16x16인데.. 늘어나서 그렇게 크게 보여요.
    이건 어떤 설정을 바꿔야 하나요?

    • Favicon of http://esajin.kr BlogIcon 서관덕 서관덕의 시간이 머문 작은공간™

      안녕하세요. 방문해 주셔서 감사합니다.

      예전에 처음 티스토리 블로그를 시작할 때, 느림보토끼님과 똑같은 내용으로 고민한적이 있었지요..하하하

      관리자 페이지 좌측 플로그인 설정에서 블로그 아이콘 표시 라는 꾸미기 기능에 보시면, 아이콘 크기를 조절할 수 있는 내용이 보입니다.^^

      제가 요즘 정신없이 바쁜관계로 이제서야 글을 보고 답글을 답니다.^^

      즐거운 하루 되세요..^^

    • Favicon of http://meinherz.tistory.com BlogIcon 달을 꿈꾸는 조우리

      답변 감사합니다.. 그런데 아이콘 크기 설정이 아니에요.. 그 제 블로그에 아이콘은 보이지 않고 파비콘만 보이도록 해놨어요. 그러니까 아예 블로그 아이콘 표시 자체를 비활성화 시켜놨거든요. 그래서 아이콘 사용을 활성화시키고 크기를 바꾸면 댓글에 파비콘도 크기가 바뀌나 했는데 그렇지 않더라구요... 아이콘 크기만 16 16으로 되어 있고 파비콘은 여전히 64 64로 보입니다. ㅠㅠ 플러그인에 파비콘 크기 조절하는 설정은 없고.. 대체 이유를 모르겠네요. ㅠㅠ
      그래서 크기 조절을 못하겠으니 그냥 플러그인에 파비콘 표시 자체를 비활성화 시키려 하는데.. 그래버리면 브라우저 주소창이나 탭에 파비콘이 표시되는 것까지 사라지게 되나요?

  • super

    파비콘 적용하기 위해 알아보다가 이블로그가 제일 자세히 잘 설명되어있는것 같아요.



    초보라 궁금한점 물어볼게요

    http://도메인명:8181/favicon.ico 하면 아이콘 사진이 보입니다.
    그런데 http://도메인명/favicon.ico 하면 안보여요

    그러면 index에다가 사용자 도메인명:8181/favicon.ico 라고 입력해도 되는것입니까?

  • papa

    인덱스 파일을 실수로 삭제하는 바람에 다시 설정을 해야했는데
    처음 파비콘 설정할 때도, 이번에도 이 곳에서 도움 받아갑니다~ 쉬운 설명으로 다른 곳보다 수월하게 이해할 수 있었어요.
    매번 고맙습니다