favicon.ico 요청을 방지하는 방법?

551

favicon.ico는 없지만 IE는 항상 요청합니다.

브라우저가 내 사이트에서 파비콘을 요청하지 못하게 할 수 있습니까? HTML 헤더에 META-TAG가 있습니까?

favicon 
— 다니엘 실 베이라
소스
21
+1 좋은 질문이지만 가장 간단한 해결책은 유효한 favicon을 추가하는 것 같습니다 :-) 확실히 이것은 1 분의 작업이며 사이트가 더 전문적으로 보입니다.
— Matt Wilko
4
빈 favicon.ico 파일을 가질 수도 있습니다. 이렇게하면 요청이 중지되지만 (첫 번째 이후) 브라우저가 기본 아이콘이 무엇이든 렌더링하는 빈 즐겨 찾기 아이콘을 렌더링하지 않습니다.
— mxcl
38
나는 질문자의 암시 적 견해에 완전히 동의한다고 말해야한다. 어떤 목적을 위해 어떤 것이 추가 로 의무화 될 것인가? 또한, 응답에 "메타 아이콘을 요청하고 404를받은 것처럼 정확하게 동작하며 실제로 요청을하지 않고 추가로 다시 묻지 않는 것"이라는 메타 데이터를 단순히 응답에 추가 할 수없는 방법은 무엇입니까? 이 페이지가 바뀝니다. "
— Daniel
36
이런 고통입니다. JSON 만 제공하는 웹 서비스가 있으며 약간의 변경없이 파일을 제공하는 기본 기능조차 없습니다 (시작 하기 위해 모든 메소드에는 401/403을 피하기 위해 인증 토큰이 필요합니다). 실패한 요청을 기록하여 나중에 분석 할 수 있습니다. 로그에는 파비콘 요청이 계속해서 넘칩니다.
— 기본
3
2015 년입니다. 그것에 대한 뉴스가 있습니까?
— Jonathan Prates

답변:

575

먼저 웹 페이지에 파비콘이있는 것이 좋습니다 (일반적으로).

그러나 항상 바람직하지는 않으며 개발자가 추가 페이로드를 피할 수있는 방법이 필요합니다. 예를 들어 IFRAME은 즐겨 찾기 아이콘을 표시하지 않고 요청합니다. 최악의 경우, Chrome 및 Android에서 IFRAME은 3 가지 즐겨 찾기 아이콘 요청을 생성합니다.

"GET /favicon.ico HTTP/1.1" 404 183
"GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 197
"GET /apple-touch-icon.png HTTP/1.1" 404 189

다음은 데이터 URI를 사용하며 가짜 파비콘 요청을 피하는 데 사용할 수 있습니다.

<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

참조를 위해 여기를보십시오 :

Chrome 버그 / 동작은 다음 버전에서 수정 될 것입니다.

다음은 투표를위한 버그 제출입니다.

업데이트 1 :

주석 (jpic)에서 Firefox> = 25는 더 이상 위의 구문을 좋아하지 않는 것 같습니다. Firefox 27에서 테스트했는데 여전히 Webkit / Chrome에서 작동하는 동안 작동하지 않습니다.

최신 브라우저를 모두 다루는 새로운 브라우저가 여기 있습니다. Safari, Chrome 및 Firefox를 테스트했습니다.

<link rel="icon" href="data:;base64,=">

"rel"속성 값에서 "바로 가기"이름을 생략했습니다. 이전 IE에만 ​​해당하며 IE <8 버전은 dataURI를 좋아하지 않기 때문입니다. IE8에서는 테스트되지 않았습니다.

업데이트 2 :

HTML5에 대해 유효성을 검사하기 위해 문서가 필요한 경우 대신 다음을 사용하십시오.

<link rel="icon" href="data:;base64,iVBORw0KGgo=">
— 디에고 페리 니
소스
1
훌륭한. 나는 당신이 너무 적은 표를 받았다는 사실은 질문이 제기 된 후 몇 년이 지났다는 사실과 관련이 있으며, 덜 영리한 답변은 투표를 수집하는 데 더 많은 시간이 걸렸다는 것을 추측해야합니다.
— iconoclast
21
UPDATE 2에 Lollipop에 문제가 있습니다 ... 추가 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">하면 문제가 해결되는 것 같습니다.
— Alko
2
내가 올바르게 찾으면 data:image/png;base64,iVBORw0KGgo=브라우저에서 열어서 favicon.ico일명으로 저장할 수 있습니다 . PNG 파일을 비우고 웹 사이트 루트에 저장하십시오. 권리?
— Martin
3
@Alko 그 빈 PNG 파일은 여전히 ​​유효하지 않습니다. 빈 파일을 설명하는 데이터 URL을 작성하는 것이라면 <link rel = "icon"href = "data :,">
— vog
2
브라우저는 index.html 파일에 파비콘에 대한 참조가없는 경우에도 파비콘을 요청하는 경향이 있으므로이 솔루션으로 어떻게이를 방지 할 수 있습니까? 특히, 도메인을 방문하자마자 Firefox가 요청하는 것에 대해 매우 공격적인 것을 보았습니다. 다른 브라우저는 나중에 색인 파일이 헤더를로드 한 후 나중에 할 수 있습니다 (브라우저 내부에 대해 더 많은 지식을 가진 사람은 의견을 말하십시오). : 아니 파비콘있는 것은 그냥 구글, 또는 잠재적 인 부작용이 stackoverflow.com/questions/4269695/...
— juanheyns
131

