파비콘
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
파비콘(favicon)은 웹사이트를 나타내는 작은 아이콘으로, 웹 브라우저의 주소 표시줄, 탭, 즐겨찾기, 홈 화면 등에 표시된다. 1999년 인터넷 익스플로러 5에서 처음 도입되었으며, 웹 표준으로 발전하면서 다양한 이미지 형식을 지원하게 되었다. 파비콘은 웹사이트의 시각적 식별성을 높이지만, 기술적 문제와 보안 취약점도 존재한다. 모바일 환경에서는 웹 페이지를 홈 화면에 추가할 때 앱 아이콘처럼 사용할 수 있으며, 웹 매니페스트를 통해 더 다양한 기능을 제공할 수 있다.
더 읽어볼만한 페이지
- 아이콘 - 비잔틴 성상파괴운동
비잔틴 성상파괴운동은 7세기부터 9세기까지 비잔틴 제국에서 성상 숭배를 둘러싸고 발생한 종교적, 정치적 논쟁과 갈등의 시기로, 레오 3세의 성상 파괴 명령으로 본격화되어 두 차례의 시대를 거치며 제국 사회에 큰 영향을 미쳤고, 성상 숭배 복원 후 비잔틴 미술과 동서 교회 관계에 변화를 가져왔다. - 아이콘 - 옥시즌 프로젝트
옥시즌 프로젝트는 KDE 4 데스크톱 환경의 디자인과 사용자 경험 개선을 목표로 안정성, 성능 향상, 사용자 인터페이스 개선에 중점을 두어 개발되었으며, 여러 버전 업데이트를 거치면서 파일 관리자, 데스크톱 환경, 디자인, 시스템 성능 등의 개선과 안정화에 집중했다. - 웹 브라우저 - 방문 기록
방문 기록은 사용자가 방문한 웹 페이지 정보를 저장하여 이전 페이지 접근성을 높이고, 타겟 광고 등에 활용되지만, 개인 정보 침해와 같은 프라이버시 문제를 야기할 수 있다. - 웹 브라우저 - NPAPI
NPAPI는 웹 브라우저 플러그인이 브라우저와 상호 작용하는 인터페이스였으나, 새로운 웹 표준 등장, API 노후화, 보안 문제로 쇠퇴하여 주요 브라우저들이 지원을 중단했고, 대한민국에서는 액티브X 대안으로 고려되다 HTML5 전환으로 과도기적인 기술로 사용되었다. - 월드 와이드 웹 - 구글
구글은 래리 페이지와 세르게이 브린이 개발한 웹 검색 엔진에서 출발하여 검색 기술 혁신을 통해 유튜브, 안드로이드 등 다양한 서비스를 제공하는 세계적인 기술 기업으로 성장했지만, 개인정보보호 및 독점 논란에도 직면하고 있다. - 월드 와이드 웹 - 온라인 언론
온라인 언론은 인터넷을 통해 뉴스 및 정보를 제공하며, 디지털 기술 발달과 함께 성장하여 시민 저널리즘 부상, 정보 전달 속도 혁신 등의 특징을 보이지만 정보 신뢰성 문제, 전통 언론 쇠퇴 등의 과제를 안고 있다.
| 파비콘 | |
|---|---|
| 일반 정보 | |
| 명칭 | 파비콘 (Favicon, favorites icon) |
| 설명 | 특정 웹 사이트와 관련된 아이콘 |
| 용도 | 웹 브라우저의 탭, 주소 표시줄, 즐겨찾기 목록 등에 표시 |
| 크기 | 16x16 픽셀 (일반적) |
| 형식 | ICO PNG GIF JPEG SVG |
| 파일명 | favicon.ico (일반적) |
| HTML 연결 | `` 등의 HTML 태그 사용 |
2. 역사
1999년 3월, 마이크로소프트는 인터넷 익스플로러 5를 출시하며 파비콘을 처음으로 선보였다.[12] 초기 파비콘은 웹사이트의 루트 디렉토리에 `favicon.ico`라는 이름의 컴퓨터 파일로 존재했다. 이 파일은 인터넷 익스플로러의 '즐겨찾기'와 페이지가 즐겨찾기에 추가된 경우 주소 표시줄의 URL 옆에 사용되었다.[3][5][4][12] 부수적인 효과로 파비콘 요청을 통해 페이지를 즐겨찾기한 방문자 수를 추정할 수 있었다. 이 부수적인 효과는 모든 최신 브라우저가 사이트가 즐겨찾기에 추가되었는지 여부에 관계없이 웹 주소 표시줄에 표시하기 위해 파비콘 파일을 로드하기 때문에 더 이상 작동하지 않는다.[5]
2. 1. 초기 역사
1999년 3월, 마이크로소프트는 인터넷 익스플로러 5를 출시하며 파비콘을 처음으로 선보였다.[12] 초기 파비콘은 웹사이트의 루트 디렉토리에 `favicon.ico`라는 이름의 컴퓨터 파일로 존재했다.[3][5][4][12] 이 파일은 인터넷 익스플로러의 즐겨찾기(북마크)와 해당 페이지가 북마크된 경우 주소 표시줄의 URL 옆에 표시되었다.[3][5][4][12] 초기에는 파비콘 파일을 요청하는 횟수로 북마크 수를 추정할 수 있었으나, 현재는 대부분의 브라우저가 북마크 여부와 관계없이 파비콘을 로드하므로 이러한 추정은 더 이상 유효하지 않다.[5]2. 2. 표준화
2003년에 .ico 형식은 인터넷 할당 번호 관리 기관(IANA)에 의해 MIME 유형 `image/vnd.microsoft.icon`으로 등록되었다.[6][7] 그러나 `.ico` 형식을 파비콘이 아닌 이미지로 표시하는 경우, 인터넷 익스플로러는 이 표준화된 MIME 유형으로 제공되는 파일을 표시할 수 없었다.[7] 이에 대한 해결 방법으로, 인터넷 익스플로러는 웹 서버에서 `.ico`를 비표준 `image/x-icon` MIME 유형과 연결하도록 했다.[8]RFC 5988은 IANA 링크 관계 레지스트리를 확립했고,[9] `rel="icon"`은 HTML5 사양을 기반으로 2010년에 등록되었다. 널리 사용되는 ``는 이론적으로 `shortcut`과 `icon` 두 가지 관계를 식별하지만, `shortcut`은 등록되지 않아 중복된다. 2011년 HTML 살아있는 표준[10]은 역사적인 이유로 `shortcut`이 `icon` 바로 앞에 오는 것을 허용한다고 명시했다.[11]
원래 마이크로소프트가 제안한 파비콘은 인터넷 익스플로러가 모든 웹사이트의 지정 URL (`favicon.ico`)에 파비콘을 요구하는 방식이었다. 이후 마이크로소프트는 `link` 요소를 사용하여 파비콘을 호출하는 방법을 지원했지만, 초기에는 W3C 권고를 따르지 않는 형식이었다.
하지만 2003년, ICO 형식이 `image/vnd.microsoft.icon`으로 IANA에 등록되면서 MIME 타입 문제는 해결되었다. 또한 모질라가 `link` 요소에 의한 파비콘 중복 지정을 통해 웹 제작자가 여러 이미지 형식을 지정할 수 있도록 지원하면서 형식 문제도 실질적으로 해결되었다. 모질라 스위트의 파비콘 지원 이후, 많은 웹 브라우저가 이 사양을 새롭게 지원하게 되었고, 유사한 형식으로 표준화되었다.
2. 3. 레거시
인터넷 익스플로러 5–10은 ICO 파일 형식만 지원한다.[12] 넷스케이프 7과 인터넷 익스플로러 버전 5 및 6은 이후 버전의 브라우저와는 달리 페이지를 방문했을 때가 아니라 북마크했을 때만 파비콘을 표시했다.[12]3. 브라우저 지원
다음 표는 주요 웹 브라우저의 다양한 기능 지원을 보여준다. 별도로 명시하지 않는 한, 버전 번호는 지원되는 기능의 시작 버전을 나타낸다.
아이콘 크기는 16x16, 32x32, 48x48, 64x64 픽셀이 될 수 있고, 8비트, 24비트, 32비트 색상이 가능하다.
다음 포맷은 브라우저에 상관없이 호환되며 인터넷 익스플로러, 파이어폭스, 크롬, 오페라에서 모두 지원한다.[52]
<link rel="shortcut icon" href="http://www.example.com/myicon.ico"/>
다음도 허용된다.
<link rel="shortcut icon" href="/somepath/myicon.ico"/>
2007년 현재, 인터넷 익스플로러를 비롯한 주요 브라우저가 파비콘을 지원하고 있지만, 세부적인 동작은 각 브라우저에 따라 다르다. 주소 표시줄이나 탭에 아이콘이 표시되어도 즐겨찾기 목록에는 표시되지 않는 경우도 있고, 주소 표시줄과 즐겨찾기 모두에 표시되는 경우도 있다. 또한, IE 컴포넌트 브라우저에서는 파비콘 처리 기능이 자체 구현되므로, 인터넷 익스플로러와는 동작이 다르다.
파비콘 관리 방법도 브라우저에 따라 다르지만, 대부분 파비콘 전용 캐시를 사용하여 자동으로 삭제되는 것을 방지하는 경우가 많다.
3. 1. 이미지 파일 형식 지원
웹 브라우저들은 다양한 이미지 파일 형식을 파비콘으로 지원한다. 다음 표는 주요 웹 브라우저의 파비콘 이미지 파일 형식 지원 현황을 보여준다.[1][25]| 브라우저 | 이미지 파일 형식 | ||||||
|---|---|---|---|---|---|---|---|
| ICO | PNG | GIF | [Animated GIF]s | JPEG | APNG | SVG | |
| 엣지 | 예 | 예 | 예 | 아니요 | 예 | 알 수 없음 | 예 |
| 파이어폭스 | 예[13] | 예[13] | 예[13] | 예[14] | 예 | 예[14] | 예[15] |
| 구글 크롬 | 예 | 예 | 예 | 아니요[16][17] | 예 | 아니요 | 예[18] |
| 인터넷 익스플로러 | 예[45] | 예[19] | 예[19] | 아니요[45] | 아니요[45] | 아니요[45] | 아니요[20] |
| 오페라 | 예[21] | 예[21] | 예[21] | 예[21] | 예[21] | 예 | 예[22] |
| 사파리 | 예 | 예 | 예 | 아니요 | 예 | 아니요 | 비표준/Non-standard영어 (12.0)[23][24] |
아이콘 크기는 16x16, 32x32, 48x48, 64x64 픽셀이 될 수 있고, 색 깊이는 8비트, 24비트, 32비트가 가능하다.[1][25]와 같은 형식은 브라우저에 상관없이 호환되며 인터넷 익스플로러, 파이어폭스, 구글 크롬, 오페라에서 모두 지원한다.[52]
IE 컴포넌트 브라우저에서는 파비콘 처리 기능이 자체 구현되므로, 인터넷 익스플로러와는 동작이 다르다. 파비콘 관리 방법도 브라우저에 따라 다르지만, 대부분 파비콘 전용 캐시를 사용하여 자동으로 삭제되는 것을 방지하는 경우가 많다.
3. 2. 파비콘 사용 위치
파비콘은 다양한 웹 브라우저에서 사용되며, 브라우저에 따라 지원 여부와 표시 위치가 다르다.
아이콘 크기는 16x16, 32x32, 48x48, 64x64픽셀이 될 수 있고, 8비트, 24비트, 32비트 색상이 가능하다.
다음 포맷은 브라우저에 상관없이 호환되며 인터넷 익스플로러, 파이어폭스, 크롬, 오페라에서 모두 지원한다.[52]
- `<link rel="shortcut icon" href="http://www.example.com/myicon.ico"/>`
다음도 허용된다.
- `<link rel="shortcut icon" href="/somepath/myicon.ico"/>`
| 브라우저 | 주소 표시줄 | 주소 표시줄 드롭다운 목록 | 링크 모음 | 북마크 | 탭 | 바탕 화면으로 드래그 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 엣지(Edge) | style="background:#FFC7C7;color:black;vertical-align:middle;text-align:};" class="table-no"|아니요 |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예 |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예 |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예 |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예 |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예 |- | 파이어폭스(Firefox) | |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예 |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예 |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예[26] |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예[26] |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예[26] |- | 구글 크롬(Google Chrome) |style="background:#FFC7C7;color:black;vertical-align:middle;text-align:};}" class="table-no"|아니요[26] |style="background:#FFC7C7;color:black;vertical-align:middle;text-align:};}" class="table-no"|아니요 |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예[26] |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예[26] |[26] |style="background:#FFC7C7;color:black;vertical-align:middle;text-align:};}" class="table-no"|아니요[26] |- | 인터넷 익스플로러(Internet Explorer) |[26] |style="background:#FFC7C7;color:black;vertical-align:middle;text-align:};}" class="table-no"|아니요 |[26] |[26] |[26] |[26] |- | 오페라(Opera) |[26] |style="background:#FFC7C7;color:black;vertical-align:middle;text-align:};}" class="table-no"|아니요 |[26] |[26] |[26] |[26] |- | 사파리(Safari) |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예[26] |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예 |style="background:#FFC7C7;color:black;vertical-align:middle;text-align:};}" class="table-no"|아니요[26] |style="background:#9EFF9E;color:black;vertical-align:middle;text-align:};}" class="table-yes"|예[26] |[28] |style="background:#FFC7C7;color:black;vertical-align:middle;text-align:};}" class="table-no"|아니요[26] |} 파비콘은 브라우저의 주소 표시줄, 주소 표시줄 드롭다운 목록, 링크 모음, 북마크, 탭, 바탕 화면 바로 가기 등 다양한 위치에 표시될 수 있다. 예를 들어, 인터넷 익스플로러는 7.0 버전부터 주소 표시줄과 탭에 파비콘을 표시한다.[26] 모질라 파이어폭스는 1.0 버전부터 12.0 버전까지 주소 표시줄에 파비콘을 표시했지만, 13 버전 이후로는 표시하지 않는다.[27] 구글 크롬은 링크 모음, 북마크, 탭에 파비콘을 표시한다.[26] 오페라 소프트웨어는 오페라 10에 스피드 다이얼에서 파비콘을 변경할 수 있는 기능을 추가했다.[29] 2007년 현재, 인터넷 익스플로러를 비롯한 주요 브라우저가 파비콘을 지원하고 있지만, 세부적인 동작은 각 브라우저에 따라 다르다. 주소 표시줄이나 탭에 아이콘이 표시되어도 즐겨찾기 목록에는 표시되지 않는 경우도 있고, 주소 표시줄과 즐겨찾기 모두에 표시되는 경우도 있다. 또한, IE 컴포넌트 브라우저에서는 파비콘 처리 기능이 자체 구현되므로, 인터넷 익스플로러와는 동작이 다르다. 파비콘 관리 방법도 브라우저에 따라 다르지만, 대부분 파비콘 전용 캐시를 사용하여 자동으로 삭제되는 것을 방지하는 경우가 많다. 3. 3. 파비콘 사용 방법웹 브라우저가 파비콘을 인식하는 표준 방식은 문서의rel 속성을 사용하여 파일의 형식, 이름 및 위치를 지정하는 것이다.[12][45][19][30]
4. 모바일 환경에서의 파비콘
애플의 아이폰 및 아이패드, 안드로이드 모바일 기기 사용자는 웹 페이지를 바로가기 아이콘으로 홈 화면에 고정할 수 있다.[35][36] 이러한 바로가기 아이콘은 일반 앱과 유사하게 보이며, 웹 개발자는 이를 위해 전용 아이콘을 제공할 수 있다. 5. 파비콘 관련 문제점 및 비판
파비콘은 항상 고정된 위치에서 확인해야 하기 때문에, 파비콘이 존재하지 않을 경우 인위적으로 페이지 로드 시간이 느려지고 서버 로그에 불필요한 404 오류가 발생할 수 있다.[5] W3C는 `rel` 속성을 표준화하지 않았으므로, 사용자 에이전트가 허용하는 ''shortcut icon''과 같은 다른 키워드도 있다.[44][45] 5. 1. 기술적 문제파비콘은 항상 고정된 위치에서 확인해야 하기 때문에, 파비콘이 존재하지 않을 경우 인위적으로 페이지 로드 시간이 느려지고 서버 로그에 불필요한 404 오류가 발생할 수 있다.[5] W3C는 `rel` 속성을 표준화하지 않았으므로, 사용자 에이전트가 허용하는 ''shortcut icon''과 같은 다른 키워드도 있다.[44][45]파비콘은 HTTPS 웹 페이지에 대한 피싱 또는 도청 공격의 일부로 조작되는 경우가 많다. 많은 웹 브라우저는 웹사이트 연결이 TLS와 같은 보안 프로토콜을 사용하고 있는지 여부를 전달하는 데 사용되는 영역 근처에 파비콘을 표시한다. 공격자는 파비콘을 익숙한 자물쇠 이미지로 변경하여 사용자가 올바른 웹사이트에 안전하게 연결되어 있다고 생각하도록 속이려 할 수 있으며, sslstrip과 같은 자동화된 중간자 공격 도구는 이 트릭을 사용한다.[46] Firefox 또는 구글 크롬과 같은 일부 웹 브라우저는 웹사이트에 액세스하는 데 사용되는 프로토콜의 보안 상태를 URL 옆에 표시하면서 탭 내에 파비콘을 표시하여 이러한 문제를 해결한다.[47] 파비콘은 일반적으로 서버의 사이트 디렉토리 루트에 위치하므로, 웹 클라이언트가 특정 서비스에 로그인했는지 여부를 신뢰성 있게 공개하는 데 사용될 수 있다.[48] 2021년, 일리노이 대학교 연구원들은 파비콘을 사용한 브라우저 추적 방법을 시연했다.[49] 5. 2. 보안 문제파비콘은 HTTPS 웹 페이지에 대한 피싱 또는 도청 공격의 일부로 조작되는 경우가 많다. 많은 웹 브라우저는 웹사이트 연결이 TLS와 같은 보안 프로토콜을 사용하고 있는지 여부를 전달하는 데 사용되는 영역 근처에 파비콘을 표시한다. 공격자는 파비콘을 익숙한 자물쇠 이미지로 변경하여 사용자가 올바른 웹사이트에 안전하게 연결되어 있다고 생각하도록 속이려 할 수 있다. sslstrip과 같은 자동화된 중간자 공격 도구는 이 트릭을 사용한다.[46] 이를 제거하기 위해, Firefox 또는 구글 크롬과 같은 일부 웹 브라우저는 웹사이트에 액세스하는 데 사용되는 프로토콜의 보안 상태를 URL 옆에 표시하면서 탭 내에 파비콘을 표시한다.[47]파비콘은 일반적으로 서버의 사이트 디렉토리 루트에 위치하므로, 웹 클라이언트가 특정 서비스에 로그인했는지 여부를 신뢰성 있게 공개하는 데 사용될 수 있다.[48] 2021년, 일리노이 대학교 연구원들은 파비콘을 사용한 브라우저 추적 방법을 시연했다.[49] 6. 파비콘 디자인 (별도 섹션 추가)
6. 1. 디자인 가이드라인6. 2. 제작 도구6. 3. 우수 사례 위의 파비콘들은 유명 웹사이트들의 파비콘 디자인을 분석한 결과이며, 사용자들에게 긍정적인 평가를 받는 사례들이다. 특히, 이 파비콘들은 각 회사의 브랜드를 잘 나타내고 있으며, 웹사이트의 정체성을 명확하게 보여주고 있다. 7. 결론
참조
[1]
웹사이트
Creating a Multi-Resolution Favicon Including Transparency with the GIMP
http://egressive.com[...]
2011-02-25
|