I am having issues trying to get the favicon to show for my site http://www.internhacks.io/.
When testing the file in Chrome, I am able to see it, and have the following in my <head> tag
<link rel="icon" href="assets/img/favicon-#2x.png">
The project can be found here on Github.
The file structure is:
-README.md
-favicon.ico
-index.html
-assets
I am currently hosting the site with Namecheap and see no way to serve a favicon from there.
If anyone has experienced this before when hosting with Namecheap, or sees the issue, please let me know!
I just visited http://www.internhacks.io/assets/img/favicon-#2x.png and I get the whole index.html page back. You may want to check your .htaccess rules for rewrites, to make sure that when requesting files, they can be received.
Related
enter image description here
enter image description here
I'm working on a local server and trying to add a simple favicon. I have already searched high and low on these forums, and tried everything. I'm not sure what is going wrong.
This is the code I have inserted into the head of my code:
<link href="http://www.canwise.com/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
my favicon image is in the same folder as my html file for this page. I haven't even put it in an images folder.
First of all, please read the typical w3sfoundation example:
W3-Schools - HTML Favicon
Please note, that in this example the path starts with /
The / means, that the icon is relative to the root directory of the webpage. So if you are opening for example:
/subpages/guestbook.php
and your favicon is located at:
/favicon.ico
you also need to write it that way. Otherwise it will try to open:
/subpages/favicon.ico
Please also define the type:
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
You also need to keep in mind, that localhost often works different from an online webpage. Please open the browser developer tools using and look at networking. Clear all and reload the page. You should se an entry, that tries to load the favicon. If it cannot be loaded, you will find the reason there. If it works, you will see a 200 GET (HTTP SUCCESS). If not, the error code will help you find the source of favicon not loading properly.
If you find no entry for the favicon at all, please run your HTML/PHP through one or more linting tools. Sometimes a slight syntax error will result in very specific HTML features breaking. From the picture, your HTML looks good so far.
So I've been working on a website for college and I'm starting to learn PHP but for that I installed xampp and tried to access the website from localhost.
By my understanding, the HTML file and images, even (some) images defined in CSS are loading but the entire CSS file is not, like float and flexbox and some padding, borders, and different types of positioning isn't working as intended. It's definitely finding the CSS file so I don't think there's a problem in my <link> tag in the <header>.
HTML header:
<head>
<meta charset="utf-8">
<title>Home - akiro</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
As Doc-Han Stated this is most likely caching, and its an issue I think most of us have run into during the UI development process.
One thing you can do to get around this, is to open and do your debugging in an incognito window which wont cache files and can be reopened to load new sets if session caching does occur.
Alternatively some code editors have an in-built web server instead for this reason. I've been using Adobe brackets for a couple years now and love it. It serves the pages using an internal Node server and as a result, they have it set up for real time code updates. Changes to the code are reflected in real time which i find helps a lot in dealing with UI development flow for me avoiding issues like this and just the saved 3-5 seconds of refreshing each time i make a change (which adds up when your making 5000 changes Im certain other editors offer something like this as well.
This is just because with Xampp the browser caches your CSS files. This means that if making changes to the file, the browser will still access the cached file rather than the new one. A simple trick is to open the CSS from the local server and refresh the page so that the new CSS will be used.
example open localhost:8080/project/css/style.css and refresh that page
Quite some possibilities why it's not working as expected:
As Doc-Han stated; an old version of the css my have been cached.
You're loading the css from a relative path: style.css. This means the css should be in the same folder as the html file. Maybe the css should be loaded from '/style.css' or '/resources/style.css' or another location
Maybe the css contains some simple typo's so you're applying 'flaot' instead of 'float'
Inspect your page through your browsers developer tools. Open the console. Check if there are there any errors. Check if the css did load, also check if the right version was loaded. Check if the styling rules are applied to the right html elements or are applied at all.
If it is a caching problem in Chrome you can open the dev tools, open the Application tab, click the 'clear storage' menu item and clear site data. Now reload the page. In the network tab you can also click 'disable cache' and reload the page.
Just clear your browser's caches and done!
I just had the same problem but opposite and troubleshooting with Google brought me here.
My server was working perfectly in localhost but when I tried visiting it live via Ngrok or port forwarding, I got broken pages without CSS. I read a comment in this post about visiting the CSS file directly and then refreshing and in doing so realized I couldn't visit a lot of my CSS files, and then realized I set rules in my .htaccess for rewriting. Only leaving this comment so if anyone makes my mistake and finds themselves here like I found myself here, check your .htaccess.
When and how do browsers request the favicon.ico file? Do they always check for it in root, or do they read the content of the webpage first to see if the page specifies the location?
I have my favicon.ico path in /images
There is the following tag in each of my pages:
<link rel="shortcut icon" href="images/favicon.ico">
When I load the page in my browser, it seems to work (I can see the file), but I don't know whether they are making bad requests to my root folder first (where the file doesn't exist), and are later making a request to the link.
I want to minimze 404's and wasted bandwidth, by the browser making incorrect calls to my site.
EDIT: I'm looking for some insight into how browsers work, and request this file, so my site structure is efficient.
Remember that not all requests to your site are for HTML pages! Requests for non-HTML content, like bare image files (e.g, viewing http://example.com/image.jpeg directly in the browser), cannot see a <link> tag. Therefore, they must fall back to searching for the shortcut icon in the standard location at /favicon.ico.
This still doesn't mean that this needs to be the canonical location, though! You can still keep it in /images/favicon.ico if you want - just make sure that a redirect is in place from /favicon.ico to wherever your preferred location is.
My friend recently provided me with some disk space on his VPS and gave me the use of http://IP/czdavid/. I am not currently in need of a domain name since it will serve me as a file sharing site.
Now, the problem is that he has his favicon on the root of the IP and browsers search for it there. I can resolve the problem on individual pages with <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>, the problem is that directory listing and actual files - images and text files and other opened in a browser - will show the domain favicon.
Is there any way to set a favicon for the entire sub-directory, short of getting a domain name?
No, this is not possible.
favicon.ico will be retrieved from the root of the site, unless specified in a link element on an HTML page.
The only way I can think of, would be to use the URL rewriting capabilities of the web server. At least in case of an apache, it would be possible to create a ruleset, that would deliver a different favicon depending on the referrer from the request.
But it is an ugly hack and only works, if browsers actually submit a referrer with a request for a favicon.
Could there be any problems moving favicons and apple touch icons to a subfolder?
Like:
<link rel="shortcut icon" href="/images/favicons/favicon.ico">
<link rel="apple-touch-icon" href="/images/favicons/apple-touch-icon.png">
Yes, some browsers start downloading /favicon.ico at the same time they start downloading HTML document. If there's no file you'll get an extra 404 in your server log and the browser will have to make an extra HTTP request when it recognizes the icon is elsewhere.
A quote from Yahoo's Best Practices for Speeding Up Your Web Site:
The favicon.ico is an image that stays
in the root of your server. It's a
necessary evil because even if you
don't care about it the browser will
still request it, so it's better not
to respond with a 404 Not Found. Also
since it's on the same server, cookies
are sent every time it's requested.
This image also interferes with the
download sequence, for example in IE
when you request extra components in
the onload, the favicon will be
downloaded before these extra
components.
The only problem could be that your relative link is not under the root domain, so that
HOST / YourPath /images/favicon.ico
can be found difficult.
If that would be the case then you would need to include a base href tag in your document and then this would be solved.
p.s. here is the parser i'm writing now to auto download favicons, find yourself in the flow: http://plugins.trac.wordpress.org/browser/wp-favicons/trunk/includes/class-http.php