파비콘(Favicon)의 의미와 만들기

파비콘이란?

파비콘은 Favorite Icon의 줄임말로

웹사이트의 탭이나 북마크에서 표시되는 아이콘을 말합니다.

 

파비콘예시

 

 

이렇게 사이트 이름 앞에 표시되어 사이트를 쉽게 인식할 수 있게 도와줍니다.

 

블로그를 하다 보니 파비콘이 있으면 사용자가 기억하기 쉽고 신뢰받은 사이트로  인식될 가능성이 높다고 하더라고요.

 

파비콘이 SEO(검색 엔진 최적화)에 적접적인 영향을 주진 않지만, 파비콘 자체가 구글 크롤러에 의해 인식된다고 해서 넣어보았습니다.

 

네이버블로그는 하위도메인이라 할 수 없지만, 티스토리나 구글블로거(블로그스팟), 워드프레스 등에는 파비콘을 적용할 수 있습니다.

 

파비콘은 내가 이미 브랜딩한 이미지가 있으면 그것을 파비콘으로 만들면 좋지만

저는 그런 것이 없어서 파비콘을 만들어주는 사이트를 찾아갔습니다.

 

제가 사용한 파비콘 생성 사이트는

 

https://favicon.io/

Favicon.io - The Ultimate Favicon Generator (Free)

입니다.

 

 

 

Favicon.io 에서 파비콘 만들기

 

favicon.io

 

 

 

따로 회원가입이나 로그인할 것 없이 바로 생성해 주니 참 편한 사이트입니다.

 

 

파비콘생성방법

 

 

이 사이트에서의 파비콘 생성 방법은 3가지가 있습니다.

 

1. 이미지 : 내가 이미 브랜딩할 이미지가 있다면 이미지로 만들 수 있습니다.

2. 텍스트 : 로고나 이미지가 없다면 원하는 문구로 만들 수 있습니다.

3. 이모티콘 : 이모지로도 파비콘을 생성할 수 있습니다.

 

 

이 중에서 제가 선택한 방법은 2번째- 텍스트로 만들기 입니다.

 

 

텍스트로 파비콘 만들기

 

텍스트로 파비콘 생성

 

 

파비콘이 될 아이콘은 굉장히 작기 때문에 폰트와 크기에 따라서 제대로 표시되는 글자수가 다릅니다.

 

맨 윗부분에 프리뷰가 있어서 자유롭게 텍스트와, 배경, 색깔, 폰트와 크기 등을 이리저리 바꿔보면서 본인의 마음에 드는 파비콘형태를 찾아 변환해 볼 수 있습니다.

 

 

만들 파비콘형태를 정했다면 

화면 아래에 다음과 같은 문구를 볼 수 있습니다.

 

 

파비콘설치

 

 

압축파일로 다운로드하고 설치한 뒤  html 편집의 head태그 안에 제시된 링크를 집어넣도록 되어있습니다.

 

저는 사실 저걸 못 보고 그냥 다운만 받았는데요,

티스토리같은 곳은 설정에서 업로드만해도 파비콘이 잘 보여서 따로 태그편집은 하지 않았습니다. 😅

 

 

생성된 파비콘들은 안내된 바와 같이

 

 

 

크기별로 png파일과 ico파일등 여러 개로 제공되었습니다.

 

 

티스토리의 경우

 

 

 

아이콘은 32x32, 64x64의 jpg, png 형식,

파비콘은 ico형식으로 나와있습니다.

 

Favicon.io 사이트에 다운로드한 여러 파일 중에 맞는 형식의 파일을 업로드하면 됩니다.

 

++구글 블로거스팟(Blogger)의 파비콘은 따로 사이즈가 없고, 100kb미만의 정사각형이미지가 필요합니다.

 

맺음말

 

favicon.io 사이트는 여러 번 다시 들어가서 파비콘을 새로 만들 수가 있어서 좋더라고요.

여기서 만든 png파일은 다른 사이트의 프로필사진으로도 사용해도 괜찮았습니다.

 

디자인을 잘하시거나 미적감각이 좋은 분들은 이런 사이트에 의존하지 않아도 되겠지만

저한테는 참 유용한 사이트여서 공유하고자 포스팅해 보았습니다. 🖐️