728x90
반응형
안녕하세요 찐망고입니다.
오늘은 favicon에 대해 포스팅 할겁니다.
파비콘이란?
모든 브라우저의 탭엔 제목이 있고 그옆엔 저렇게 파비콘이 붙어요.
물론 없어도 큰일 나지는 않지만, 있으면 이뻐!
파비콘은 브라우저 탭, 북마크, 즐켜찾기 목록에서 웹사이트를 대표하는 작은 아이콘입니다.
이를 통해 사용자는 쉽게 웹사이트를 인식하고 찾을 수 있어요.
일관된 브랜드 이미지 구축에도 도움이 되구요.
파비콘의 중요성
사용자가 여려개의 탭을 열어놓았을때, 탭이 아주 작아지는 경험들 다들 있으시잖아요?
파비콘이 있으면 제목이 뭔지 몰라도 웹사이트를 빠르게 식별할 수 있습니다.
또한, 일부 검색 엔진은 파비콘을 검색결과에 표시하기도 합니다.
당연히 사용자의 클릭률(CTR)을 높이는데 기여할 수 있죠
제일 중요한건 파비콘이 없으면 부라우저가 기본 아이콘이나 빈 아이콘을 표시하는데..
이거 너무 안이뻐 절래절래..
파비콘 제작 및 형식
파비콘은 다양한 이미지 형식으로 만들 수 있지만, 가장 많이 사용하는 형식은 PNG입니다.
그 이유는 PNG 형식이 투명 배경을 지원하고, 다양한 해상도에서도 품질을 유지할 수 있기 때문이죠.
1. 디자인
- 먼저, 원하는 디자인의 아이콘을 만듭니다. 이때 크기는 16*16, 32*32, 48*48, 64*64등의 정사각형 크기로 만드는 것이 일반적입니다.
- 디자인 도구로는 포토샵, 일러스트레이터, GIMP, Canva등 다양한 프로그램을 사용할 수 있습니다.
2. 변환
- 파비콘은 보통 .ico 형식으로 사용되지만, PNG 형식으로 만든 후 변환하는 것이 일반적입니다.
- 변환을 위해 온라인 변한도구를 사용하는데, favicon.io, convertico.com등을 사용합니다.
파비콘 설정방법
파비콘은 HTML의 <head> 요소 안에 넣으면 됩니다:
<head>
<link rel="icon" href="favicon경로" type="image/x-icon">
</head><head>
<link rel="shortcut icon" href="favicon경로">
</head>
두 요소 모두 웹페이지에 파비콘을 설정하는데 사용 됩니다.
하지만 최신 HTML표준에 따라 아래와 같이 사용하는 것을 권장합니다:
<head>
<link rel="icon" href="favicon경로" type="image/x-icon">
</head>
728x90
반응형
'WEB > HTML기초' 카테고리의 다른 글
| WOFF와 WOFF2의 차이점 (0) | 2024.08.22 |
|---|---|
| 웹사이트의 Apple Touch Icon 설정 가이드 (0) | 2024.07.17 |
| 정의형 목록요소 dl, dt, dd요소 (2) | 2024.01.23 |
| youtube iframe 연결하여 자동 재생하기 (1) | 2024.01.03 |
| HTML문서에서 이미지 불러오기 (0) | 2023.09.18 |