웹사이트에 favicon 넣는법!

Balsamic·2023년 3월 21일
0

코딩공부

목록 보기
7/11
post-custom-banner

favicon 이란?

브라우저 주소창의 URL 왼쪽에 16x16 픽셀의 조그마한 아이콘을 의미한다.(favorite icon)
원래 MS가 IE 브라우저를 위해 만든 것이다. 따라서 웹표준은 아니지만 파이어폭스 등에서도 잘 지원이 된다.

1. favicon.ico 파일 만들기

우선 favicon.ico 라는 파일명의 아이콘 파일을 만들어야 한다. 직접 만드려면 파비콘은 16x16 픽셀 크기의 이미지 파일로 확장자는 .ico 이다. (32x32도 가능!)
만약.png나 다른 파일확장자로 저장되어 있다면 .ico로 확장자 명을 변경해 주면 된다!

2. 파비콘 이미지 호출하여 적용하기

html내 태그 안에 아래와 같이 집어 넣으면 된다!

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

파비콘이나 이미지 등을 올려 놨을때 라이브서버에서는 뜨지만 GitHub에는 안뜨는 경우가 있다. GitHub에 올라가려면 앞에 /를 바로 붙여서 파일을 불러서는 안된다. /는 최상단이라는 뜻, 즉 웹페이지의 파일명이 최상단이다. 따라서 '../ '이런식, 혹은 파비콘 같은경우는 index.html파일의 동일선상에 위치시켜 / 없이 바로 파일명으로 부른다.

post-custom-banner

0개의 댓글