3

For the life of me, I can't get my Favicon to work in Google Chrome. It works in IE and Firefox. It sometimes(?) works in Google Chrome when I am on the localhost. Once I deploy it, I can never get it to show up.

I have this in my HTML:

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

I put this in my main Py file based on some other posts I have read: 

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

If I go to /static/favicon.ico, it shows up. If I go to just favicon.ico, it shows up. I have cleared my cache and cookies a thousand times. I've tried everything. It will not show up.

I am not getting any error messages, but in the browser console, if I go to Favicon page directly, it does say this: 

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

Maybe that is a hint of what is wrong?

What is going on?

Emac
  • 1,098
  • 3
  • 18
  • 37

5 Answers5

3

try to rename the icon from favicon.ico to something else .ico ( for example icon.ico ), i know it seems strange but it should work

Hassan ALAMI
  • 318
  • 1
  • 5
  • 18
  • Still didn't work. What's interesting is I now get this error: 127.0.0.1 - - [25/Sep/2018 11:30:05] "GET /favicon.ico HTTP/1.1" 404 - I don't even reference favicon.ico in my entire project anymore, but it still is looking for it there?? This doesn't even make sense. I can't figure out what's going on and it's so frustrating that I'm wasting time that should be spent on development on just trying to get the stupid icon to show up. – Emac Sep 25 '18 at 16:35
  • Google chrome was always looking by default for a `favicon.ico`, just ignore the warning, i had the experience with one of my own projets wich was developped using Grails. It's a bug that was recently fixed, you shoud update your google chrome, for more information look here: https://stackoverflow.com/questions/1003350/why-is-chrome-searching-for-my-favicon-ico-when-i-serve-up-a-file-from-asp-net-m/5735865#5735865 – Hassan ALAMI Sep 25 '18 at 19:09
  • Looking for `/favicon.ico` is a convention first introduced by IE and followed by almost all browsers. This typically happens when no favicon is explicitly declared in the HTML. – philippe_b Sep 26 '18 at 08:04
2

i got same problem but i cleared by just rename the favicon as scon(any other name) and save the .ico file in static folder and make sure the name is same as filename. (used 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>
Arulmozhivarman C
  • 21
  • 1
0

TL; DR

Make sure you have no body-only markups (eg. div, p...) in your head.

In details

The "works-everywhere-but-Chrome" issue is often due to a particular behavior of Chrome regarding invalid markups in the head section of the HTML page.

When Chrome finds a markup that is not expected in head (eg. a div: this markup should only appear in the body), it considers the head to be closed and the following markups are thus deemed to be in the body, whatever the raw HTML says. And because Chrome ignores link markups when they are in the body, it is as if the favicon was not declared at all.

Two ways to fix this:

  • Review the head section of your HTML page. Tip: don't browse your code, and don't browse the elements of your page with Chrome DevTools. Instead, use View Page Source to really look at the raw HTML.
  • You can submit your page to the W3C Validator. If you have a body-only markup in your head, the validator will report it.
philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • Thanks for your help. My head section looks fine. It's just links to some scripts and the favicon. I feel like I've tried everything. I can even get it to work on the localhost, but I can't get it to work when deployed. I'm about to ready to just live with Chrome users being stuck with an ugly icon because I don't know where else to turn. – Emac Sep 26 '18 at 13:44
  • If your site is live, could you indicate its URL? You can also run the favicon checker: https://realfavicongenerator.net/favicon_checker . Full disclosure: I'm the author of this service. – philippe_b Sep 26 '18 at 13:46
  • It is live, but it requires users to be logged in from my company's Azure Active Directory account to access it. Unfortunately this means your site won't work either since it is only going to test the login page from Microsoft and not the actual site. – Emac Sep 26 '18 at 13:51
  • I understand. As mentioned in another answer, favicon caching is a usual suspect. I strongly advice you to flush your cache (not only hit F5), or even ask a colleague to visit the site with his own Chrome. – philippe_b Sep 26 '18 at 13:54
  • Just tried it on another work computer where I know it hasn't been used and it didn't work, so I think that eliminates the cache question. It wouldn't have anything to do with it being an Azure webapp would it? I assume they can still have favicons. – Emac Sep 26 '18 at 14:05
  • If you check the network access of Chrome, does it load the icon or not? That might help you locate the error more precisely (HTML or image itself). Of course, Chrome might not load the icon because of the cache... – philippe_b Sep 26 '18 at 14:13
  • I don't have much experience using Network in Chrome, so I'm not sure if I'm doing what you asked properly... But when I go to Inspect > Network and refresh my page, it loads all the other scripts and the CSS pages that are called in my , but it does not show any link to my favicon. – Emac Sep 26 '18 at 14:35
  • So if I inspect my Elements in my HTML, I have: But in my Network, it doesn't show any reference to that favicon.ico file. It also loads if I go straight to static/favicon.ico. Maybe something with the HTML line is wrong? I don't know what it could be though, I took that straight from Flask's documentation. I've also removed the @app.route that I used previously since that didn't seem to be the issue. – Emac Sep 26 '18 at 14:47
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/180905/discussion-between-emac-and-philippe-b). – Emac Sep 27 '18 at 19:57
0

Try placing something like this in the head section of your HTML, I had the same issues:

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

You can add other sizes if you have them, the device your website is accessed from will choose the best for them.

After that, make sure to clear your cache again. Here is a StackOverflow answer with a few good ways to do that.

belvederef
  • 2,195
  • 19
  • 16
  • Thanks for your help. I tried it and it didn't work. I feel like I've tried everything. I can even get it to work on the localhost, but I can't get it to work when deployed. I'm about to ready to just live with Chrome users being stuck with an ugly icon because I don't know where else to turn. – Emac Sep 26 '18 at 13:42
  • Quick question: did you try loading the website from a Chrome incognito tab? Did you check whether the favicon is still not showing on Chrome for smartphones, that you possibly did not load the website from already? If so, then you can totally exclude a nasty caching issue – belvederef Sep 26 '18 at 13:51
  • Yes, I used Incognito. I just tried logging in using Chrome from my smartphone and it also did not work. Then I tried it on another work computer where I know it has never been connected to before and it also did not work. It wouldn't have anything to do with it being an Azure webapp would it? I assume they can still have favicons. – Emac Sep 26 '18 at 14:04
  • I'm not sure. You said you can however see the image when you navigate to `/favicon.ico`. In my experience, I didn't need to specify a route in Flask for the standard favicon image. Try to comment out the Flask route, use the type of link tag I suggested in the answer and see if anything changes. This is a tough one... – belvederef Sep 26 '18 at 14:28
0

Go to your template, you should have something like this:

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

Delete the line, save, refresh page (should be gone). Put the line in the template again. Refresh. Should have updated

David Buck
  • 3,752
  • 35
  • 31
  • 35
flaviu
  • 1