#파비콘이란?
파비콘(favicon)은 웹페이지의 주소 맨 왼쪽에 나오는 아이콘으로
favorite(가장 좋아하는) + icon(아이콘) 의 합성어로, 즐겨찾는 아이콘이라는 뜻이다.
다른 말로 shorcut icon, website icon, URL icon, tab icon, bookmark icon이라고도 불린다.
특정 웹페이지의 페이지주소는 많은 알파벳의 조합으로 읽지 않는 이상 한눈에 알아보기 어렵다. 그런데 파비콘이 있으면 아이콘으로 딱 눈에 띄게 구분하기 좋다.
(↑파비콘: 빨간 동그라미 안)
예를 들어 자신이 자주 이용하는 웹사이트들을 '즐겨찾기'해놓으면 이렇게 목록들이 뜬다.
파비콘이 없었다면? 모두 글자라서 즐겨찾기 목록이 많다면 빨리 구분하기 어려웠을 것이다.
이제 본론으로.
# 파비콘파일을 만들기 위해선, 이 두가지를 유념해야 한다.
1. 파일 확장자: .ico
2. 그림크기: 16x16
.png도 되긴 하나, 인터넷익스플로러, 크롬, 파이어폭스 등 웹브라우저 전부를 만족시키기 위해선 .ico가 좋다고 한다.
(인터넷익스플로러는 파비콘 적용에 .png 지원X)
먼저 파비콘을 적용하기 위해선 파비콘을 만들어야 한다.
포토샵, 일러스트같은 프로그램을 이용할 수 있으면 물론 더 좋겠지만 디자인 관련 일을 하지 않는 사람들이나 컴알못들은 프로그램도 없을 뿐더러 뭔가 복잡해 보인다. 그래도 괜찮다.
어느 컴퓨터에나 기본으로 깔려있어 누구에게나 익숙한 그림판을 이용해 그려도 상관 없다.
게다가 파비콘은 16x16사이즈로 아주 작게 보이기 때문에 복잡해봤자 무소용, 무쓸모이다.
간단한게 최고.
#그림판으로 파비콘 그리기
1. 일단 그림판에 자신이 생각한 간단한 아이콘을 그린다.
2. 선택버튼을 이용해 파비콘 그린것과 거의 딱 맞게 드래그 → 마우스 오른쪽 버튼 클릭 → 자르기 클릭
3. 자르기를 누르면 아래와 같이 선택한 선에 맞게 그림이 잘라진다.
이제 [크기조정] 클릭 → 가로, 세로 크기를 16으로 설정 → 확인 클릭.
4. 크기조정으로 이렇게 작아졌으면, 이 파일을 저장한다. 확장자는 .png로 저장한다.
# 저장된 파비콘 파일의 확장자를 .ico로 변경하기 (.png → .ico)
1. 아래 링크에 들어간다. (png파일을 ico로 변경해주는 웹페이지. )
(이 홈페이지 말고도 구글에 "ico file converter"라고 검색하면 여러 파일변환 무료홈페이지가 나온다.)
2. 저길 클릭하여 아까 저장했던 그림판으로 그린 파비콘파일을 열어준다.
파일을 열면 아래처럼 저렇게 내 파일이 나타나는데, 화살표모양을 클릭한다.
그럼 웹페이지 하단에 저장하시겠습니까 창이 뜨는데 저장하면 ico확장자로 변환 완료이다.
#홈페이지 적용하기 -> html편집기능 이용
1. html편집창을 연다.
2. <head>와 </head>사이에 아래 코드를 입력한다.
<link rel="shortcut icon" href=http://도메인명/favicon.ico type="image/x-icon"/>
# 티스토리 적용하기
티스토리 이용자라면 파비콘 적용하기가 더 쉽다.
html코드를 열어서 코드 편집을 하지 않아도 되기 때문이다.
그냥 버튼 몇개 누르고 파일만 열어주면 끝.
1. 블로그관리 들어가 가장 하단의 관리 -> 블로그 클릭
2. 블로그설명 밑의 '파비콘' 란에 불러오기 눌러서 아까 변경한 ico파일 열어주고 저장하면 끝!
'유용한정보' 카테고리의 다른 글
| 인천공항 제2여객터미널 주차대행 AJ파크 이용후기 (0) | 2018.02.14 |
|---|---|
| 수입품 원산지표시 규정 & 예외 정리. (0) | 2017.12.06 |
| 선하증권이란? Original BL과 Surrender BL 차이점 정리. (0) | 2017.09.08 |
| 탐폰/생리대 비교, 장단점 후기. (0) | 2017.08.03 |
| CEPA란? CEPA 원산지증명서 발급하기. (0) | 2017.07.25 |
댓글