파비콘 만들기, 포토샵 없이도 아주 쉬워요.

혹시 파비콘이라는 이름을 들어보셨나요?

저도 참 낯선 단어였는데 이번에 블로그를 공부하면서 무엇을 지칭하는지 알게 되었답니다.

'파비콘(favicon)'은 이름에도 알 수 있듯이 'Favorite + Icon' 의 합성어로 우리가 사이트 즐겨찾기를 하면 사이트명 앞에 항상 따라오는 아이콘을 말합니다.

 

넷플릭스 파비콘은 'N'

네이버 파비콘은 초록색 사각형에 'N'

파비콘은 또 다른 앰블럼이기도 하다.

우리가 익히 알고 있는 티스토리의 'T'

 

사용자 유입에 직접적으로 도움이 되는 건 아니지만 이 사소한것 하나가 블로그 전체의 이미지를 보다 전문적으로 보이는 효과는 분명히 있다고 말해주고 싶네요. ^0^

 

 

 

아무툴이라도 상관없어요.

 

썸네일을 만들때 사용한 '미리 캔버스', 'CANAVA', '포토샵', '그림판' 만으로 누구나 쉽게 만들 수 있답니다.

지난 번 소개한  '미리 캔버스'를 이용해 알려 드리지만 포토샵 그래픽 툴이 더 익숙하시고 도트 작업에 자신이 있으신 분이라면 더 선명한 파비콘을 위해 도트작업 하시는 걸 추천합니다.

(* 메이저 회사들의 파비코이 유독 선명한 이유도 모두 16x16 캔버스에 도트작업을 했기 때문)

 

파비콘 대표사진

 

파비콘은 SIMPLE이 최고!

 

파비콘 특성상 16x16픽셀의 작은 ico 파일이므로 구조가 복잡하거나 난해한 이미지보다 최대한 단순하고 직관적으로 디자인이 되어야 보기가 좋습니다.

또한 한글 폰트보다 영문의 가시성이 좋기 때문에 포토샵을 이용한 도트 노가다 작업이 아니라면 무조건 영문폰트를 추천합니다.

 

1. '미리 캔버스'를 이용한 파비콘 만들기

가지고 계신 그래픽 툴이나 웹 이미지 툴이 없으시다면 '미리 캔버스'를 강력하게 추천합니다.

16x16픽셀 캔버스가 제일 이상적이나 '미리 캔버스'에서 만들 수 있는 최저 사이즈는 32x32이므로 32x32로 설정합니다.

 

32x32 일때 잘보이던 한글 폰트도 16x16으로 변환하면 저렇게 다 뭉게진다.

 

직접입력 -> 32x32로 설정을 해줍니다. 16x16이 가장 이상적이나 지원안합니다.

대부분의 사이트가 가시성을 위해 둥근 바탕을 많이 써서 저 역시 그렇게 하도록 할게요.

 

색상을 지정할 수 있는데 저 같은 경우 짬뽕국물을 표현하기 위해 오렌지 빛깔을 선택했습니다.

 

그 후 흰색 글자를 넣어주기만 하면 끝이랍니다.

 

요소등에서 자신이 원하는 이미지가 있는지 확인하시고 없으면 폰트를 강력히 추천합니다. 처음에 짬뽕으로 하려 했으나 16x16 작업시 폰트 자체가 깨져 식별이 불가능하므로 단순하게 Cloud의 C만 넣어줬습니다.

 

단순하면 단순할 수록 가시성은 올라갑니다.

cloud 로 저장 할게요. 아무것도 안 적어주셔도 된답니다. 평범하나 제법 괜찮은 녀석이 만들어진 듯 합니다.

 

확장 파일을 반드시 PNG로 해주시고 투명한 배경에 체크를 해주셔야 합니다.

 

2. 파비콘 파일 32x32 PNG 확장자를 16x16 ICO 파일로 변환하기

원하는 디자인이 나왔다면 티스토리에 삽입하기 위해서 ICO 확장자로 반드시 변환해줘야 하는데 그럴려면 변환 사이트의 도움이 필요합니다.

방금 소개 해드린 사이트가 다소 많은 광고로 자칫 헷갈릴 수 있으니 아래의 이미지와 설명을 참고하여 손쉽게 변환하세요.

 

https://www.favicon-generator.org/

Favicon & App Icon Generator

파일선택에서 '미리 캔버스'나 다른 곳에서 만든 변환하고자 하는 PNG파일을 눌러줍니다.

'Generate only 16x16 favicon.ico' 라디오 버튼을 누른 후 'Create Favicon'을 눌러주면 변환이 완료 됩니다.

 

DOWNLOAD 는 광고클릭 유도 배너이니 파비콘 옆에 있는 'Download the generated favicon'을 눌러주면 다운이 됩니다.

 

3. Favicon.ico 파일을 티스토리에 적용하기

티스토리 관리 카테고리에 있는 '블로그'를 클릭하면 보시는 것과 같이 '파비콘 (파일형식 ico)'라고 적혀있는 부분에서 방금 만든 ico 아이콘을 불러오기 후 '저장완료'하시면 등록이 완료 됩니다.

 

파비콘 만들기 아주 쉽죠? 간단하면서도 홈페이지 색깔을 가장 잘 나타낼 수 있는 기능입니다.

 

윈도우 탭화면에서 티스토리 T가 아닌 자신의 파비콘으로 보입니다.

 

별거 아닌데 제 블로그가 특별하게 보이는건 나만 그런가요? ㅋㅋ

 

---

빠르게 숙련만 된다면 컵라면 물 넣고 기다리는 시간동안에도 만들어 적용할 수 있는게 파비콘인듯 싶습니다.

저처럼 '파비콘'이라는 단어가 생소한 사람도, 저처럼 컴맹인 사람도, 손쉽게 만들 수 있을 듯 하니 다들 한 번씩 만들어 보시는 걸 추천합니다.

 

오늘 포스팅이 도움이 되었으면 '공감하기'와 '구독하기' 눌러 주세요 ^0^