11일차(3) : 파비콘 (ico)

이번 시간에는 파피콘에라느 것에 대해 다뤄보도록 하겠다!

 

그나저나 파피콘은 또 처음들어보는 단어이다. 파피플레이타임 같은 것도 아닌 이건 무엇일까?

 

여러분이 만약 이 글을 보고 있다면 잠시 유튜브를 켜보자.

그리고 우리가 만든 사이트의 title부분과 유튜브의 title부분을 보면서 비교를 해보자.

어떤 부분이 다를까?

바로 제목 왼쪽에 있는 아이콘의 있고 없고의 차이가 있다.

 

그렇다! 타이틀 왼쪽에 있는 작은 아이콘이 바로 파비콘이라고 하는 것이다.

그러면 이것을 바로 추가해주도록 할까?

 

파비콘을 추가하기 위해선 파피콘에 알맞은 이미지를 생성해야 한다.

 

https://www.favicon-generator.org/

Favicon & App Icon Generator

이 사이트에 들어가자.

 

여기서 파비콘으로 만들 이미지를 넣고 파비콘 파일을 얻어보자!

필자는 트로피 사진을 파비콘으로 바꿔주겠다.

 

이렇게 파비콘으로 변환을 해주었다.

뭐가 아래쪽에 많이 생겼지만 일단은 무시해 주고 다운로드를 해주자.

 

파비콘으로 변경한 후 파일을 다운로드하면 압축파일 안에 파비콘들이 잔뜩 들어있는데 여러 브라우저, 여러 환경에서 쓸 수 있는 파비콘을 제동 해주는 것이다.

우리는 간단하게 기본 파비콘만 선택해서 우리의 프로젝트 폴더 안의 images폴더에 추가해 주도록 하자

이미지 폴더에 추가해 줬으니 다시 index.html파일에서 파비콘의 link를 알려줘야 한다. 

마치 이미지 링크를 걸어주는 것처럼!

 

    <link rel="icon" href="images/favicon.ico" type="image/x-icon">

title옆에 있는 정보니 html의 head에 추가해야 한다.

그리고 위와 같이 코드를 입력하면 된다.

 

그리고 코드 상에서 실행해 보면 파비콘이 잘 추가된 것을 알 수 있다.

 

이렇게 한층 더 우리의 사이트가 더 예뻐졌다.