내 블로그에 파비콘 적용해보기 (feat. 그림판)

안녕하세요,

처음 블로그를 만들고 설정화면에 들어갔을 때 '아이콘', '파비콘'이 비어있는 것이 눈에 띄었는데, 그중에서도 파비콘은 좀 생소해서 뭔지 궁금했어요.

아이콘 파일(ICO)을 등록하는 건 알겠는데, 아이콘 파일을 어떻게 만드는지도 모르고 어떻게 이용되는지도 몰라서 그대로 두었었죠.

 

그래서 오늘은 파비콘을 쉽게 만들고 적용시키는 방법을 알아볼게요!

 

파비콘이 뭔지 사전에서 먼저 찾아볼게요.

사전을 봐도 텍스트만 봐서는 잘 안 와닿을 수 있어서 예시로 보여드릴게요!

 

이제 딱! 아시겠죠? 사이트의 프사(?)라고 생각하시면 쉬울 것 같아요.

 

제 블로그 프사는 검은색  T 네요 T.T

 

다른 사람들은 파비콘을 어떻게 만들었나 하고 보니 넘나 쉽다면서 포토샵을 사용하셨네요.

 

blog.naver.com/yutyomi/221790679615

파비콘 만들기 : 넘나 쉬워서 오분이면 충분합니다♥

그런데 전 포토샵이 없는 걸요T.T  포토샵 사용을 잘 하시는 분은 위의 글을 참고하셔도 될 것 같습니다.

 

1. 파비콘 디자인 컨셉 정하기

제 사이트 프사(파비콘)를 예쁘게 이미지로 표시하면 좋겠지만, 저는 디자이너가 아니라서 알파벳으로 표시하는게 제일 쉽고 깔끔할 것 같았어요.

 

제 사이트의 메인 키워드는 JACKPOT 이니까 JP로 파비콘을 만들어볼게요.

 

 

2. 파비콘 만들기

이미지 편집 프로그램이 없어서 일단 그림판을 열었습니다.

 

그리고 그림판 오른쪽 하단을 드래그해서 사이즈를 160 x 160 px로 조절해줬어요.

 

파비콘 사이즈는 16x16이지만 너무 작아서 안보이더라구요. 그래도 잘 안보여서 200%로 확대했어요

 

우선 배경색을 칠하기 위해서 '색 채우기' 아이콘을 누르고, 기본 색깔 중에 주황색을 선택했어요

 

그리고 배경을 클릭해주면! 이렇게 배경 완성!

 

이제 알파벳을 입력하기 위해, '텍스트' 아이콘을 눌러주세요

 

원하는 텍스트 색깔을 선택해주세요. 알파벳은 제가 원하는 위치에 배치하기 위해 J,P 한개씩 각각 입력했어요.

 

 

파비콘으로 사용할 이미지를 완성했으니, PNG 파일로 저장해줄게요.(JPEG도 상관은 없어요)

 

3. ICO 파일 변환

파비콘으로 사용하려면 ICO 파일이 필요한데 우리가 만든건 PNG 파일이었죠?

 

PNG 파일을 ICO파일로 변환하기 위해 아래의 사이트에 접속합니다.

 

www.favicon.cc/

favicon.ico Generator

 

Import Image를 누르고, PNG 파일을 선택한다음, Upload를 눌러주세요.

 

16x16으로 변환되면서 픽셀이 조금 깨지는 것 같아요. 

 

이 사이트의 좋은 점은 파비콘을 바로 수정해서 저장할 수 있다는 점이에요.

(그림판 없이 처음부터 이 사이트에서 만들어도 된답니다)

수정을 다 하셨다면 'Download Favicon'을 클릭해서 PC에 저장해주세요.

 

4. 블로그에 파비콘 적용

이제 블로그 관리자 모드에 들어가서, 블로그 관리를 눌러주세요

 

 

'불러오기'를 클릭하여 생성한 ICO파일을 선택 후 '변경사항 저장'하면 끝!

 

짜란~~ 이렇게 바로 적용이 되었습니다!

 

본인 사진으로 파비콘을 만드시는 분들도 계시던데, 파비콘은 최대한 심플하게 만드는 것이 좋을 것 같아요.

 

여러분은 어떤 파비콘을 선호하시나요?

 

여러분만의 예쁜 파비콘을 만들어서 프사를 바꾸세요~!!