This feels like an extremely silly problem, and yet I haven't been able to solve it - despite much searching.
I'm trying to get my Rails app to display a favicon, and I can't seem to get it working.
I've tried placing a basic 16x16 favicon.ico image in my public folder, as well as the assets/images folder.
I've been using the following code in my layouts/application.html.erb file, within the head
<%= favicon_link_tag "favicon.ico" %>
When my site loads, I can see the following being displayed in the html upon inspecting the page, but I cannot see the favicon.
<link href="/images/favicon.ico" type="image/x-icon" rel="shortcut icon">
Things I have tried to solve this include:
1) Changing my code to "/favicon.ico", or removing the explicit link entirely.
2) Clearing the cache multiple times, and trying multiple browsers
3) Placing the favicon.ico file in multiple locations (as mentioned, I've tried it both in /public and in the asset pipeline)
4) Loading my local environment from a different port
But no luck so far, despite these efforts. What else could I be doing wrong here? I assume it's blindingly obvious, but none of the other answers on the topic have worked for me.
Related
I'm working on an assignment for class and I cannot get my CSS to attach at all to the html. I'll upload files as well as give the text-format of what exactly is going on but I've tried a few different things. I am a beginner but I have checked and double checked file paths. When I ctrl+click on the link within svc I consistently open the file. Chrome dev tools shows it as unable to find though.
This is my current set up in html5 :
what I see on vsc
my files are located in the same folder - the wireframe_stylesheet.css is definitely spelled correctly in both places. I've tried doing a / in front of wireframe. I've tried moving the file around and then adding / and folders. I've tried doing a long rout (not sure if it's the name) but all the way from C:// down to the file itself, and nothing seems to want to link it. I've also tried adding style="text/css" that didn't work either. I've tried adding the (.) before and after the file name, I've tried adding the folder above it so that it will go back into the file, I've tried adding a / after the " - still nope.
My html
My Css (sort of, there's more but this is the gist)
Try this
<link rel="stylesheet" href="./wireframe_stylesheet.css">
But I believe you've done something wrong in HTML code, share the full code so I can figure out what's wrong in it.
Use this snippet in between the head tag
<link rel="stylesheet" href=".Your CDs file name.css">
I was making a new path for pages on my site and was trying to figure out how to path to my stylesheet and images cleanly. Here's an element that shows my problem:
<link rel="stylesheet" href="/src/styles.css">
My local copy of my site is hosted here at "E:/Documents/WEBSITE", the local page I'm trying to link the stylesheet from is "file:///E:/Documents/WEBSITE/things/weapons.html", and the stylesheet is at "E:/Documents/WEBSITE/src/styles.css". I have the local site open on Firefox and I am using VSC to code. When I follow the href path in VSC, it brings me to the correct stylesheet. When I upload a version of the site that has the same path, it works correctly.
I have the local site open on Firefox and I am using VSC to code. When I follow the href path in VSC, it brings me to the correct stylesheet.
I've looked over the code and made sure it would(and does) work otherwise. Like I said, it works when on the live site.
I've placed dummy "src" folders with "styles.css" in them on my base E drive, my Documents folder, and even in the "things" folder itself. If the href were pulling from any one of these, there would be an obvious change to the local site, but none of them are pulled from with that path.
When I upload a version of the site that has the same path, it works correctly. The same happens with some elements that I tried this with the src on. It simply will not work locally. The only other thing I can possibly think of is that it has a problem with the "file://" at the beginning, but I can't imagine how I would troubleshoot or avoid that. I get no errors logged.
I really can't include a reproducible example of code, but what I've done that works locally and on a live site:
<link rel="stylesheet" href="../src/styles.css">
and to reiterate, this doesn't work locally, but it works on a live site:
<link rel="stylesheet" href="/src/styles.css">
And just to clarify at the end here, the path is working when the site is live, but not locally. Not the other way around.
href="/src/styles.css" is an absolute path, not a relative one.
From file:///E:/Documents/WEBSITE/things/weapons.html it maps to something like file:///E:/src/styles.css (I think Windows file paths preserve the drive, but I'm not certain).
The browser has no way of knowing that you want file:///E:/Documents/WEBSITE/ to be the root directory of the site. The root is determined by stripping all the path information off the URL, not just parts of the path.
Absolute paths are, generally, not suitable for links used on a local file system.
Use an HTTP server. There are many free ones you can use for testing. VS Code has an extension called Live Server that makes it easy to run one.
I am writing my first web application using Flask and SQLAlchemy.
My CSS file is currently saved under a static folder and the styling is correctly applied to my webpage
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
However when I try to update it (for example changing the fontweight from bold to normal) it will not show.
I could even remove all the content of my css file and my website will still look the same (as if the content was never deleted).
The only way I found to make updates was to create a new file "main2.css" and update the url link from the HTML file which is very inconvenient.
Has anyone found a better way?
It sounds like your CSS file is cached. You can test this by changing 'main.css' to 'main.css?something'. Some people append a date string or other to their CSS file so it busts cache periodically.
It's possible you're getting the cached version of your CSS. After making updates to your CSS file, have you tried doing a hard reload? How you do this depends on the browser, but for Safari this can be done by holding Shift and clicking the Reload button.
I had the same issues and I realised I couldn’t keep asking my users to do a hard reload. Constantly renaming my static folder (where all CSS/JS files were kept) seemed error-prone from a production devops perspective. Then I found this addon called flask-static-digest, which was adding md5 hashes to the file names as well as gzipping them. It is a good fix for my production server.
https://github.com/nickjj/flask-static-digest
Another solution I found was really helpful during testing is to do a full reload in your browser (in my case Google Chrome) by shift-clicking the reload button.
I am trying to load my simple website online hosted by Github.io. However, after countless and frustrating efforts of troubleshooting and debugging the HTML & CSS script, my web still couldn't get the CSS file loaded as desired for some really mysterious and extremely annoying reason.
Don't get me wrong:
I swear my CSS file is put in the absolute path rather than the relative path as I firstly put it, so I will smash myself if it's the cause of the error.
After a while couldn't figure out, I looked over similar or related issues posted on stackoverflow as well, some suggest that the access permission is maybe the reason, but I followed them with the command inside my directory of CSS file
chmod -R 777
But I don't see it resolves as well cuz the command has no effect, and I didn't run it at the root level
I inspected this web on both Chrome and Safari, and the style.css is blank as it couldn't be loaded!!!
Now, I keep hold on this to wait for any of your "magic" helps. I deeply appreciate the help, as I tried my best fixing it already, but didnt work.
Here is the just HTML link tag line where the file is not loaded.
<head>
....
<link rel="stylesheet" href="./_css/style.css">
</head>
If your _css directory is in the root, your CSS link should start with a slash:
<link rel="stylesheet" href="/_css/style.css">
But naming your directory _css may be a problem. Github Pages by default treats your site as a Jekyll website, which processes your files and does not publish files/directories having _ prefix.
I think you have 2 options:
If you don't know about Jekyll and you are not creating a Jekyll site, put a file in your root named .nojekyll to bypass Jekyll processing.
Rename your directory from _css to css and also modify your <link> tag.
The default favicon.ico that gets included in a WebMatrix product is added in _SiteLayout.cshtml like so:
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
That icon does not fit my app, so I converted a jpg I created at http://www.coolutils.com/Online/Image-Converter/.
I renamed favicon.ico to YourMotherWearsCombatBoots.ico and renamed the image I had
converted to favicon.ico (after adding it to my project).
I thought that my new .ico file would get used in the browser's tab for the page/site. But, alas, no! The old .ico file is making like the Raven of Poe's poem - it simply will nevermore go away. What's up with that?
UPDATE
Note: If trying this out using firefox or IE as the browser doesn't work (currently testing with Chrome), I am going to bountify this question for 50 points ASAP. If I get an answer prior to that, I will award the bounty post-answer.
Clear the cache :)
As long as the path to the file (including the filename) is correct, and it is a .ico file, it should render.
That having been said, try not using ~ maybe, since it is only an html tag and it uses / to find the root of the site.
I've done this many many times, and never had any issue with any ico in any browser.
Honestly the cache is the only thing I can think of.
----------------------------------UPDATE----------------------------------
I'm expanding my answer to show an example. This is a scenario I have just recently set up and it worked perfect first time (as it does for me every time).
The HTML:
<link href="/Images/Site_Icon/Scribe.ico" rel="shortcut icon" type="image/x-icon" />
The Directory Structure:
The Result:
Since I've been using icons for my sites, I have not noticed that there need be anything else. As far as I know this is all that should be involved with getting this to work as expected.
If this still does not help, do the following:
Re-verify the path, check it one folder at a time.
Delete the old Microsoft favicon entirely, unless you plan on using it for something else (which I doubt).
Open the ico file you are trying to render. Is it really the picture you expect it to be?
Manually (Ctrl+Shift+Del) clear the cache (especially for Chrome) and try again (if you're gonna debug in Chrome, you might as well get used to doing this regularly [okay, actually it doesn't matter what browser you use, you'll always have to do this when something doesn't render the way you expect, so that you'll know it's not a caching issue]).
Make sure you're looking at the right site, when it's open in your browser (i.e., make sure that you're not editing your site locally and pulling a non-updated version from your server or something).
Other than that, I can't think of anything else it could be.
Most likely an issue with the browser rather than anything to do with WebMatrix or code.