<head>HTML 파일 섹션에 다음 줄을 추가 하십시오.

<link rel="icon" href="data:,">

이 솔루션의 특징 :

  • 100 % 유효한 HTML5
  • 매우 짧은
  • IE 8 및 그 이전 버전에서 이상한 점이 없습니다.
  • 브라우저가 현재 HTML 코드를 favicon으로 해석하지 않습니다 (의 경우 href="#")
— 보그
소스
4
로컬 프로젝트에서 크롬 devtools를 종료하려는 경우 이것이 가장 쉽고 깨끗한 방법입니다.
— Andrew
이것을 확장하십시오. 즐겨 찾기 아이콘 요청을 중지하려면 HTML 파일에 이것을 포함시켜야합니까?
— Aakash Verma
2
@AakashVerma 그래, 그게 다야. 다른 것은 필요하지 않습니다. (귀하의 사이트가 Internet Explorer 8 이상을 지원해야하는 경우가 아니라면) 이에 따라 답변이 향상되었습니다.
— vog
@asynts 무슨 뜻 reserves space인가요?
— mvorisek
@Andrew이 솔루션과 관련하여 Chrome DevTools의 문제점은 무엇입니까?
— Flinsch
47

나는 이것을 보았다 (나는 그것을 테스트하거나 개인적으로 사용하지 않았다):

<link rel="shortcut icon" href="#" />

비슷한 경험이 있습니까?

편집하다:

방금 위의 스 니펫을 테스트하고 강제로 완전히 새로 고쳤을 때 Fiddler에서 즐겨 찾기 아이콘 요청이 없었습니다. IE8 (IE7 표준으로 Compat 모드) 및 FF 3.6에 대해 테스트했습니다.

— mlhDev
소스
1
내 테스트는이 트릭이 효과가 있음을 나타냅니다. 그러나 href동적 (캐시되지 않은) 페이지가 두 번 요청되지 않도록하기 위해 이미로드 한 정적 (캐싱 된) 리소스 (예 : CSS 또는 스크립트 파일)에 대한 링크가 있습니다. href="#"기술적으로 현재 웹 페이지를 가리 키기 때문에 안전 해야합니다.
— Már Örlygsson
2
나는 Safari에서 시도했다. 파비콘 요청이 호스팅 페이지에 다시 충돌합니다.
— Morgan Cheng
27
브라우저 (Safari5 / Mac 등) 서버에서 웹 페이지를 두 번 요청하기 때문에 이것을 제안하지는 않습니다.
— Manav
2
@Manav Safari6 / Mac에서는 더 이상 그렇지 않습니다.
— Marcel
2
붐! 고마워 : D 이제 마침내 그 아이콘을 hehe로 만들 때까지 성가신 오류가 표시되지 않습니다.
— Leon Gaban
39

당신은 할 수 없습니다. 가능한 한 해당 이미지를 작게 만들고 나중에 캐시 무효화 헤더 ( Expires, Cache-Control)를 설정하기 만하면됩니다. 여기 무슨 야후! favicon.ico 요청에 대해 말해야 합니다.

— 이오 누치 G. 스탠
소스
7
그는 파비콘이 없다고 말했다. 그것들은 그보다 훨씬 작아지지 않습니다. 그리고 존재하지 않는 파일을 캐시하는 것은 의미가 없습니다.
— innaM
16
만약 그가 파비콘이 없다면, 그것을 만들어야한다. 그것이 나의 요점이었다. 이것보다 더 나은 해결책은 없습니다. 논리적이지 않습니까? 캐싱을 사용 하지 않으면 요청을 중지 할 가능성이 없으면 어떻게해야합니까?
— Ionuț G. Stan
5

.htaccess 또는 서버 지시문을 사용하여 favicon.ico에 대한 액세스를 거부 할 수 있지만 서버가 액세스 거부 응답을 브라우저에 보내면 여전히 페이지 액세스 속도가 느려집니다.

사용자가 브라우저 캐시에 머 무르도록하여 사이트로 돌아올 때 favicon.ico를 요청하는 브라우저를 중지 할 수 있습니다.

