파비콘(Favicon)은 "Favorite Icon"의 줄임말로, 인터넷 주소창의 웹브라우져나 웹사이트를 대표하는 작은 아이콘입니다. 이 아이콘은 웹 브라우저의 탭, 북마크 목록, 주소 표시줄 등 다양한 곳에 나타나 사용자가 웹사이트를 쉽게 식별할 수 있도록 도와줍니다. 비록 크기는 작지만, 파비콘은 웹사이트의 브랜드 아이덴티티를 강화하고 사용자 경험을 개선하는 데 중요한 역할을 합니다.
파비콘의 역사와 발전
파비콘은 1999년, 인터넷 익스플로러 5(IE 5)에서 처음 도입되었습니다. 당시에는 웹사이트의 북마크에만 표시되었지만, 이후 모든 주요 브라우저들이 이를 지원하게 되면서 파비콘은 웹사이트의 필수 요소로 자리잡았습니다. 초기에는 16x16 픽셀 크기의 ICO 형식만 지원되었으나, 현재는 다양한 크기와 형식(PNG, SVG 등)을 지원하여 다양한 해상도와 디바이스에 적합하게 표시될 수 있습니다.
파비콘의 역할과 중요성
- 브랜드 인지도 향상: 파비콘은 웹사이트의 로고나 상징을 축소한 형태로, 사용자들이 웹사이트를 쉽게 식별하고 기억할 수 있도록 돕습니다. 이는 브랜드 인지도를 높이는 데 큰 도움이 됩니다.
- 사용자 경험 개선: 여러 개의 탭을 동시에 열어놓고 사용할 때, 파비콘은 각 웹사이트를 빠르게 구분할 수 있도록 도와줍니다. 특히 자주 방문하는 사이트일수록 파비콘의 중요성이 커집니다.
- 전문성과 신뢰성 부여: 파비콘이 없는 웹사이트는 미완성된 느낌을 줄 수 있습니다. 반면, 깔끔하고 독창적인 파비콘은 웹사이트의 전문성을 나타내고 사용자에게 신뢰감을 줍니다.
파비콘 디자인 시 고려사항
파비콘은 작지만 그만큼 디테일한 디자인이 요구됩니다. 다음은 파비콘 디자인 시 고려해야 할 몇 가지 중요한 요소입니다.
- 단순함: 작은 크기에서도 명확하게 보이도록 단순한 디자인을 채택해야 합니다. 복잡한 디자인은 작은 크기에서 인식하기 어렵습니다.
- 일관성: 웹사이트의 로고나 색상 등 브랜드 아이덴티티와 일치해야 합니다. 이는 사용자들이 파비콘을 통해 웹사이트를 쉽게 연상할 수 있도록 합니다.
- 다양한 해상도 지원: 현대의 다양한 디바이스와 고해상도 화면을 고려해, 다양한 크기와 형식의 파비콘을 준비하는 것이 좋습니다.
파비콘 생성 및 적용 방법
파비콘을 생성하는 방법은 매우 다양합니다. 온라인 파비콘 생성기, 그래픽 디자인 소프트웨어 등을 사용해 쉽게 만들 수 있습니다.
파비콘 생성기
파비콘(Favicon) 생성기
인터넷에는 수많은 웹사이트가 존재합니다. 이러한 웹사이트에서 방문자들의 시선을 사로잡고 브랜드 인지도를 높이기 위해서는 차별화된 노력이 필요하게 됩니다. 그중에 하나가 웹사이트의
storymoti.com
생성된 파비콘을 웹사이트에 적용하는 방법은 다음과 같습니다:
- ICO 파일 준비: 다양한 크기(16x16, 32x32, 48x48 등)를 포함한 ICO 파일을 준비합니다.
- HTML 태그 삽입: 웹페이지의
<head>태그 안에 다음과 같은 링크 태그를 삽입합니다.<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/path/to/favicon.ico" type="image/x-icon"> - 추가 파일 준비: PNG, SVG 등 다양한 형식의 파비콘 파일도 준비해 필요에 따라 사용합니다.
네이버 가이드 라인
네이버의 경우다음과같은 기준을 따르고 있습니다.
STEP 1. 파비콘 사이즈, 파일 포맷 및 기본 수칙 확인
기본 수칙
- 네이버 검색 로봇이 파비콘을 수집할 수 있어야 합니다. : robots.txt 설정하기
- 파비콘 URL를 자주 변경하지 않습니다. (이미지 교체는 가능)
파비콘 URL과 이미지가 변경될 경우 업데이트 지연 및 검색 결과 내 파비콘 이미지가 일정하지 않을 수 있습니다. - 웹사이트를 표현할 수 있는 고유의 이미지를 사용합니다.
- 음란물이나 사용자로 하여금 혐오감을 느끼게 하는 이미지를 사용하지 않습니다.
파비콘 사이즈
- 너비와 높이가 동일한 정사각형이어야 합니다. (예: 30 x 30px, 48 x 48px)
- 네이버 검색 결과에는 파비콘의 사이즈를 15 x 15px 로 조정하여 사용합니다. 해당 해상도에서 파비콘이 잘 노출 될수 있는지 확인해보시길 권장.
파비콘 파일 포맷
아래와 같은 파일 포맷 을 지원합니다.
| ICO | PNG | GIF | animated GIFs | JPEG | APNG | SVG |
| O | O | O | O | O | O | O |
STEP 2. 파비콘 마크업
HTML 문서의 <head> 태그 내에 있는 <link> 태그를 활용합니다.
파비콘이 위치하는 href 에는 상대 경로가 아닌 절대 경로를 사용해야 합니다.
<head>
<link rel="shortcut icon" href="http://www.mysite.com/favicon.ico">
</head>rel 속성은 아래 중 하나를 사용하시면 됩니다.
* shortcut icon
* icon
* apple-touch-icon
* apple-touch-icon-precomposed
네이버 파비콘 가이드 라인
파비콘 (Favicon)
searchadvisor.naver.com
구글 가이드 라인
STEP 1 홈페이지 헤더에 <link> 태그를 추가
<link rel="icon" href="/path/to/favicon.ico">
Google에서는 파비콘 정보를 추출하기 위해 link 요소의 다음 속성을 사용합니다.성
| 속성 | ||
| rel | Google에서는 파비콘을 지정하기 위해 다음과 같은 rel 속성 값을 지원합니다. 사용 사례에 적합한 방식을 사용하세요. | |
| icon | HTML 표준에 정의된 대로 사이트를 나타내는 아이콘입니다. 기록상의 이유로 icon의 이전 대체 버전인 shortcut icon도 지원합니다. |
|
| apple-touch-icon | Apple의 개발자 문서에 따라 사이트를 나타내는 iOS 친화적인 아이콘입니다. | |
| apple-touch-icon-precomposed | Apple의 개발자 문서에 따라 이전 버전의 iOS용 대체 아이콘입니다. | |
| href | 파비콘의 URL입니다. URL은 상대 경로(/smile.ico) 또는 절대 경로(https://example.com/smile.ico)일 수 있습니다. | |
Google에서는 홈페이지를 크롤링할 때마다 파비콘을 찾아 업데이트합니다. 파비콘을 변경하고 Google에 변경사항에 관해 알리고 싶다면 사이트 홈페이지의 색인 생성을 요청하면 됩니다. 업데이트 내용이 검색결과에 표시될 때까지 며칠 이상 걸릴 수 있습니다.
Google 파비콘 가이드라인
Google 검색결과에 파비콘을 표시하려면 다음 가이드라인을 준수해야 합니다.
모든 가이드라인을 준수했더라도 Google 검색결과에 파비콘이 반드시 표시되는 것은 아닙니다.
- Google 검색에서는 사이트당 파비콘이 하나만 지원되며 사이트는 호스트 이름으로 정의됩니다. 예를 들어 https://www.example.com/과 https://code.example.com/이라는 사이트 두 개는 서로 다르므로 두 개의 다른 파비콘을 보유할 수 있습니다. 그러나 https://www.example.com/sub-site는 사이트의 하위 디렉터리이며, https://www.example.com/에는 파비콘을 하나만 설정할 수 있습니다. 해당 파비콘은 사이트와 사이트의 하위 디렉터리에 적용됩니다.
지원됨: https://example.com(도메인 수준의 홈페이지)
지원됨: https://news.example.com(하위 도메인 수준의 홈페이지)
지원되지 않음: https://example.com/news(하위 디렉터리 수준의 홈페이지) - 파비콘 파일은 Googlebot-Image로, 홈페이지는 Googlebot으로 크롤링할 수 있어야 하며, 크롤링을 차단할 수 없습니다.
- 사용자가 검색결과를 살펴볼 때 사이트를 빠르게 식별할 수 있도록 파비콘은 웹사이트 브랜드를 시각적으로 잘 나타내야 합니다.
- 파비콘은 너비/높이가 48px의 배수인 정사각형(예: 48 x 48px, 96 x 96px, 144 x 144px 등)이어야 합니다(또는 가로세로 비율 1:1의 SVG). 모든 유효한 파비콘 형식이 지원됩니다.
- 파비콘 URL은 안정적이어야 합니다. URL을 자주 변경하지 마세요.
- Google에서는 포르노, 증오심을 나타내는 상징(예: 만자 표시) 등 부적절하다고 간주되는 파비콘을 표시하지 않습니다. 이러한 유형의 이미지가 파비콘 내에 발견되면 기본 아이콘으로 교체됩니다.
Google 검색결과에 표시되는 웹사이트 파비콘 정의하기 | Google 검색 센터 | 문서 | Google for Dev
파비콘이 있는 웹사이트의 경우 Google 검색결과에 포함될 수 있습니다. 다음 파비콘 검색엔진 최적화 안내를 따라 사이트가 관련 요구사항을 준수하도록 하세요.
developers.google.com
'생활정보 > 이것 저것' 카테고리의 다른 글
| '우리가 국민입니다. We the people ’이라는 말이 탄생한 순간, 미국의 건국 신화를 알아보자 (2) | 2024.01.11 |
|---|---|
| 자살 예방 센터 창립자의 비극, 그가 남긴 교훈은? (1) | 2024.01.07 |
| 의전, 내빈소개 어떻게 해야하나요? (4) | 2023.10.17 |
| 재활용품 분리배출 - 금속, 고철, 유리류 배출요령 (10) | 2023.07.30 |
| 재활용품 분리배출 - 종이류 분리 배출요령 (4) | 2023.07.29 |