For some reason my favicon is not appearing on chrome. I am using django. And I have a file named favicon.ico in my static folder.
{% load static %}
<link rel="icon" href="{% static 'favicon.ico' %}"/>
Add the image in static folder and make sure the image is an ico file
Hope this may help:
{% load static %}
<link rel="shortcut icon" href="{% static 'yourappname/images/favicon.png' type='image/ico' %}"/>
OR
You can store favicon as a png file too.
<link rel="shortcut icon" href="{% static 'yourappname/images/favicon.png' type='image/png' %}"/>
Additionally:
Store your icon in yourappname/static/yourappname/images/favicon.ico path
Make sure you have written <link rel... between the <head> tags in your template.
Don't forget to use {% load static %} tag in your template.
You can find more details about 'using favicon' from this question.
You can try :
<link rel="shortcut icon" href="{% static 'players/images/liverpool.png' type='image/png' %}"/>
Related
Occasionally I see these errors in my PHP log about favicon-96x96.png not found.
It looks like this:
No route found for "GET /assets/favicon-96x96.png" (from "https://test-project.com")
My head element has these favicons loaded:
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicon-16x16.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="96x96" href="{{ asset('favicon-96x96.png') }}">
So it should be found by any browsers without a problem.
Also I can't even reproduce this error, I only see it logged a few times a day.
Any ideas what kind of requests these could be? I don't have any controller called assets or any public folder named like this. Every favicon is in public folder.
If I'm not mistaken the 96x96 favicon is used by Google TV. How could I reproduce this behaviour?
This is a weird problem. On my login page the CSS will always load correctly.
But once i sign in to my application and get redirected to the dashboard, the CSS will almost always fail to load the first time although when i press F12 to see in the network tab if the CSS files are loaded; they are.. After some inactivity when i refresh the dashboard again the CSS may fail to load although the network tab sais it did load properly..
All CSS files exists and the HTML looks like this in the view:
{{-- CSS --}}
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('css/font-awesome/fontawesome.css') }}">
<link rel="stylesheet" href="{{ asset('css/font-awesome/solid.css') }}">
<link rel="stylesheet" href="{{ asset('css/font-awesome/regular.css') }}">
<link rel="stylesheet" href="{{ asset('css/choices.css') }}">
<link rel="stylesheet" href="{{ asset('css/common.css') }}">
<link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
#stack('css')
I have also tried to clean the browser cache with no luck.
Also i tried to composer dump-autoload, i don't know if that would help in any way but i tried it.. What could be causing this?
I have 2 images for reference.
The first one is when this weird error happens and the other one is how it looks just after i refresh it.
I have in my index.html, between my <head> tags the following line of code:
{% block head %}
<link type="image/x-icon" rel="shortcut icon" href='static/img/favicon.ico'/>
{% endblock %}
This is not working somehow. But if I go to: 'http://127.0.0.1:5000/static/img/favicon.ico' The favicon shows up. So this means that the favicon works, it's displayable but I can't find a way to put it next to the URL as it should be. Thanks in advance
From your code, you have given and the URL provided it looks like it is a flask app.
If it is flask you need to load the static files as follows, which will help you to load the favicon as well.
<link rel="shortcut icon"
href="{{ url_for('static', filename='img/favicon.ico') }}">
Try it like this:
<link rel="icon" href="static/img/favicon.ico">
Following is my code in an HTML page:
<html>
<head>
<link rel="manifest" href="{{ STATIC_URL }}manifest.json" />
<link rel="stylesheet" href="{{ STATIC_URL }}ng-grid.min.css" />
</head>
</html>
Both manifest.json and ng-grid.min.css are served from the same static folder.
ng-grid.min.css was loaded as soon as the page was rendered but manifest.json file is not loaded.
On inspecting using developer tools I couldn't find a request for manifest.json.
Am I missing something?
You missed a '/' in the statement.
<link rel="manifest" href="{{ STATIC_URL }}/manifest.json">
I am trying to make a simple website using Python and Flask. Right now, I have the HTML and CSS finished, but my page does not show any of the CSS. My files are in the following hierarchy:
/static
/static/css/style.css
/static/js/skel.js
/templates
/templates/index.html
I have the following code in my html file:
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/config.js"></script>
<script src="../static/js/skel.min.js"></script>
<script src="../static/js/skel-panels.min.js"></script>
<noscript>
<link rel="stylesheet" href="../static/css/skel-noscript.css" />
<link rel="stylesheet" href="../static/style.css" />
<link rel="stylesheet" href="../static/css/style-desktop.css" />
</noscript>
When I run this, the terminal displays "304" for the JS files and gets them from "/static/js/skel.js" which I think is correct, but it then displays "404" for the CSS files and gets them from "/css/style.css". I am not quite sure why this is happening - shouldn't this be retrieving files from /static/css/style.css? How can I fix it?
Thanks for the help.
Your on-disk layout is not the same thing as the routes served by your Flask site. Do not rely on the relative paths between templates and static.
Instead, have Flask calculate the routes to static files for you, using the url_for() function in your Jinja template:
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/config.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel-panels.min.js') }}"></script>
<noscript>
<link rel="stylesheet" href="{{ url_for('static', filename='css/skel-noscript.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style-desktop.css') }}" />
</noscript>
If the template is really what you have, and your layout is really what you list, then they don't match:
/static/css/style.css
does not match
<link rel="stylesheet" href="../static/style.css" />
Instead you should have
<link rel="stylesheet" href="../static/css/style.css" />
or move style.css up one folder. Note however that IIRC you can't have ../ in path, because static folder is supposed to be at same level as your flask app script. So you should be able to just have
<link rel="stylesheet" href="static/css/style.css" />
but as others have mentioned it is better to have flask generate the url for you via url_for (see example in step 6 of tutorial).
I had the same problem. This solved it:
open your config.js and add static/ in front of the css/... in all links like href="css/style.css" that they look like href="static/css/style.css" and it should be fine.
The question is already 5 months old but I hope I can help someone who has the same problem.