파비콘favicon 만들기, 적용 및 디자인

파비콘 만들기, 적용 및 디자인

파비콘은 주소창에 뜨는 웹사이트 아이콘을 말합니다. 아래 캡쳐 사진을 보면 이해하기 더 편하실 거예요. 이 아이콘은 사이트를 태표하는 로고처럼 사용되기도 하고 주소창뿐 아니라 즐겨찾기로도 등록됩니다. 파비콘으로 내 블로그나 홈페이지에 차별성을 주면 방문객들에게 인식이 잘 되겠죠. 이번 포스팅에서는 파비콘을 어떻게 만다는지, 어떻게 적용하는지 그 방법에 대해 알아보겠습니다.

파비콘

파비콘 만드는 방법

파비콘을 만들 때 이용할 수 있는 여러 사이트가 있습니다. 그중에 저는 favicon.io라는 사이트를 이용했습니다. 

Favicon.io - The Ultimate Favicon Generator (Free)

사이트에 들어가면 세 가지 방법이 나옵니다. PNG파일인 이미지나 로고를 파비콘으로 만드는 것, 텍스트 파일을 파비콘으로 만다는 것, 이모티콘으로 파비콘을 만드는 방법입니다. 저는 이모지를 이용해 파비콘을 만들었습니다.

 

이모지로 파비콘을 만드는 메뉴(제일 오른쪽)로 들어가면 카테고리를 정하고 원하는 이모티콘을 고를 수 있습니다. 기본 설정은 Smileys&Emotion인데요. 저는 예시로 Animals&Nature에서 Butterfly(나비)를 선택해 봤습니다.

파비콘을 만들고 싶은 아이콘을 선택한 후 파일을 다운로드해 줍니다. 그럼 압축파일이 다운로드되는데 압축을 풀고 파일을 등록해 주면 됩니다.

 

블로그 관리 홈 제일 하단에 있는 관리-블로그로 들어가면 아이콘, 파비콘 파일을 업로드할 수 있습니다. 아이콘 최적 사이즈는 32*32, 파일 형식은 png나 jpg로 불러오면 되고 파비콘에는 ico파일을 불러오면 됩니다.

 

파일을 불러오면 아래처럼 내가 원하는 아이콘이 보입니다. 변경사항 저장을 해 주면 끝입니다. 적용될 때까지 며칠이 걸릴 수도 있으니 당장 파비콘이 나타나지 않아도 며칠 기다려 보세요. 혹시 며칠을 기다려도 변경되지 않는다면 파일 이름을 변경한 뒤 다시 업로드해 보시는 것도 방법입니다.

저는 텍스트로 만들어서 파비콘을 설정했습니다. 작은 아이콘이지만 큰 변화가 생긴 것 같은 기분이 드네요. 지금까지 무료로 쉽고 간단하게 파비콘을 만들고 티스토리 블로그에 등록하는 방법을 알아봤습니다.