G Y U L O G

title

파비콘을 바꾸는 방법에 대해서 포스팅해봤습니다.

 

파비콘이란 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘입니다. 즐겨찾기, 애플OS의 경우 책갈피에서 보여지는 아이콘이기도 합니다.

 

1

파비콘을 넣으려면 이미지를 ico확장자로 바꿔줘야합니다. 개인이 바꿀 수도 있겠지만 사이즈 별로 생성되어야 하므로 자동 변환기 사이트에서 진행하는 것을 추천드립니다.

 

https://convertico.com/

 

ConvertICO.com - Convert PNG to ICO and ICO to PNG files

This free online icons converter allows you to convert PNG to ICO files with ease.

convertico.com

https://www.favicon.cc/

 

favicon.ico Generator

Preview Favicon in original size:

www.favicon.cc

파비콘을 만들어주는 사이트입니다. 

 

favicon.cc의 경우 직접 도트로 그려서 만들 수도 있습니다.

 

기능 상으로는 favicon.cc가 훨씬 다양한 기능을 가지고 있습니다. 저는 convertico에서 만들어보고, favico.cc에서 만들어봤는데 favico.cc가 훨씬 옛날 레트로 느낌이 나서 좋았습니다.

 

다만 favico.cc의 경우 64x64까지 지원돼서 자유로운 표현이 힘들다는 단점이 있습니다.

 

2

PNG파일을 넣고 변환을 하시면 아래 사진처럼 됩니다. 

 

Your icons will appera here 대신에 제가 쓸 아이콘이 생겨났죠.

3

이때 주의할 점이 있어요. 지금 파비콘의 용량이 보이시나요? 100kb가 넘습니다.

 

티스토리에서는 파비콘 크기제한을 100kb로 두어서 100kb밑으로 파일을 만들어야합니다.

4

CHOOSE ICON LAYER SIZES를 눌러서 이미지 타입을 빼주시면 용량을 줄일 수가 있습니다. 

 

가장 편한 방법은 제일 용량을 많이 차지할 256x256을 해제해주시면 바로 될 가능성이 높아요.

 

또 다른 방법으로는 이미지를 준비하실 때부터 배경을 없애거나 PNG만들 때 품질을 낮춰서 용량을 줄이고 변환하는 법도 있습니다.

 

저도 배경을 없애고 싶었지만 귀찮은 작업이라 나중으로 미루기로 했습니다. 

+)favico.cc에서 이미지를 import하시면 도트로 변환해줍니다.

 

5

블로그 설정에 있는 파비콘 카테고리에서 아까 만든 ico파일을 넣어주면 됩니다.

 

저장 후 잠시만 기다리시면 적용되어있는 모습을 볼 수 있습니다.

 

6

댓글과 공감은 큰 힘이 됩니다.

공유하기

facebook twitter kakaoTalk kakaostory naver band