1. 파비콘이란?
2. 파비콘을 만드는 규칙?
3. 파비콘을 만드는요령
- 사이트의 텍스트
- 사이트의 색상컨셉
- 파비콘 모양 결정
파비콘 이란?
즐겨찾기 (Favorite) + 아이콘 (Icon)으로써 홈페이지 주소창에서 표시되는 사이트를 대표하는 아이콘입니다
확장자는 Ico 이며 사이즈는 16x16, 32x32, 48x48, 64x64 픽셀에서 적용됩니다
대표하는 이미지 또는 아이콘으로써 중요하지않은것 같으면서도 중요한 역할을 하는 아이콘입니다.
대부분의 사이트의 이용자들은 파비콘에 익숙해서 사이트에 접속하였을때, 이 사이트에 방문한적이 있다 또는 방문한적이 없다를 구분할 수 있습니다.
예를들자면 사람의 뇌는 글자 텍스트보다 그림을 더 빠르게 읽어 처리하게된다고 합니다
즐겨찾기의 목록을 둘러볼때 나, 검색 하였을때 파비콘이 붙어있는 사이트의경우 아무래도 익숙한 사이트라면 한번이라도 더 방문하기 마련입니다.
반대로 파비콘이 없다면 방문자들은 파비콘을 알아채지못하고 그냥 넘어갈 수 있다는겁니다.
그래서 중요하지않은것 같으면서도, 중요하다고 표현하였습니다
아래와 같이 우리가 자주 접하는 사이트들은 아래의 파비콘만 가지고도 어떤사이트인지 바로 구별이 가능합니다.
때문에, 파비콘은 브랜드 인지도는 물론이고 사이트의 신뢰도를 만들어주는 것중에 하나입니다.
파비콘을 만드는 규칙이 있는가?
만드는데에 있어 규칙은 정해져있지않지만, 파비콘에 사용되는 사이즈는 16x16,32x32,48x48,64x64 아주 작은 사이즈로 만들게되어있어 한눈에 사이트를 확인하기 좋게 만드는것이 일반적입니다.
아마존이나, 네이버, 다음, 구글, 페이스북 등 방문자가 많은 사이트들의 파비콘 만들어내는 규칙은
자신들이 서비스하는 서비스명의 첫글자와 사이트 컨셉으 색상 을 주로 들어가있습니다.
이 글을 읽어주시는 분 중, 파비콘을 만들어낸다면 저는 아래와같이 권장드리고싶습니다.
파비콘을 어떻게 만들면 좋을것 인가?
- 서비스하는 서비스명의 첫글자의 대문자 또는 소문자를 정합니다. 예를들어 서비스하는 서비스명이 Tistory 라면,
앞글자의 T 자를 선택한 뒤, 보기좋은 폰트를하나 정하도록합니다.
거창하게 만들어낼 필요도없습니다, 디자인을 할줄 몰라도 아주 간단하게 구글에서 지원하는 프레젠테이션을 열어 각가지 폰트를 적용해보는겁니다.
구글 프레젠테이션 바로가기
Google 프레젠테이션 - 프레젠테이션을 작성하고 수정할 수 있으며 무료입니다.
하나의 계정으로 모든 Google 서비스를 프레젠테이션으로 이동하려면 로그인하세요.
accounts.google.com
만들어낸 폰트중에서 아주 여러가지 나올텐데, 여기서 자신이 가장 보기 편하고 눈에 들어오는 폰트를 정하면 되는겁니다.
- 사이트 또는 홈페이지의 색상 컨셉이 있다면 색상컨셉을 활용하여 폰트색상 또는 배경색상을 정하도록합니다.
여러가지 색상을 펼쳐놓고 자신의 사이트와 맞는 색상을 선택하여, 폰트색상과, 배경색상을 정합니다.
- 마지막 배경은 테두리 처리를 할것인지 아니면 처리하지않을것인지, 처리를 한다면 어떤모양으로 할것인지 선택합니다, 테두리는 원형,정사각형,직사각형,마름모꼴,정사각형이지만 양끝이 라운딩처리된 정사각형 등으로 정해봅니다.
충분히 전문적인 지식이 없어도 아주 심플하게 내사이트를 대표하는 아이콘을 만들어낼 수 있습니다
위와같이 저는 만들어봤습니다.
만들었다면. 위를 캡쳐하여 정사각형으로 저장하도록합니다.
캡처프로그램이 없다면 아래의 경로를통해 캡처프로그램을 다운받아 캡처하도록합니다.
software.naver.com/search.nhn?query=%EC%BA%A1%EC%B2%98
캡처
OS 내 PC의 OS와 브라우저 정보입니다. 닫기 Browser 검색어 추천 '캡처'을(를) 검색한 사용자들이 최근 7일 동안 많이 다운로드받은 소프트웨어입니다. 오캠 스크린 레코더 및 화면 캡처 프로그램 반
software.naver.com
물론, 개인/기업의 라이센스 유무를보고 판단하도록합시다.
캡처하여 이미지파일을 저장합니다
jpg든 그무엇의 확장자든 관계없습니다.
그리고 저장한 확장자를 입력하고, to ico 를 입력합니다
아주 수많은 사이트가 나올건데 저는 아래의사이트에서 변환을 하였습니다
JPG ICO 변환 (온라인 무료) — Convertio
jpg 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요.
convertio.co
변환하여 아래와같이 만들어냈습니다
끝입니다.
'HTML' 카테고리의 다른 글
| HTML,JSP,PHP,ASP 파일불러오기 (인클루드) 사용하는법 (0) | 2020.12.08 |
|---|---|
| [자바스크립트] 경고창을 띄운후 링크페이지 이동 시키기 (0) | 2020.11.13 |
| 개발 첫 단계 홈페이지 만들기 1탄 - 윈도우10 Nginx + php 연동 (0) | 2020.10.15 |
| 도메인 구매 부터 등록까지 [홈페이지/쇼핑몰 구축] (0) | 2020.03.25 |
| [HTML] 쇼핑몰 상품 이미지 대량 다운받기 (feat.JavaScript)_서버이관 (브라우저 캐시이용) (2) | 2019.11.29 |
댓글