HTML 파비콘 적용하는 방법
- 코딩 예제/HTML
- 2020. 5. 18. 07:00
만들어야 하는 이유
파비콘은 웹 사이트에 접속했을 때 크롬, 사파리 등의 브라우저 상단 탭에 보이는 아이콘을 말합니다. 즐겨찾기를 등록할 때 사이트 옆에 아이콘으로 표시됩니다.
파비콘을 적용하면 웹 사이트의 브랜딩 및 성격을 나타낼 수 있습니다. '웹퍼블리싱온라인 블로그'의 경우 웹 사이트의 이미지를 표현했습니다. 또한, 즐겨찾기 목록에서 빠르게 찾을 수 있는 장점이 있습니다.
적용하는 방법
파비콘 적용은 별도의 폴더를 만들고 그 안에 아이콘(.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 |
이 글을 공유하기