Как предотвратить запросы favicon.ico?
У меня нет favicon.ico, но IE всегда делает запрос на него.
Можно ли запретить браузеру сделать запрос на избрание моего сайта? Может быть, какой-нибудь мета-тег в заголовке HTML?
21 ответ
Сначала я скажу, что наличие значка на веб-странице - это хорошо (обычно).
Однако это не всегда желательно, и иногда разработчикам нужен способ избежать дополнительной нагрузки. Например, 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 данных и может использоваться, чтобы избежать поддельных запросов favicon:
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
Для ссылок смотрите здесь:
- https://github.com/h5bp/html5-boilerplate/issues/1103
- https://twitter.com/diegoperini/status/4882543836930048
Ошибка / поведение Chrome, вероятно, будет исправлена в следующих версиях.
Вот сообщение об ошибке для голосования:
ОБНОВЛЕНИЕ 1:
Из комментариев (jpic) похоже, что Firefox >= 25 больше не нравится приведенный выше синтаксис. Я тестировал на Firefox 27, и он не работает, пока он работает на Webkit/Chrome.
Итак, вот новый, который должен охватывать все последние браузеры. Я тестировал Safari, Chrome и Firefox:
<link rel="icon" href="data:;base64,=">
Я исключил имя "ярлыка" из значения атрибута "rel", поскольку это только для более старых версий IE, а версии IE < 8 также не любят data URI. Не проверено на IE8.
ОБНОВЛЕНИЕ 2:
Если вам нужен документ для проверки на соответствие HTML5, используйте вместо этого:
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
Просто добавьте следующую строку в <head> раздел вашего HTML-файла:
<link rel="icon" href="data:,">
Особенности этого решения:
- 100% действительный HTML5
- очень короткий
- не несет никаких причуд от IE 8 и старше
Я верю, что видел это (Я не проверял это или использовал это лично хотя):
<link rel="shortcut icon" href="#" />
У кого-нибудь был подобный опыт?
РЕДАКТИРОВАТЬ:
Я только что протестировал приведенный выше фрагмент и при принудительном полном обновлении в Fiddler не было замечено ни одного запроса favicon. Я протестировал против IE8 (режим Compat как стандарты IE7) и FF 3.6.
Ты не можешь Все, что вы можете сделать, это сделать это изображение как можно меньшим и установить некоторые заголовки аннулирования кэша (Expires, Cache-Control) далеко в будущем. Вот что такое Yahoo! должен сказать о запросах favicon.ico.
Если вы используете nginx
# skip favicon.ico
#
location = /favicon.ico {
access_log off;
return 204;
}
Самый простой способ временно заблокировать их для целей тестирования - открыть страницу проверки в Chrome, щелкнув правой кнопкой мыши в любом месте страницы и нажав кнопку проверить или нажав
Ctrl+Shift+jа затем перейдите на вкладку сети и перезагрузите страницу, которая будет отправлять все запросы, которые ваша страница должна делать, включая этот надоедливый favicon.ico. Теперь вы можете просто щелкнуть правой кнопкой мыши запрос favicon.ico и выбрать «Заблокировать URL-адрес запроса».
Все приведенные выше ответы предназначены для разработчиков, которые контролируют исходный код приложения. Если вы системный администратор, который разбирается в нашем балансировщике нагрузки или конфигурации прокси и вас раздражают эти махинации с favicon.ico, этот простой трюк сработает лучше. Это ответ для Chrome, но я думаю, что должна быть аналогичная альтернатива, которую вы могли бы найти для Firefox / Opera / Tor / любого другого браузера :)
Поместите это в свою HTML-голову:
<link rel="icon" href="data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC">
Это немного больше, чем другие ответы, но содержит действительно действительное изображение PNG (белый пиксель 1x1).
Очень простое решение, поместите приведенный ниже код в ваш .htaccess, У меня была такая же проблема, и это решило мою проблему.
<IfModule mod_alias.c>
RedirectMatch 403 favicon.ico
</IfModule>
Ссылка: http://perishablepress.com/block-favicon-url-404-requests/
Вы можете использовать директивы.htaccess или server, чтобы запретить доступ к favicon.ico, но сервер отправит браузеру ответ об отказе в доступе, и это все равно замедлит доступ к странице.
Вы можете остановить браузер, запрашивающий favicon.ico, когда пользователь возвращается на ваш сайт, оставив его в кеше браузера.
Во-первых, предоставьте небольшое изображение favicon.ico, которое может быть пустым, но настолько маленьким, насколько это возможно. Я сделал черно-белый менее 200 байтов. Затем, используя директивы.htaccess или server, установите заголовок файла 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"
Продолжая предыдущие ответы, это может быть самое короткое решение из самого файла HTML:
<link rel="shortcut icon" href="data:" />
Протестировано, работает, сообщений об ошибках или неудачных запросов нет в версии Chrome 94.0.4606.81.
Просто сделайте это проще:
<link rel="shortcut icon" href="#" type="image/x-icon">
Ничего не показывает!!!!
Лично я использовал это в своем теге заголовка HTML:
<link rel="shortcut icon" href="#" />
В Node.js
res.writeHead(200, {'Content-Type': 'text/plain', 'Link': 'rel="shortcut icon" href="#"'} );
Мне нужно предотвратить запрос и отобразить значок, например, в Chrome.
Быстрый код для пробы
<head>:
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEU0OkArMjhobHEoPUPFEBIu
O0L+AAC2FBZ2JyuNICOfGx7xAwTjCAlCNTvVDA1aLzQ3COjMAAAAVUlEQVQI12NgwAaCDSA0888G
CItjn0szWGBJTVoGSCjWs8TleQCQYV95evdxkFT8Kpe0PLDi5WfKd4LUsN5zS1sKFolt8bwAZrCa
GqNYJAgFDEpQAAAzmxafI4vZWwAAAABJRU5ErkJggg==" />
По нашему опыту, когда Apache переключился на запрос favicon.ico, мы закомментировали дополнительные заголовки в файле.htaccess.
Например, у нас был установлен заголовок X-XSS-Protection "1; mode = block"
... но мы забыли заранее использовать заголовки a2enmod. Комментирование отправляемых дополнительных заголовков решило проблему favicon.ico.
У нас также было несколько виртуальных хостов, настроенных для разработки, и произошел сбой только с 500 Internal Server Error при использовании http://localhost/ и получении /favicon.ico. Если вы запустите "curl -v http://localhost/favicon.ico" и получите предупреждение о том, что имя хоста отсутствует в кэше преобразователя или что-то в этом роде, у вас могут возникнуть проблемы.
Это может быть так же просто, как не получать (мы попробовали это, и это не сработало, потому что наша основная причина была другой), или поискать директивы в apache2.conf или.htaccess, которые могут вызывать странные сообщения 500 Internal Server Error.
Мы обнаружили, что он потерпел неудачу так быстро, что в журналах ошибок Apache вообще не было ничего полезного, и потратил все утро на то, чтобы поменять мелочи здесь и там, пока мы не решили проблему установки дополнительных заголовков, когда забыли загрузить mod_headers!
Как упоминалось в других ответах, одним из решений для предотвращения запроса значка является кодирование его в base64 и встраивание в HTML.
Помимо других "преимуществ" значков SVG, их закодированный base64 выглядит как исходный SVG:
<link rel="icon" sizes="any" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5e400' d='m6 21 2-7-6-5h7l3-7 3 7h7l-6 5 2 7-6-4z'/%3E%3C/svg%3E%0A">
Есть такие инструменты , как это , которые кодируют свой SVG в base64.
Дополнительные сведения о значках SVG см. В этом ответе .
Если вы не используете HTML и он автоматически создается Flask или некоторыми фреймворками, вы всегда можете добавить фиктивный маршрут в приложение, чтобы просто вернуть фиктивный текст, чтобы исправить эту проблему.
Или . . . вы можете просто добавить фавикон :)
Например, для приложения Python Flask.
@app.route('/favicon.ico')
def favicon():
return 'dummy', 200
Иногда эта ошибка возникает, когда HTML имеет некоторый закомментированный код, а браузер пытается что-то искать. Как и в моем случае, я закомментировал код веб-формы во флаконе и получил это.
Потратив 2 часа, я исправил это следующими способами:
1) Я создал новую среду Python, а затем он выдал ошибку в прокомментированной строке HTML, до этого мне выдавалась только ошибка GET /favicon.ico HTTP/1.1" 404"
2) Иногда, когда у меня был повторяющийся код, например, файл python с тем же именем, я также видел эту ошибку, попробуйте удалить и их
Я решил эту проблему, используя HTTP-заголовок ответа Content-Security-Policy. Используя это, можно заблокировать браузер от дальнейших медиа-запросов, таких как изображения (возможны и другие типы). Я добавил следующий заголовок в ответ:
Content-Security-Policy: img-src 'none'
Проблема в том, что он будет блокировать ВСЕ запросы изображений. Если в вашем HTML есть изображения, они не будут загружены. В моем случае это, скорее всего, была ошибка в Firefox, потому что браузер запрашивал favicon.ico для ответа, Content-type которого был text/xml!
Это также зависит от браузера, реализующего эту функцию, которая применяется на стороне клиента.
Посетите https://content-security-policy.com для получения полного руководства по CSP.
Ваше здоровье!
Я предлагаю поместить сайт в.zip/ сжатую папку. Вот как выглядел пример веб-страницы в папке.zip/ сжатый:
Вот как это будет выглядеть в обычной папке:
Вы могли бы использовать
<link rel="shortcut icon" href="http://localhost/" />
Таким образом, он фактически не будет запрашиваться с сервера.