favicon 적용하기

# 목 차 #
1. favicon이란?
2. 사용방법
3. 결과

1. favicon이란?

아래 사진처럼 작게 웹사이트의 로고를 favicon이라고 한다.

favicon 예시

 

2. 사용방법

일단 favicon을 적용하려면 저런 로고가 있어야 한다.

사진을 넣으면 알아서 favicon을 만들어주는 사이트가 있다.

favicon 만들어주는 사이트

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

 

사이트에 들어가서 원하는 사진을 넣으면 알아서 favicon 파일이 만들어진다.

.ico (ico확장자)

만들어진 파일을 다운받으면 위에 사진처럼 확장자가 아이콘(.ico)로 되어있다.

만약, 직접 만들고 싶다면 16*16 크기로 만든 후 확장자를 아이콘 확장자로 저장해 주면 된다고 한다.(해본적 없음)

이제 만들어진 파일을 내가 넣고 싶은 웹사이트에 적용시키면 된다.

웹프로젝트 폴더에 넣음

나는 일단 내가 만들고 있는 웹프로젝트 폴더에 favicon 파일을 넣었다.

그리고 html파일 헤드에

<link rel="shortcut icon" href="./img/favicon.ico">

이렇게 쓰고 적용시켰다.

href에 자신이 만든 파비콘의 경로를 입력하면 된다.

 

3. 결과

아주 잘 들어갔군.

파비콘 적용 결과