☝🏻 들어가기 전...
웹 사이트 아이콘? 🤔
며칠 전 이브와 블렌디드 러닝을 들으며 head 태그에 웹 사이트 아이콘을 넣는다는 이야기를할 때 그제서야 의문이 들었다.
html로 웹 사이트 뼈대를 잡을 때마다 한 번도 웹 사이트 아이콘에 대해 생각해보지 않았기 때문!
☝🏻 그래서 알아보았다!
이 웹 사이트 아이콘을 뭐라고 부르는지 구글 선생님에게 물어보았다.
생각보다 일상 속에서 많이 본 이름이어서 놀랐다. 학교 싸강 듣다가 가끔 종종 나도 모르게 저장되던 파일이었다...
🌱 Favicon(파비콘)
- 즐겨찾기(Favorites)와 아이콘(icon)의 합성어로,
웹 페이지의 즐겨찾기 기능에서 보여지는 웹 사이트의 아이콘이라고 보면 된다.
☝🏻 Favicon 만들고 html 문서에 적용하기
1. icon으로 만들 이미지(png, jpg 등)를 준비해둔다.
: 사이즈의 경우 디바이스 또는 웹 브라우저마다 요구하는 사이즈가 다를 수 있으나 보통은 16X16 사이즈를 많이 사용한다.
2. 아래 사이트로 가서 이미지를 icon으로 변환한다.
favicon 변환 사이트로 이동
변환하고 싶은 이미지를 업로드하고 create favicon 버튼만 눌러주면 끝!
3. 적용하고 싶은 html 문서에 아래와 같이 작성한다.
<head> <link rel="shortcut icon" href="파비콘 경로"> <link rel="icon" href="파비콘 경로"> </head>여기에 타입이나 사이즈를 지정할 수도 있다.
📍 참고한 사이트
1년차 주니어 개발자입니다~~~~