Saturday, January 27, 2007
Favicon (파비콘;사이트 아이콘) 넣는 법, Site Icon HTML Tag(태그); favicon.ico
브라우저 주소창의 URL 왼쪽에 16x16 픽셀의 조그마한 아이콘을 넣는 방법입니다. 이런 아이콘을 "파비콘(favicon; favorites icon)"이라고 합니다. 원래 MS가 IE 브라우저를 위해서 만든 것입니다. 그래서 웹 표준이 아니지만 파이어폭스에서도 잘 지원됩니다.
실은 몇 년 전부터 IE에서는 파비콘이 잘 보이지 않게 되었습니다. 이제는 오히려 파이어폭스에서 파비콘이 더 잘 보이더군요.
우선 favicon.ico 라는 파일명의 아이콘 파일을 만들어야 합니다.
마이크로안젤로 같은 아이콘 편집기를 사용하여 만들면 됩니다: ▶▶ 윈도우 아이콘/마우스 커서 편집 프로그램: Microangelo Toolset (마이크로안젤로)
되도록 16x16 픽셀의 소형 아이콘으로 저장해야 합니다.
그런 후 아이콘 파일을 서버에 올립니다. 어떤 서버에서는 .ico 확장자 파일을 거부하는데, 이때는 favicon.ico 를 favicon.zip 등으로 확장자를 변경하여 업로드한 후, 다시 이름을 favicon.ico 로 고쳐 주어야 합니다.
웹페이지의 <head></head> 태그 사이에 다음의 코드를 삽입하면 됩니다.
위의 코드에서 www.example.com 이라고 된 부분을, 자신의 실제 주소로 바꾸어 주어야 합니다.
HTML 페이지의 최종적인 형태는 다음과 같습니다:
헤드 태그 속의 맨 마지막에 넣으면 적당합니다. 별로 중요한 요소가 아닌 것은 되도록 아래쪽에 넣는 것이 좋습니다.
만약 파일명을 favicon.ico 로 할 수 없는 경우에는 다른 파일명을 지정해도 괜찮습니다.
그런데 favicon.ico 파일은 서버의 루트 디렉토리(최상위 디렉토리)에 있어야 합니다. 그렇지 않고 하위 디렉토리 속에 있으면 IE에서 인식을 못하더군요.
파이어폭스에서는 Favicon 이 항상 잘 보입니다. 그렇지만 IE 에서는 좀 문제가 있습니다. 해당 사이트의 파비콘을 보기 위해서는, 우선 Ctrl+D키를 눌러 그 사이트에 대한 북마크를 만든 후, IE를 닫고 다시 실행하여 그 사이트를 재방문해야, 주소창에 파비콘이 보이는 문제가 있습니다. 그렇지만 이 방법도 확실하게 잘 되는 것은 아닙니다.
▶▶ HTML-CSS] 메타 태그 종류; META TAG 목록
▶▶ IE 6의 '이미지 도구 모음' 상자를, 완전히 제거하는 메타 태그; (meta Tag) [HTML-CSS]
실은 몇 년 전부터 IE에서는 파비콘이 잘 보이지 않게 되었습니다. 이제는 오히려 파이어폭스에서 파비콘이 더 잘 보이더군요.
favicon.ico 파일 만들기
우선 favicon.ico 라는 파일명의 아이콘 파일을 만들어야 합니다.
마이크로안젤로 같은 아이콘 편집기를 사용하여 만들면 됩니다: ▶▶ 윈도우 아이콘/마우스 커서 편집 프로그램: Microangelo Toolset (마이크로안젤로)
되도록 16x16 픽셀의 소형 아이콘으로 저장해야 합니다.
그런 후 아이콘 파일을 서버에 올립니다. 어떤 서버에서는 .ico 확장자 파일을 거부하는데, 이때는 favicon.ico 를 favicon.zip 등으로 확장자를 변경하여 업로드한 후, 다시 이름을 favicon.ico 로 고쳐 주어야 합니다.
Favicon 추가 태그
웹페이지의 <head></head> 태그 사이에 다음의 코드를 삽입하면 됩니다.
<link rel="shortcut icon" type="image/x-icon" href="https://www.example.com/favicon.ico" />
위의 코드에서 www.example.com 이라고 된 부분을, 자신의 실제 주소로 바꾸어 주어야 합니다.
브라우저 주소창에 파비콘 (URL 아이콘) 넣기 예제
HTML 페이지의 최종적인 형태는 다음과 같습니다:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>페이지 제목</title>
<link rel="shortcut icon" type="image/x-icon" href="https://www.example.com/favicon.ico" />
</head>
<body>
... 여기서 부터 본문 시작 ...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>페이지 제목</title>
<link rel="shortcut icon" type="image/x-icon" href="https://www.example.com/favicon.ico" />
</head>
<body>
... 여기서 부터 본문 시작 ...
헤드 태그 속의 맨 마지막에 넣으면 적당합니다. 별로 중요한 요소가 아닌 것은 되도록 아래쪽에 넣는 것이 좋습니다.
만약 파일명을 favicon.ico 로 할 수 없는 경우에는 다른 파일명을 지정해도 괜찮습니다.
그런데 favicon.ico 파일은 서버의 루트 디렉토리(최상위 디렉토리)에 있어야 합니다. 그렇지 않고 하위 디렉토리 속에 있으면 IE에서 인식을 못하더군요.
IE 6 브라우저에서 Favicon 이 보이지 않는 문제
파이어폭스에서는 Favicon 이 항상 잘 보입니다. 그렇지만 IE 에서는 좀 문제가 있습니다. 해당 사이트의 파비콘을 보기 위해서는, 우선 Ctrl+D키를 눌러 그 사이트에 대한 북마크를 만든 후, IE를 닫고 다시 실행하여 그 사이트를 재방문해야, 주소창에 파비콘이 보이는 문제가 있습니다. 그렇지만 이 방법도 확실하게 잘 되는 것은 아닙니다.
▶▶ HTML-CSS] 메타 태그 종류; META TAG 목록
▶▶ IE 6의 '이미지 도구 모음' 상자를, 완전히 제거하는 메타 태그; (meta Tag) [HTML-CSS]
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home