본문으로 바로가기

[티스토리] 파비콘 만드는 법

category 만들기이야기/블로그 2014. 7. 23. 13:21

 

 

댓글 또는 방명록 작성할때 보이는 파비콘~ 사용하고 계신가요?

 

샐리는 지금껏 사용하지 않다가 만들게 되었답니다. ^^

 

이미 가지고 있는 jpg 파일로 가지고 있는 사진으로 파비콘을 만들고 사용하는 법을 설명하겠습니다.

 

 

 

 

◈. 무료로 파비콘을 만들어주는 사이트 이용하기

 

    1. http://favicon-generator.org/  에서 만드는 법

 

 

 

 

 

사이트에 접속하면 바로 위의 화면이 보입니다.

 

찾아보기 버튼을 클릭하여 파비콘으로 바꾸고자 하는 이미지파일을 열고

 

화살표의 Create Favicon을 클릭합니다.

 

 

그럼 곧 위의 화면으로 바뀌는데 화살표 부분의 파란 글씨를 클릭하면 만들어진 파비콘이 다운로드 됩니다.

 

 

적용을 하고 확인을 위해 댓글 달았던 것을 확인하니

 

 

 

 

헉.... 파비콘이 뭉개져 보입니다 ㅠ.ㅠ

 

다른 사진도 마찬가지

 

저만 이런건가효? 흑흑

 

 

 

 

◈. 파비콘 포토샵 (Jpg -> Png)으로 만들기.

 

 

1. 포토샵에서 바꾸고자 하는 이미지파일을 엽니다.  File -> Open

 

 

 

 

2. 사진을 열어놓고 File -> Save for Web 를 선택합니다.

 

 

 

 

3.  Save For Web 창이 생기면 상단 메뉴중 2-Up 탭 선택

 

4.  오른쪽 상단 Settings -> PNG-24 선택 아래도 동일

 

5.  오른쪽 하단 메뉴에선 Image Size탭 선택하고 Width와 Height 를 100으로 하고 Quality 도 선택 후 Apply 클릭

 

 

 

6. 사진이 작아지면 Save클릭하여 원하는 곳에 저장합니다.

 

    아래 사진처럼 안내창 뜨면 OK 클릭

 

 

 

7. http://www.converticon.com/  사이트로 가서 Get Started 클릭하여 위의 포토샵에서 만든 Png파일을 선택합니다.

 

 

 

8. 사진을 열어 아래의 창이 뜨면 Export를 선택합니다.

 

 

 

 

9. Icon -> Original Size 선택하고 Save As 클릭하여 만들어진 ico파일을 저장합니다.

 

 

 

10. 티스토리 블로그 admin -> 기본정보 -> 블로그 정보 

 

     찾아보기를 눌러 위 과정에서 만든 Ico 파일을 열어줍니다.

 

     = 잘못넣어지면 삭제를 누르거나 다시 찾아보기를 선택하면 됩니다.

 

 

 

파비콘이 등록되었네요.

 

 

 

 

댓글을 확인해보니 아래와 같이 잘 보입니다.

 

 

 

 중요 : 파비콘을 저장해 놓아도 플러그인 설정을 하지 않으면 표시가 안된답니다.

 

 

 

11. 블로그의 admin -> 플러그인 설정 중 블로그 아이콘 표시에 확인을 클릭합니다. (샐리는 사용중이라 저장!)

 

 

 

 

 

블로그 아이콘 표시위에 홈페이지 아이콘 표시 부분을 설정하면 시간이 조금 걸리긴 하지만 아래와 같이 표시가 된답니다.

 

 

 

 

파비콘 만들고 설정하는것까지 다 끝났습니다.  

 

 

 설정을 하다 보니 샐리는 아이콘과 파비콘이 다른 이미지인데요.

 

 

 

 

아이콘의 이미지는 샐리의 블로그 댓글이나 방명록에서 보이고

 

파비콘은 다른 블로그에 댓글에만 보이더군요. ㅋ

 

자신의 블로그와 다른 블로그에 다른 이미지가 표시되길 원하는 분이 있을런지 모르겠지만 참고하세요.

 

 

 

TIFF 파일 JPG파일로 변환하기