파비콘!
위의 그림은 제 블로그에서 사용하는 대표이미지입니다.
주소표시줄에서 확인하실 수 있는데요.
주소표시줄에 나타나는 이미지! 파비콘이라 불리는 이 이미지를 만들어서 적용해봅니다.





파비콘이란?  

파비콘(favicon - Favorites와 Icon의 합성어)이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. < 출처 위키백과 >

간단하게 주소 앞에 나타나는 대표 이미지라고 할 수 있어요.

[ 주소표시줄에 나타나는 파비콘 ]

[ 즐겨찾기 목록에 나타나는 파비콘 ]





파비콘 만들기  


파비콘을 등록하기 위해서는 gif, jpg, png 등의 그림 파일이 아닌 아이콘 확장자의 파일이 필요한데요.
일반 이미지 파일을 아이콘 파일로 쉽게 바꿔주는 사이트를 소개합니다.




사이트를 한번 살펴볼까요?


위의 주소를 클릭하시면 이런 화면을 보실 수 있습니다.
여기서 'Image to Use' 오른쪽의 찾아보기를 통해 컴퓨터 상에 저장되어 있는 이미지를 불러오세요.


그리고 바로 아래 버튼을 눌러줍니다.


그럼 이렇게 화면이 이동하게 되는데요.
여기서 'Download Favicon Package' 를 클릭하시면 바로 다운받으실 수 있어요.
바로 다운받으시면 32*32px의 아이콘과 16*16의 애니메이션 gif파일을 받으실 수 있어요.

이 사이트에서는 다른 사이즈의 아이콘과 애니메이션 편집도 지원해주고 있습니다.

우선 위 화면의 빨간 원 중 왼쪽 still 부분에서 'All sizes' 를 클릭해주세요.


클릭하시면 이런 화면으로 이동하게 되는데, 여기서 오른쪽 밑줄쳐진 부분을 클릭하시면 여러 크기의 아이콘을 선택하실 수 있어요.
지금 화면상 16*16, 32*32, 48*48 세개의 사이즈가 선택되어 있는데요.
다운을 받으면 48*48px 사이즈만 다운된답니다. 다운받길 원하시는 사이즈만 남기고 remove 해버리시면 되요.

제가 파비콘을 처음에 48*48 사이즈로 했었는데 너무 크기가 큰지 주소표시줄에 그림이 깨져서 나오더라구요.
그래서 32*32 사이즈로 바꾸었답니다.

Still 부분의 오른쪽 Animated 부분의 'Edit' 를 클릭해볼까요.


여기선 움직이는 gif파일을 수정할 수 있어요.
그림과 흘러가는 글자를 편집할 수 있답니다.
흘러가게할 글과 글자 색, 배경 색 등을 편집할 수 있어요. (단, 한글을 지원하지 않네요)

완성된 애니메이션 gif 파일입니다.

이렇게 만든 아이콘과 애니메이션 파일은 'Download Favicon Package'를 통해 압축파일로 받으실 수 있어요.





파비콘 적용하기  

파비콘을 만들었으니 블로그에 적용해야겠죠.
다음은 티스토리 블로그에서 파비콘을 적용하는 방법입니다.


티스토리 관리자페이지에서
환경설정 > 블로그 정보
로 들어가주세요.

그럼 아이콘이라는 항목이 있습니다.
첫번째 블로그 아이콘 란은 댓글창 등에 나타나게 되는 그림이예요.
사이즈에 맞는 아무 그림이나 넣을 수 있어요.
위에서 만들어진 애니메이션 gif파일도 넣을 수 있답니다.

두번째 파비콘 란에 위에서 다운받은 아이콘파일을 넣어주세요.

등록하시면 바로 적용되진 않고 하루 이틀 정도 후에 적용된 모습을 보실 수 있습니다.





요즘 감기가 정말 독하네요.
속도 안좋고 기침, 콧물, 두통, 몸살 장난 아니예요 ~_~

따뜻하게 입고 다니시고 감기 조심하세요~ :)
신고

댓글을 달아 주세요

  1. BlogIcon 원래버핏 2010.12.10 16:19 신고  Addr  Edit/Del  Reply

    잘 보고 갑니다.
    즐거운 하루 되세요.^^

  2. BlogIcon rimo 2010.12.10 20:29 신고  Addr  Edit/Del  Reply

    의외로 만들기 쉬웠네요>_<
    다른분들이 만드신거 쓰기만했는데, 이번엔 제가 만들어봐야겠어요^^

  3. BlogIcon 토나 2010.12.10 22:18 신고  Addr  Edit/Del  Reply

    저도 한참전에 파비콘 설정 하느라 이것저것 쪼믈락 거리던 생각이 나네요!
    블로그가 참 이쁘네요...^^ 아기자기 한게...

    • BlogIcon 그냥 꼬꼬마 2010.12.11 16:59 신고  Addr  Edit/Del

      감사합니다 ^^
      저도 처음에 파비콘 만들 때, 만들고 적용하는데 여기저기 엄청 건드려댔던 것 같아요 ㅋ

  4. BlogIcon 서관덕의 시간이 머문 작은공간™ 2010.12.16 17:12 신고  Addr  Edit/Del  Reply

    안녕하세요..^^ 좋은 포스팅 내용 잘봤습니다.^^
    인터넷 검색해보내.. 파비콘 만들 수 있는 사이트들이 참 많더군요..^^

    자주 놀러올께요..^^

    • BlogIcon 그냥 꼬꼬마 2010.12.16 18:22 신고  Addr  Edit/Del

      저도 알게된 몇군데 중에 가장 편했던 곳으로 한군데 소개한거였는데, 포스팅 이후 알아보니 더 많은 사이트가 있더라구요 @_@ㅋ
      직접 도트를 찍을 수 있는 사이트도 있고 ㅎ 다른 파비콘 사이트도 도전! 해봐야겠어요 ㅋ

  5. BlogIcon 발언 2011.01.29 14:57 신고  Addr  Edit/Del  Reply

    좋은글 감사합니다.

  6. BlogIcon tiffany bracelet 2011.09.23 01:13 신고  Addr  Edit/Del  Reply

    저도 처음에 html 버튼 모르고 있었는데 타이틀 바꾸고 싶어서 요리조리 찾아보다 발견했어요

  7. BlogIcon Tiffany Jewellery 2012.05.28 14:10 신고  Addr  Edit/Del  Reply

    시대는 인물을 낳고 그 인물은 책을 쓰며 책은 또다시 세상을 바꿉니다. [세상이 주목한 책과 저자]에서 다루는 책과 저자는 어쩌면 그 자체로 인류의 역사이기도 합니다. 14세기 이후 시대는 ..

티스토리 툴바