파비콘은 웹사이트의 성격을 아이콘으로 보여주는 것이다. 웹브라우저의 탭에 붙어 보여질 수도 있고, URL 앞에 붙어 보일 수도 있다. 대기업에서는 파비콘을 적극적으로 사용하기도 하며, SEO는 파비콘을 권장하고 있기도 하다. 물론 웹브라우저마다 파비콘의 사용유무에 대해 경고를 띄우긴 하지만 필수는 아니다.
html 파비콘 link 태그 사용하기
using html link tag for favicon
파비콘은 단어자체만으로는 생소하지만 웹브라우저의 URL 앞에 붙는 마크와도 같은 것이다.
웹사이트의 특징을 아이콘으로 만든 하나의 썸네일 또는 회사의 마크와 같은 것으로 생각하면 된다.
삼성의 마크나 마이크로소프트의 마크, 또는 자동차의 엠블렘과 비슷한 성격의 것으로 웹브라우저 URL의 앞에 붙어 사용자들에 웹사이트의 특징을 각인시키는 역할을 하기도 한다.
해도 되고 안해도 되지만 SEO 체크시 가급적 하면 좋다 라고 하지만, 필수적으로 할 이유는 없다.
아래는 파비콘의 예시를 보여주는 이미지이다.
link 태그
홈페이지의 특징을 아이콘으로 표시하는 것을 파비콘이라 한다.
파비콘을 웹브라우저에 표시할 때는 link 태그를 이용한다.
파비콘은 작은 썸네일이고, 작은 아이콘이기 때문에 크기에 규격이 있다.
일반적인 화면에 표시되는 파비콘의 크기는 16X16 크기로 아주 작은데 처음 파비콘으로 만들기 전에는 큰 이미지의 정사각형으로 만들고 파비콘으로 생성하게 된다.
어쨌든 16X16 크기의 파비콘이 준비되었다면 link 태그를 이용하여 웹브라우저에 파비콘을 표시하도록 한다.
아래는 웹브라우저에 파비콘을 표시하는 예제이다.
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>샘플코드
위의 파비콘 사용방법을 이용하여 html 예제를 만들어 본다.
16x16 아이콘을 준비하여 favicon.ico 로 파일을 만든다.
만약 파비콘을 만들기 귀찮다면 검색엔진으로 favicon.ico 로 검색하면 많은 파비콘이 나오기 때문에 테스트를 위해 아무거나 사용하도록 하자.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style></style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body id="bgBody">
파비콘 웹브라우저에 표시
</body>
<!-- // -->
</html>
<!-- // -->16x16 파비콘을 준비한 후 head 태그에 link 태그를 추가하고 파비콘을 연결하였다.
내용은 단순하다. 파비콘을 준비하고 link 태그에 추가만 해주면 그 뿐이다.
결과 화면을 보자.
작고 보잘 것없는 아이콘이 표시되었지만, 마케팅 요소를 위한 파비콘은 사용자에 웹사이트의 각인을 시켜주는 효과를 볼 수 있다.
'programming > web' 카테고리의 다른 글
| html table 테두리 표시하기 using html table border (0) | 2022.06.24 |
|---|---|
| html table 행과 열 사용하기 using html table rows and columns (0) | 2022.06.19 |
| html 이미지 picture 태그 사용 해상도별 여러 이미지 표시하기 using html picture tag (0) | 2022.06.13 |
| html 태그 배경 이미지 반복 속성하기 using html tag background image repeat attribute (0) | 2022.06.09 |
| html 배경 이미지 사용하기 using html background image (0) | 2022.06.07 |
댓글