웹퍼블리싱온라인 로고

  • facebook
  • kakaostory

HTML 파비콘 적용하는 방법

만들어야 하는 이유

파비콘은 웹 사이트에 접속했을 때 크롬, 사파리 등의 브라우저 상단 탭에 보이는 아이콘을 말합니다. 즐겨찾기를 등록할 때 사이트 옆에 아이콘으로 표시됩니다.

파비콘을 적용하면 웹 사이트의 브랜딩 및 성격을 나타낼 수 있습니다. '웹퍼블리싱온라인 블로그'의 경우 웹 사이트의 이미지를 표현했습니다. 또한, 즐겨찾기 목록에서 빠르게 찾을 수 있는 장점이 있습니다.

적용하는 방법

파비콘 적용은 별도의 폴더를 만들고 그 안에 아이콘(.ico) 파일의 형태로 넣으면 됩니다.

<link rel="apple-touch-icon" href="a/favicon.ico" />
<link rel="icon" href="a/favicon.ico" />

<head> 태그에 위와 같은 코드를 붙여놓으면 최종적으로 아래와 같이 브라우저 상단 탭에 보입니다.

'apple-touch-icon'은 애플의 iOS의 경우 사파리에서 웹 사이트의 링크를 바탕화면에 만들면 앱 아이콘이 만들어지는데 이것을 지정할 수 있는 코드입니다.

'코딩 예제 > HTML' 카테고리의 다른 글

검색엔진최적화에 도움이 되는 meta 태그  (0) 2020.05.19
HTML 반응형 뷰포트 사용법  (0) 2020.05.13

이 글을 공유하기

댓글

Designed by JB FACTORY