Фавикон Flask не будет работать в Google Chrome

Блин, я не могу заставить свой Favicon работать в Google Chrome. Работает в IE и Firefox. Иногда он (?) Работает в Google Chrome, когда я нахожусь на локальном хосте. Как только я его разверну, я никогда не смогу заставить его появиться.

У меня есть это в моем HTML:

<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

Я поместил это в свой основной файл Py на основе некоторых других сообщений, которые я прочитал:

@app.route('/favicon.ico')
def favicon():
    return send_from_directory(os.path.join(app.root_path, 'static'),
                               'favicon.ico', mimetype='image/vnd.microsoft.icon')

Если я перейду на /static/favicon.ico, он появится. Если я перейду только на favicon.ico, он появится. Я очищал кэш и файлы cookie тысячу раз. Все перепробовала. Он не появится.

Я не получаю никаких сообщений об ошибках, но в консоли браузера, если я перехожу на страницу Favicon напрямую, он говорит следующее:

Resource interpreted as Document but transferred with MIME type image/x-icon: "http://localhost:5555/static/favicon.ico".

Может это намек на то, что не так?

Что здесь происходит?


flask google-chrome html favicon
person Emac    schedule 25.09.2018    source источник

Ответы (5)


arrow_upward
3
arrow_downward

попробуйте переименовать значок с favicon.ico на что-нибудь другое .ico (например icon.ico), я знаю, что это кажется странным, но он должен работать

person Hassan ALAMI    schedule 25.09.2018
comment
Все еще не сработало. Что интересно, теперь я получаю эту ошибку: 127.0.0.1 - - [25 / сен / 2018 11:30:05] GET /favicon.ico HTTP / 1.1 404 - Я даже больше не ссылаюсь на favicon.ico во всем моем проекте а он там все еще ищет ?? Это даже не имеет смысла. Я не могу понять, что происходит, и меня так расстраивает, что я трачу время, которое должно быть потрачено на разработку, просто на то, чтобы показать эту дурацкую иконку. - person Emac; 25.09.2018
comment
Google Chrome по умолчанию всегда искал favicon.ico, просто игнорируйте предупреждение, у меня был опыт работы с одним из моих собственных проектов, который был разработан с использованием Grails. Это ошибка, которая была недавно исправлена, вам следует обновить свой Google Chrome, дополнительную информацию смотрите здесь: stackoverflow.com/questions/1003350/ - person Hassan ALAMI; 25.09.2018
comment
Поиск /favicon.ico - это соглашение, впервые введенное IE, и которому следуют почти все браузеры. Обычно это происходит, когда в HTML явно не объявляется значок. - person philippe_b; 26.09.2018

arrow_upward
2
arrow_downward

У меня такая же проблема, но я очистил, просто переименовав значок как scon (любое другое имя) и сохранив файл .ico в статической папке и убедитесь, что имя совпадает с именем файла. (использовал Google Chrome)

<head>
<title>My Webpage</title>
<link  rel ='stylesheet'type="text/css" href="./static/style.css">
<link rel="shortcut icon" href="{{ url_for('static', filename='scon.ico') }}">
</head>
person Arulmozhivarman C    schedule 28.08.2020

arrow_upward
0
arrow_downward

TL; DR

Убедитесь, что в вашем head нет пометок только для body (например, div, _3 _...).

Подробно

Проблема «работает везде, но не в Chrome» часто возникает из-за особого поведения Chrome в отношении недопустимых разметок в разделе head страницы HTML.

Когда Chrome находит разметку, которая не ожидается в head (например, div: эта разметка должна отображаться только в body), он считает head закрытым, и, таким образом, следующие разметки считаются находящимися в body, независимо от исходной HTML говорит. И поскольку Chrome игнорирует link разметку, когда они находятся в body, создается впечатление, что значок не был объявлен вообще.

Два способа исправить это:

  • Просмотрите раздел head на своей HTML-странице. Совет: не просматривайте свой код и не просматривайте элементы своей страницы с помощью Chrome DevTools. Вместо этого используйте View Page Source, чтобы действительно взглянуть на необработанный HTML.
  • Вы можете отправить свою страницу в W3C Validator. Если в вашем head есть разметка только для body, валидатор сообщит об этом.
