png ico 변환 파비콘 사이즈 블로그 티스토리 파비콘(favicon) 만들기 의외로 쉽답니다.

png ico 변환 파비콘 사이즈 블로그 티스토리 파비콘(favicon) 만들기 의외로 쉽답니다.

 

파비콘(favicon)은  웹상에서 주소창에 영문주소 앞에 표시되는 조그만 아이콘으로

즐겨찾기 아이콘의  즐겨찾기(favorites)와 아이콘(icon)의 합성어 입니다.

 

 

파비콘 사이즈는 16x16 크기이고

이미지를 확장자 png로 저장후 

 png ico 변환 을 하는데요

 

마이크로소프트 윈도의 아이콘에 쓰이는 그림파일 포맷인

 ico 확장자로 바꿔 주면 됩니다.

 

즉

 

 16x16 크기의 파비콘 사이즈를 만든 후

( png ico 변환 ) 

파비콘 이름을 favicon.ico로 한 다음

웹 사이트의 루트 디렉터리에 갖다 넣으면 됩니다.

 

 

 

 

위 이미지의 빨강 사각형 모양들이 모두 파비콘 (favicon) 입니다.

 

 

웹브라우저의  주소창에 표시되면서

웹사이트나 웹페이지를 대표하는 아이콘 인 것이지요!!

 

파비콘을 만들어주는 웹사이트들도 많지만 포토샵에서 아주 간단하게 만들어 볼수 있습니다.

 

 

 

 

포토샵에서 파비콘 사이즈

가로 세로  16x16 크기의 pixels 사이즈를 보면 아주 작습니다.

 

파비콘은 내사이트의 대표 이미지인 만큼 정성을 들이는 분들도 많기때문에

이렇게 작은 사이즈에서는 작업하시지 마시고

 

아이콘 사이즈는 64x64 크기의 pixels 사이즈에서나

아님

더 큰 사이즈에서 작업하신후

나중에 줄여주시면 됩니다.

 

작업하실때는 16의 배수로 작업하시는게

나중에 줄여줄때 좀더 깔끔해 지니 참고 하심 좋겠습니다.

 

 

 

저는 아이콘 사이즈는 64x64 크기의 pixels 에서

파비콘으로 사용할 이미지를 불러왔습니다.

 

 

 

 

그리고

포토샵에서 image size 선택후

파비콘 사이즈

가로 세로  16x16 크기의 pixels 사이즈로 줄여주었습니다.

 

 

 

 

png ico 변환

포토샵 확장자는 ico가 없기 때문에

줄여준 파비콘 사이즈를 png ico 변환을 위해

확장자 png로 저장하였습니다.

 

 

 

 

파피콘 png 파일이 저장된 폴더에서

바로 확장자만 png에서 ico로 바꿔줍니다.

 

바꿔줄때

"

파일의 확장명을 변경하면 사용할 수 없게 될 수도 있습니다

변경하시겠습니까?

"

라는 어마무시한 메세지가 나오는데요

그냥 무시하시고

예를 선택한후 변경해주세요

 

 

그리고

제가 이파비콘을 만드는 이유는

티스토리 블로그 스킨작업중 하나인 파비콘 꾸미기를 하기 위해서 입니다.

 

 

 

 

윈쪽 상단 1을 보면 아직 나의 파비콘은 적용이 되기 전입니다.

 

티스토리 블로그 관리자페이지 > 2번(프로필이미지영역) 을 클릭하거나

 

 

 

 

티스토리 블로그 관리자페이지 > 3번 블로그 를 클릭하고 들어가면

 

 

 

위와 같이

블로그 설정하는 페이지로 이동을 합니다.

티스토리 블로그 파비콘 꾸미기는 여기서 설정해 줍니다.

 

 

 

 

파비콘 불러오기를 클릭하여

확장자가 ico인 저장해놓은 파비콘을 선택한후 열기를 합니다.

 

 

 

 

 

그러면 이렇게 아래 파비콘 앞에 파비콘 이미지가 올라옵니다.

 

그리고

 

저장완료를 해야만

화면상단 주소줄앞에 내가 만든 파비콘 모양으로 적용된 것을 확인할 수 있습니다.

 

 

*** 파비콘 만들어서 적용해보기 ***

 

첫째

포토샵으로 간단하게 파비콘을 만들고

 

둘째

파비콘 사이즈로 포토샵에서 줄여주고

 

세째

파비콘 사이즈로 줄여놓은 이미지를 확장자 png로 저장하고

 

네째

파이콘이 저장된 폴더에서 바로 확장자 png를 ico로 바꿔줍니다

png ico 변환 까지 해주면

파비콘 만들기는 완성입니다.

 

그리고

내 티스토리 블로그에 적용하기!!

 

블로그 관리자 페이지 > 블로그 설정에서

파비콘 불러오기를 한 후

만들어 놓은 파비콘 아이콘을 선택한후

불러오기 저장->저장완료를 하면

내 티스토리 블로그에도 나의 파비콘 아이콘 꾸미기가 설정됨을 볼수 있습니다.

 

파비콘 불러오기를 한 후

만들어 놓은 파비콘 아이콘을 선택한후

불러오기 저장->저장완료를 하면

내 티스토리 블로그에도 나의 파비콘 아이콘 꾸미기가 설정됨을 볼수 있습니다.

 

 

이상으로 파비콘 만들어서 내 티스토리 블로그에 적용해 보았습니다