파비콘(favicon) ICO파일 쉽게 만드는 방법(로고)

파비콘(favicon)은 인터넷 주소 탭에서 웹페이지 제목 왼측에 나타나는 작은 이미지 입니다.

 

파비콘 예시
파비콘 예시

티스토리나 구글블로그 모두 블로그 대쉬보드를 통해 파비콘 업데이트가 가능하지만 파일형식을 보면 .ICO 파일 형식을 지원한다는 것을 알 수 있습니다.

파비콘 조건

이제부터 ICO 형식의 파비콘을 쉽게 만들어 보겠습니다.

 

파비콘(favicon)을 쉽게 만드는 방법

파비콘 만들기 (Favicon.io)

 

1. https://favicon.io/  에 접속합니다.

파비콘 제네레이터를 통해  PNG파일을 ICO로 바꾸거나 TEXT 파일을 ICO로 혹은 이모티콘을 ICO파일로 변경이 가능합니다.

 

세 가지 방법을 활용한 파비콘 생성 방법입니다.

 

가지고 있는 이미지를 활용해서 ICO로 변경

우선 본인이 가지고 이미지를 활용하는 방법입니다.

컨버터에 이미지를 끌어다가 놓고 다운받게 되면 

Favicon으로 사용되어질 ICO 형식의 파비콘과 함께  다른용도로 활용할수 있는(아이콘) PNG 파일이 같이 생성이 됩니다.

 

저는 일부러 정사각형 비율이 안맞는 파일을 선택했지만 이미지가 자동으로 정사각형 비율로 맞춰지기 때문에 되도록이면 사용할 이미지는 정사각형의 이미지 파일을 사용하시기 바랍니다.

 

주의사항

  • 가로세로 1:1비율(정사각형) 의 이미지를 사용할 것
  • 저작권 관련 문제가 없는 이미지를 사용할 것

 

Text 를 ICO로 만드는 방법

이 방법은 저작권 관련해서 문제도 없을 뿐더러 이미지를 찾으러 다니지 않아도 손쉽게 예쁜 파비콘을 만들 수 있다는 장점이 있습니다.

 

사용법은 간단합니다.

  • 본문 : 단어(한글자 내지 두글자 정도가 예쁜것 같아요)를 입력합니다. 
  • 배경 : 사각형, 원형, 둥근 사각형 세가지 유형이 있습니다.
  • 글꼴 변경, 색상, 배경색 등을 자신의 취향에 맞게 변경합니다.

 

완성전 우측 상단에서 미리 파비콘을 볼 수 있습니다.

저도 제 블로그에 맞는 파비콘을 저도 만들어 보았습니다.

 

주의사항.

  • 한글이 지원이 되지 않는 단점이 있습니다. 영어나 숫자를 활용하시기 바랍니다.

 

이모지를 활용한 방법

이미 사이트에 구현해 놓은 이모지를 활용하는 방법입니다.

파비콘을 다운로드만 받으면 손쉽게 만들어지는 장점이 있습니다. 하지만 위에 문구대로 사용 전 라이선스를 확인해야하는 단점이 있습니다.

 

추가 : 간단한 로고 만들기

 

홈페이지 로고 생성기를 통해 간단한 로고를 만들 수 있습니다.

위에 텍스트로 파비콘을 만들때와 비슷한 형식으로 심플한 디자인 변경이 가능합니다.

 

역시 한글이 지원되지 않는 단점이 있습니다.

 


간혹 사이트에서 이모지 탭이나 글꼴 변경탭을 눌러도 아무것도 나타나지 않는 경우가 있는데 번역기능을 비활성화 한 상태에서 파비콘을 만드셔야 원활한 이용이 가능합니다.

 

 

파비콘은 최소 16x16 픽셀이어야 합니다.  파비콘과 다양한 사이즈의 PNG 파일은 홈페이지 아이콘이나 프로필용으로도 활용이 가능합니다. 예쁜 블로그를 만드는데 도움이 되셨으면 좋겠습니다.