본문 바로가기

IT.컴퓨터

파비콘(Favicon) 만들기 쉬워요! 티스토리 블로그에 적용하기

 

안녕하세요

오늘은 웹브라우저 주소창에 보여지는

미니 아이콘 파비콘(Favicon) 만들어서

블로그에 적용하는법을 알아보겠습니다.

 

 

 

우선 파비콘이 어떤건지 알아봐야겠죠?

바로 이거에요

 

 

제 블로그 "널알려줘" 티스토리 블로그에

적용한 파비콘입니다

아주 심플하죠?

^^ 세상모든 궁금한것을 알려준다는 의미로

물음표를 넣어서 파비콘을 만들었습니다.

 

그럼 또 다른형태의 파비콘을 한번 만들어보겠습니다.

우선 간단한 이미지를 만들수있는

그림판이나 이미지 저작툴을 열어주세요

 

저는 픽픽(picpick) 이라는 이미지 저작툴을 쓰는데요

복잡한 파비콘 만드시려는것이 아니면

그냥 그림판으로 작업하셔도 됩니다

 

참고로 픽픽은 네이버 자료실에서 다운 받을수있습니다

 

 

픽픽을 열어서 새로만들기를 했습니다.

첫화면에 캔버스 사이즈가 나오는데요

캔버스 사이즈는 크게하든 작게하든 상관없는데요

가로/세로 사이즈를 동일하게 해주셔야

파비콘 자동변환시 이미지가 덜깨지거든요

 

저는 가로세로 150픽셀로 캔버스를 만들어보겠습니다.

 

위의 그림과같이 캔버스 사이즈를 지정하고

새로만들기를 클릭하면

아래에 제가 지정한 배경색에

150px X 150px 의 캔버스가 만들어졌네요

그럼 여기다가 텍스트를 입력해볼께요

 

아래 그림에서 메뉴중에서 텍스트를 클릭하고

텍스트를 입력할 영역(캔버스내) 드래그 해줍니다.

 

 

 

캔버스에 글자가 보일 최대크기 영역으로

드래그 해주면

글자입력창이 나타납니다

저는 보라색 네이버 ^^ 파비콘을 만들어봤네요

저는 개인적으로 이것저것 폰트를 써보니

파비콘에 쓰는 무료폰트는 견고딕이 가장 좋더라구요

 

 

 

위 그림처럼 사용할 파비콘 이미지를 만들었다면

다름이름으로 저장을 해줍니다.

여기서 가급적 파일형식을 png 로 해주세요

해상도가 가장 뛰어난 이미지 형식으로 알고있습니다

 

 

이렇게하시면 파비콘으로 만들 대상 이미지는

만들었구요

그럼 일반이미지를 파비콘으로 변환해줘야겠죠?

요즘은 무료로 파비콘으로 변환해주는 웹사이트들이 많더라구요

저는 아래 사이트에서 만들었네요

 

https://www.favicon-generator.org/

 

위 사이트 메인페이지에 아래와같이

파비콘으로 변환할 이미지를 업로드하는 부분이 나오는데요

그럼 위에서 만들어준 파비콘 대상 이미지파일(XXX.png) 를

찾아보기로 선택해줍니다

 

그리고 "Create Favicon" 을 클릭해줍니다

 

 

순식간에 변환이 끝나고

아래와같이 만들어진 파비콘을 다운받을수 있는

링크가 생성됩니다.

링크를 클릭해서 내 컴퓨터로 다운로드 받아주세요

파비콘은 파일확장자가 .ico 입니다

 

 

내려받은 파비콘을 이제 블로그에 적용만하면 끝이네요

 

저는 티스토리 블로그를 사용하고있어서

티스토리를 기준으로 설명드릴께요

 

티스토리 관리자 > 관리 > 블로그 메뉴를

클릭합니다.

 

파비콘 불러오기를 통해서

앞서 만든 .ico 파일을 선택하고

변경사항을 저장해주시면 됩니다

 

 

그럼 파비콘 적용하기가 끝이났네요

이제 웹브라우저를 새로 열어서

본인의 블로그 주소를 입력해서 접속하면

웹브라우저 주소창 맨 앞에 파비콘이 보일꺼에요

혹시나 안보이면 쿠키 때문일수 있으니

F5 를 눌러서 새로고침해주세요

 

캐릭터 이미지로 해보려했는데

파비콘이 워낙 작다보니 적용하면 깨져서

무슨모양인지 구분이 잘 안되더라구요

그냥 네이버나 다음 구글처럼

알파벳 글자나 특수문자 한개로 만드는게

가장 깔끔하고 보기 좋은것 같습니다