티스토리 뷰

웹디자인

파비콘 만들어 홈페이지 적용하기

깽아네 2018. 10. 10. 14:39
728x90

파비콘(Favicon)만들기

 

 

파비콘이란?

 

웹브라우저에서 페이지 제목 옆에 있는 작은 이미지를 파비콘(favicon)이라 한다.

이는 favorite(가장 좋아하는) + icon (아이콘)의 줄임말로 즐겨찾는 아이콘이라는 뜻이다.

다른말로 shorcut icon, website icon, URL icon, tab icon, bookmark icon이라고도 불린다.

웹페이지의 주소는 많은 알파벳의 조합으로 한눈에 알아보기 어렵기 마련인데 파비콘이 있으면 한눈에 알아보기 쉽다.

 

 

 

 

노란 동그라미 안에 보여지는 이미지가 바로 파비콘이다.

 

 

 

 

파비콘 만들기

1.파비콘은 보통 확장자가 ico인 이미지 파일이다.

png도 가능하긴 하나 익스플로러, 크롬등 여러가지 웹브라우저 전부를 만족시키기 위해서는 ico확장자가 가장 좋다.

 

 

 

자. 이제 파비콘을 만들어보자.

포토샵이나 일러스트레이션 같은 프로그램을 이용하면 좋겠지만 일반 사람들은 사용하기가 참 어렵다.

어차피 16 * 16 사이즈라 자세히 그려봐야 보이지도 않는다.

그래서 나는 그림판을 이용해서 만들어보았다.

 

 

 

#그림판으로 파비콘 그리기

 

1. 내마음대로 그린다. ㅎㅎ

 

 

 

 

 

 

2. 선택버튼을 이용해서 자를부분을 드래그 한뒤 오른쪽 버튼-자르기 클릭

 

 

 

 

3. 이제 사이즈를 줄일 차례.

크기조정 - 가로세로를 16으로 바꾼후 확인 클릭

 

 

 

4. 크기가 조정되었으면 파일을 저장한다.

다른이름으로저장 - png로 저장.

 

 

 

 

# 저장된 파일 확장자를 ico로 변경하기

 

1. 이미지 편집 프로그램으로 만들거나 ICO파일로 변환해주는 사이트를 이용하여 변환한다.

 

변환해주는 사이트 / 마음에 드는곳(?)을 이용하자.

https://www.degraeve.com/favicon/

http://favicon-generator.org/

http://tools.dynamicdrive.com/favicon/

http://www.favicon.cc/

https://convertico.com/

https://iconverticons.com/

 

난 http://favicon-generator.org/ 이곳을 이용하였다.

 

 

 

 

찾아보기 - 저장한 이미지를 클릭 - Create Favicon 클릭

 

 

Download the generated favicon 버튼 클릭하면 저장하는 창이 뜬다.

이로써 ico파일 생성 완료.

 

 

# 웹에서 파비콘 적용하기

 

1. html 편집창을 연다.

2. <head></head>사이에 입력한다.

 

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">

 

 

 

 

#티스토리에서 파비콘 적용하기

 

티스토리 이용자라면 더욱 적용하기 쉽다.

관리자-블로그설정-파비콘에서 ICO파일을 등록하고 저장을 클릭합니다.

 

 

막상 작업해서 올려보니 생각보다 더 있어보이는건 왜일까? ㅎㅎ

한껏 더 예쁨을 장착한 블로그가 된 느낌이랄까..

 

Tip : 용량이 100바이트를 초과하면 안된다. 왠만해선 안넘으니 걱정말도록!

 

728x90

'웹디자인' 카테고리의 다른 글

absolute 가운데 정렬하는 css  (0) 2018.12.06
마우스 오버시 이미지 확대 css팁  (0) 2018.11.29
드롭다운메뉴 마우스오버시 하위메뉴 다운 (css적용)  (0) 2018.11.13
배경이미지 슬라이드 (페이드 인/아웃)  (0) 2018.10.11
레이어팝업시 배경은 어둡게하기  (0) 2018.10.11