본문 바로가기
나롱/개자인

WEB : 파비콘 등록하기

by 나롱 2023. 10. 4.

 

 

개인 홈페이지를 어느정도 완성하고 나니 파비콘이 없는 나의 홈페이지가 자꾸 신경쓰여서 파비콘 (favicon) 을 등록해야겠다 라는 생각이 들었다. 그러면서 파비콘을 제작하고 등록하는 글을 블로그에도 올려보면 어떨까 싶어 오랜만에 글을 써보기로했다.

 

 

 

파비콘(favicon)은 웹을 열어두면 뜨는 탭의 아이콘을 부르는 명칭이다. 우리가 사용하는 대부분의 웹사이트에는 이렇게 아이콘들이 등록 되어있어 각각의 홈페이지의 아이덴티티를 나타내며 사용자에게 열어둔 홈페이지가 무엇인지 구별이 쉽게 해준다. 작은 크기로 제공되기 때문에 복잡하지 않고 잘 보이는 심볼의 형태로 디자인을 해야한다.

 

내 홈페이지에도 등록할 파비콘은 어떤형태로 하면 좋을까 고민하다 파비콘은 아무래도 작은 사이즈로 표시되는 아이콘인 만큼 복잡한 형태보다는 심플한 형태를 사용하는 것이 좋을 것 같아 최대한 형태를 심플하게 뽑으려 하였지만... 내 웹사이트에 상징으로 넣을 손 일러스트는 어느정도 복잡한 형태를 띄고있었기에, 라인을 두껍게 처리해서 최대한 작은 형태에서도 모양을 알아보기 쉽게 처리한 후 이미지를 등록해 두었다.

 

예전에 홈페이지 만들때는 ico파일만 가능했던거 같은데 최근에 찾아보니 png파일도 되는것 같아서 아래 첨부한 코드와 같이 헤드 안에 png로 파일을 등록해 주었다.

<!--파비콘-->
<head>
 <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
 <link rel="icon" href="./favicon.png" type="image/x-icon">
</head>

 

그렇게 하여 등록된 나의 파비콘 이미지를 캡쳐해 보았다. 손모양이라 잘 안보일까 걱정되었지만 막상 적용된 탭을 보니 나름 형태가 잘 나온 것 같아서 뿌듯했다. 이렇게 파비콘 등록일지는 마무리 :)