먼저 작은 favicon.ico 이미지를 제공하십시오. 비어있을 수 있지만 가능한 한 작습니다. 200 바이트 미만의 흑백을 만들었습니다. 그런 다음 .htaccess 또는 서버 지시문을 사용하여 나중에 Expires 헤더 파일을 한 달 또는 두 달로 설정하십시오. 동일한 사용자가 사이트로 돌아 오면 브라우저 캐시에서로드되며 요청이 사이트로 이동하지 않습니다. 서버 로그에 더 이상 404가 없습니다.

완전한 Apache 서버 또는 가상 서버를 제어 할 수있는 경우 다음을 수행 할 수 있습니다.

서버 문서 루트가 / var / www / html이면 /etc/httpd/conf/httpd.conf에 추가하십시오.

Alias /favicon.ico "/var/www/html/favicon.ico"
<Directory "/var/www/html">
    <Files favicon.ico>
       ExpiresActive On
       ExpiresDefault "access plus 1 month"
    </Files>
</Directory>

그런 다음 별칭을 지정하기 때문에 하나의 favicon.ico가 모든 가상 호스팅 사이트에서 작동합니다. 사용자가 방문한 후 한 달 동안 브라우저 캐시에서 가져옵니다.

.htaccess의 경우 작동하지 않는 것으로보고됩니다 (내가 확인하지 않음).

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"
— 아논 1
소스
모듈을 활성화하는 것을 잊지 마십시오 : ~ / etc / apache2 # a2enmod 만료 및 서비스 apache2 restart
— Sino Boeckmann
4

당신이 nginx를 사용하는 경우 

# skip favicon.ico
#
location = /favicon.ico {
    access_log off;
    return 204;
}
— 빈센트 -cm
소스
이것은 요청을 막지는 않지만 대안으로 그것을 좋아합니다.
— QasimK
웹 서버를 제어 할 수 있다면 물론입니다.
— jbruni
1

Node.js에서

res.writeHead(200, {'Content-Type': 'text/plain', 'Link': 'rel="shortcut icon" href="#"'} );
— Visv M
소스
0

우리의 경험에서 favicon.ico의 요청에 따라 Apache가 넘어지면서 .htaccess 파일에 추가 헤더를 주석 처리했습니다.

예를 들어 헤더 설정 X-XSS-Protection "1; mode = block"

...하지만 사전에 a2enmod 헤더를 sudo하는 것을 잊었습니다. 전송되는 추가 헤더를 주석 처리하면 favicon.ico 문제가 해결되었습니다.

또한 개발을 위해 여러 개의 가상 호스트를 설정했으며 http : // localhost를 사용 하고 /favicon.ico를 가져올 때 500 내부 서버 오류 만 발생했습니다 . "curl -v http : //localhost/favicon.ico " 를 실행 하고 호스트 이름이 확인자 캐시에 있지 않거나 그 영향에 대해 경고를 받으면 문제가 발생할 수 있습니다.

가져 오지 않는 것만 큼 간단하거나 (근본 원인이 다르기 때문에 시도했지만 작동하지 않았습니다) 이상한 500 내부 서버 오류 메시지를 일으킬 수있는 apache2.conf 또는 .htaccess의 지시문을 찾으십시오.

우리는 아파치의 오류 로그에 아무 것도 유용하지 않았고 mod_headers를로드하는 것을 잊었을 때 여분의 헤더를 설정하는 문제를 해결할 때까지 아파치의 오류 로그에 유용한 것이 아무것도 없다는 것을 발견했습니다.

— 데 클란 영
소스
0

HTML에 주석이 달린 코드가 있고 브라우저가 무언가를 찾으려고 할 때이 오류가 발생합니다. 필자의 경우처럼 플라스크의 웹 양식에 대한 코드에 주석을 달았으며 이것을 얻었습니다.

2 시간을 보낸 후 다음과 같은 방식으로 수정했습니다.

1) 새로운 파이썬 환경을 만든 다음 주석이 달린 HTML 줄에 오류가 발생했습니다.이 전에 오류 'GET /favicon.ico HTTP / 1.1 "404'

2) 때로는 같은 이름으로 존재하는 파이썬 파일과 같은 중복 코드가있을 때이 오류를 보았습니다.

— 오소이 펠세
소스
-10

당신은 사용할 수 있습니다

<link rel="shortcut icon" href="http://localhost/" />

그렇게하면 실제로 서버에서 요청되지 않습니다.

— 조롱
소스
1
일부 브라우저에서 무서운 오류 메시지가 표시되는 것처럼 보일 수 있습니다. 또한 HTTPS를 통해 제공 될 수있는 페이지에서 해당 트릭을 사용해야합니다.
— Brighid McDonnell
6
about : blank를 사용하는 것이 좋습니다.
— 누가
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.