Значок Google Flask не будет работать в Google Chrome - PullRequest
Новая
       16

Значок Google Flask не будет работать в Google Chrome

0 голосов
/ 25 сентября 2018

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

У меня есть это в моем 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, он появится.Я очистил свой кеш и куки тысячу раз.Я перепробовал все.Он не будет отображаться.

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

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

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

Что происходит?

Ответы [ 3 ]

0 голосов
/ 26 сентября 2018

TL;DR

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

Подробнее

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

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

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

  • Просмотрите раздел head вашей HTML-страницы.Совет: не просматривайте свой код и не просматривайте элементы своей страницы с помощью Chrome DevTools.Вместо этого используйте «Просмотр исходного кода страницы», чтобы по-настоящему взглянуть на необработанный HTML.
  • Вы можете отправить свою страницу в W3C Validator .Если у вас есть body -только разметка в вашем head, валидатор сообщит об этом.
0 голосов
/ 26 сентября 2018

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

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

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

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

0 голосов
/ 25 сентября 2018

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

...