person philippe_b    schedule 26.09.2018
comment
Спасибо за вашу помощь. Моя головная часть выглядит нормально. Это просто ссылки на некоторые скрипты и значок. Я чувствую, что все перепробовала. Я даже могу заставить его работать на локальном хосте, но я не могу заставить его работать при развертывании. Я собираюсь просто жить с пользователями Chrome, застрявшими с уродливым значком, потому что я не знаю, куда еще обратиться. - person Emac; 26.09.2018
comment
Если ваш сайт работает, не могли бы вы указать его URL? Вы также можете запустить средство проверки значков: realfavicongenerator.net/favicon_checker. Полное раскрытие: я являюсь автором этой услуги. - person philippe_b; 26.09.2018
comment
Он работает, но для доступа к нему требуется, чтобы пользователи вошли в систему из учетной записи Azure Active Directory моей компании. К сожалению, это означает, что ваш сайт тоже не будет работать, поскольку он будет тестировать только страницу входа от Microsoft, а не сам сайт. - person Emac; 26.09.2018
comment
Я понимаю. Как упоминалось в другом ответе, кеширование значков - обычное подозрение. Я настоятельно рекомендую вам очистить кеш (не только нажать F5) или даже попросить коллегу зайти на сайт с его собственным Chrome. - person philippe_b; 26.09.2018
comment
Просто попробовал его на другом рабочем компьютере, где я знаю, что он не использовался и не работал, поэтому я думаю, что это устраняет вопрос кеширования. Это не имеет никакого отношения к тому, что это веб-приложение Azure, не так ли? Я предполагаю, что у них все еще могут быть значки. - person Emac; 26.09.2018
comment
Если проверить доступ к сети Chrome, загружается значок или нет? Это может помочь вам более точно определить местонахождение ошибки (HTML или само изображение). Конечно, Chrome может не загружать значок из-за кеша ... - person philippe_b; 26.09.2018
comment
У меня нет большого опыта использования сети в Chrome, поэтому я не уверен, правильно ли я делаю то, что вы просили ... Но когда я перехожу к «Осмотр› Сеть »и обновляю свою страницу, он загружает все другие скрипты и страницы CSS, которые вызываются в моем ‹head›, но на нем нет ссылки на мой значок. - person Emac; 26.09.2018
comment
Поэтому, если я проверяю свои элементы в своем HTML, у меня есть: ‹link rel = shortcut icon href = / static / favicon.ico› Но в моей сети он не показывает никаких ссылок на этот файл favicon.ico. Он также загружается, если я перехожу прямо к static / favicon.ico. Может что-то со строкой HTML не так? Я не знаю, что это может быть, я взял это прямо из документации Flask. Я также удалил @ app.route, который использовал ранее, поскольку это не было проблемой. - person Emac; 26.09.2018
comment
Позвольте нам продолжить это обсуждение в чате. - person Emac; 27.09.2018

arrow_upward
0
arrow_downward

Попробуйте разместить что-то подобное в разделе head вашего HTML, у меня были те же проблемы:

<link rel="icon" type="image/png" sizes="32x32" 
  href="{{ url_for('static', filename='favicon-32x32.png') }}">

Вы можете добавить другие размеры, если они у вас есть, устройство, с которого осуществляется доступ к вашему сайту, выберет для них лучший.

После этого не забудьте снова очистить кеш. Вот ответ на StackOverflow с несколькими хорошими способами сделать это.

person belvederef    schedule 26.09.2018
comment
Спасибо за вашу помощь. Я попробовал, но ничего не вышло. Я чувствую, что все перепробовала. Я даже могу заставить его работать на локальном хосте, но я не могу заставить его работать при развертывании. Я собираюсь просто жить с пользователями Chrome, застрявшими с уродливым значком, потому что я не знаю, куда еще обратиться. - person Emac; 26.09.2018
comment
Быстрый вопрос: вы пытались загрузить веб-сайт из вкладки Chrome в режиме инкогнито? Вы проверяли, не отображается ли по-прежнему значок в Chrome для смартфонов, из-за которого вы, возможно, уже не загрузили веб-сайт? Если да, то вы можете полностью исключить неприятную проблему с кешированием. - person belvederef; 26.09.2018
comment
Да, я использовал инкогнито. Я просто попытался войти в систему с помощью Chrome со своего смартфона, и это тоже не сработало. Затем я попробовал его на другом рабочем компьютере, к которому, как я знаю, он никогда раньше не подключался, и он тоже не работал. Это не имеет никакого отношения к тому, что это веб-приложение Azure, не так ли? Я предполагаю, что у них все еще могут быть значки. - person Emac; 26.09.2018
comment
Я не уверен. Вы сказали, что можете видеть изображение, когда переходите к /favicon.ico. По моему опыту, мне не нужно было указывать маршрут во Flask для стандартного изображения значка. Попробуйте закомментировать маршрут Flask, используйте тип тега ссылки, который я предложил в ответе, и посмотрите, не изменится ли что-нибудь. Это сложный вопрос... - person belvederef; 26.09.2018

arrow_upward
0
arrow_downward

Зайдите в свой шаблон, у вас должно получиться что-то вроде этого:

link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"

Удалите строку, сохраните, обновите страницу (должно исчезнуть). Снова поместите линию в шаблон. Обновить. Должен был обновить

person flaviu    schedule 17.04.2020