본문 바로가기
IT/note

나만의 파비콘을 만들어보자. 파비콘 생성기, favicon generator

by 어느해겨울 2022. 1. 15.

파비콘 생성기, favicon generator

요새는 온라인으로 실시간으로 무언가 작업하는 사이트가 많이 생겼다.

실시간 컴파일러, 실시간 이미지 생성기, 실시간 텍스트 검출기 등등..

이러한 풍족한 시대에 그림판을 켜서 16x16 도트 찍던 파비콘은 이제 안녕.

 

텍스트를 기본으로 하는 이 온라인 파비콘 생성 사이트에서 빠르고 간단하게 나만의 파비콘을 만들어보자.

 

https://favicon.io/favicon-generator/

 

Favicon.io - The Ultimate Favicon Generator (Free)

With Favicon.io you can quickly generate a favicon for your website for free!

favicon.io

 

생성기를 통해 빠르고 간단하게 만들어진 작고 귀여운 나의 파비콘 :)

 

생성 방법을 살펴보자.

사이트의 UI 구성은 심플하고 직관적이라 어려울 것이 없다.

 

Generate Form Text의 내용을 보면 다음과 같다.

항목 설명
Text 파비콘 안에 들어갈 문자 입력, 한글자 또는 작은 폰트 사이즈로 두글자까지는 이쁘게 나오는거 같다.
Background  파비콘 배경 모양 선택. 사각형, 원형, 라운드형 3가지가 있다.
Font Family 폰트 선택, 구글 폰트에서 제공된다. 개인적으론 둥글둥글한 폰트가 이뻐보인다.
Font Variant 폰트 스타일 선택, 폰트마다 제공되는 스타일이 다르다. bold, regular, italic 등등.
Font Size 폰트 사이즈 선택, 숫자를 바꿔가며 배경 안에 들어가도록 하자.
Font Color 폰트 색상 팔렛트, 다양한 색상이 제공되니 마음에 드는 걸로 선택하자.
Background Color 배경 색상 팔렛트, 역시 마음에 드는 색상을 선택하자.

* 이 사이트가 재밌는 건 파비콘 옵션을 변경하는 데로 이 사이트의 파비콘도 변경이 된 걸로 보인다.

아마 실제 적용되면 이런 느낌이에요~ 라고 알려주는 듯하다.

배려심 깊은 녀석..

 

화면 하단을 보면 다운로드 버튼을 눌렀을 때 제공되는 파일들의 정보가 있다.

안드로이드 크롬용 192x192, 512x512 PNG 파일, 애플 아이콘용 PNG, 파비콘 16x16, 32x32 PNG,

그리고 favicon.ico 사이즈 별로 정리해서 제공해주는 게 너무 편리하고 좋았다.

이런 사용자 밖에 모르는 바보..

 

다운로드한 파일을 열어보자.

역시 위의 설명과 같다. 본인은 압축을 풀어 favicon.ico 만 개인 홈페이지와 이 블로그에 설정을 하였다.

 

여기까지 파비콘 생성과 사용까지 설명을 마친다.

 

* 티스토리 파비콘 적용

블로그 관리 ▷ 좌측 메뉴 중 관리> 블로그 선택 블로그 설정 > 파비콘 불러오기

위 과정을 통해 블로그에 파비콘을 설정할 수 있다.

 

끝.

 

 

댓글