Forums

Favicon appears in development, but not on Pythonanywhere (Django)?

I've taken the following steps to show a favicon on our site, which uses Django 1.8.1:

1) set STATIC_URL to '/static/'

2) created a file called favicon.ico, and put it in the static directory (in a subdirectory called 'other' with CSS, JS, etc.)

3) ran the 'collectstatic' command

4) In my template, in the head part of the HTML, put:

<link rel="shortcut icon" type="image/png" href="{% static 'other/favicon.ico'%}"/>

This worked fine when I run it in development on my own computer, but doesn't work on pythonanywhere. I googled a bit and found that browsers may look for favicon.ico in the root directory, so I went as high as I could in the directory structure (which was /home/username/) and added favicon.ico there, to no effect.

Any ideas on how I can get the favicon to appear in my django app?

hi there,

you may need to set the static directory correctly in the webapps tab and then reload the webapp. ie. should the directory be /static_root or should it just be /static etc?

Hi!

Did you get it working? I have almost the same problem:

  • local dev server shows favicon in Chrome and Firefox
  • live app on PA shows favicon in Firefox and IE, but not in Chrome

Of course, all settings seems OK: static folders, static root, and collectstatic works fine (and Firefox shows favicon OK).

I also tried reloading the page in Chrome with cache cleared (F12 + Empty cache and hard reload), it did not help.

Please, write here if you solved it.

Have you tried checking the "network" tab in Chrome's developer console to see if it's trying to load it from the right place?

Yes, the url is right. An hour ago I just moved the app from test domain (app.pythonanywhere.com) to my own domain, and it shows favicon in all browsers OK.

While making the changes I did not notice if it was due to the move or the browser. However, since it worked OK at least in one browser, it logically should be the Chrome's fault, not the host's.

Odd. So is it all working OK now? (I've checked the custom domain associated with your account in Chrome and I can confirm I get what looks like the right favicon in the browser tab.)

Yes, it works now. Magic happens :-)

:-)

problem still exists, if you know what is the solution please update.

When I go to your site I get a page that specifies that the favicon is located at http://creactspr.pythonanywhere.com/favicon.ico. However, that URL returns a 404 error. You need to specify the file in the "Static files" section of your "Web" page, with a URL of "/favicon.ico" and the "directory" set to the specific file in your file storage.

hah. Surprise! Some browsers are very sneaky or poorly behaved! They hard-code the URL for FAVICON - ignoring whatever you set in the HEAD section. I found a forum posting discussing this, and the "best" solution is to add a URL that re-maps the hard-coded address they use to your static folder:

re_path(r'^favicon\.ico$', RedirectView.as_view(url='/static/favicon.ico', permanent=True)),

https://www.pythonanywhere.com/forums/topic/2297/#id_post_54363

Has the same problem and I think what ultimately worked for me was a combination of the last two comments above. Especially the top one. I struggled for a bit trying to make user.pythonanywhere.com/favicon.ico the site that directly loads the favicon. Was basically working blind until there just because you can't see the reality of what you are changing due to cache, turns out even the default non-favicon is also cached for a while and that messes with your testing, what a headache.

Edit: I just discovered If you have inspect mode and do right click on chrome's reload button now you can Empty cache and Hard reload. Which would have saved me like an our of my time. There you can see the favicon being fetched on network tab.