안녕하세요.
오늘은 파비콘 만들기에 대해 알아보겠습니다.
요즘은 블로그, 개인 웹사이트 등 많은 분들이 운영하고 계시는데요,
블로그나 웹사이트를 만드실때 필수로 제작하여 설정해야하는 것 중 하나인 파비콘은 본인들의 웹사이트를 대표하는 아이콘이라고 보시면 되겠습니다.
아래에 소개 및 기능과 함께 또 어떻게 만들어야하는지에 대해 자세히 설명드리겠습니다.
1. 파비콘이란?
파비콘(Favicon)은 Favorite icon 의 줄임말로, 블로그나 홈페이지와 같은 웹사이트를 대표하는 작은 아이콘 입니다. 또한 웹 브라우저의 다양한 위치에 표시되어 사용자가 해당 웹사이트를 쉽게 인식하고 접근할 수 있도록 하며 운영하는 웹사이트의 브랜딩으로도 작용됩니다.
2. 기능 및 역할
브라우저 탭
웹 브라우저의 탭에 표시되어 여러 개의 탭이 열려 있을 때도 사용자가 원하는 웹사이트를 빠르게 찾을 수 있게 합니다.
북마크
사용자가 즐겨찾기에 추가한 웹사이트의 목록에 표시되어 시각적인 구분이 가능해집니다.
주소 표시줄
브라우저의 주소 표시줄 옆에 표시되어 웹사이트의 아이덴티티를 강화됩니다.
홈 화면 아이콘
모바일 장치에서 홈 화면에 추가된 웹사이트의 아이콘으로 사용됩니다.
탐색기
일부 운영체제에서는 파일 탐색기나 데스크탑 바로가기 아이콘으로도 사용되곤 합니다.
3. 제작 포맷
- .ico : 여러 크기의 아이콘을 한 파일에 포함할 수 있어 주로 사용되는 포맷입니다.
- .png : 고행상도의 투명 이지를 지원하여 많이 사용됩니다.
- .svg : 벡터 그래픽으로써 크기에 영향을 받지 않으며 선명함을 유지하는 포맷입니다.
4. 파비콘 사이즈
일반적으로 16×16, 32×32, 48×48 픽셀을 많이 사용합니다.
그러나 요즘은 사이즈에 제한없이 더 큰 크기의 이미지로 제작하여 사용하기도 합니다.
제 블로그의 파비콘 사이즈는 512×512 사이즈로 제작됬습니다.
5. 디자인 꿀팁
- 단순함 : 크기가 작아 복잡한 이미지는 잘 보이지 않습니다. 간단한디자인으로 제작되어야 합니다.
- 인식성 : 웹사이트의 로고나 주요 상징을 사용하여 사이트를 쉽게 접근하고 인식할 수 있도록 해야합니다.
- 일관성 : 웹사이트의 전체적인 디자인과 브랜드 이미지와 일관되도록 해야합니다.
- 투명 배경 : 배경을 투명하게 만들어 방문자의 PC 테마에 제한 없이 잘 보이도록 해야합니다.
6. 파비콘 만들기
- 아래 제작 사이트 링크에 접속합니다.
- 좌측 상단 메뉴중 Letter(글자) 또는 Emoji(이모티콘) 중 하나를 선택합니다.
- 삽입될 글자 또는 이모티콘을 입력하거나 선택하여 채웁니다.
- 원하는 배경색을 선택합니다.
- 디자인이 만들어졌다면 이미지 아래의 SVG / PNG 중 하나를 클릭하여 다운로드 받습니다.
제 블로그의 경우 Emoji 를 사용하여 제작하였으며, 사이즈는 기본 셋팅값 그대로 설정하여 PNG 로 사용하였습니다.
7. 마치며
소개 및 기능 등 간단하게 정리하여 정리해드렸습니다.
만드는 방법은 이미지로 설명하지 않아도 아주 쉽고 간단하게 제작하실 수 있고, 작은 이미지지만 본인들의 웹사이트의 브랜딩과도 같은 이미지로써 사용되니 꼭 잘 만들어 사용하기 바랍니다.
이번 포스팅을 통해 웹사이트나 블로그를 운영하려 하시는 분들에게 큰 도움이 되었으면 좋겠습니다.
>>> 메인 페이지 바로가기