I want to change the favicon of resources html display pages. I mean when i go to the image url i want to see my icon in the title bar not the icon of the server (in my case XAMPP).
Add this to the <head> of your file:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
make sure that the href link is correct.
Just put an ICO file named favicon.ico in document root.
A quick test is to open the URL http://my.domain/favicon.ico in a browser; it should display the icon.
Note that the icon file MUST be in document root.
If you can't put the file there physically, you could use Apache's mod_alias to map the file to this URL.
This is done by placing the following line in your server's configuration (httpd.conf file):
alias /favicon.ico /path/to/your/images/directory/favicon.ico
use this
<link rel="icon" type="image/ico" href="images/favicon.ico"/>
Read this Blog Article as well
As the other posters have stated, you need to edit your HTML and in the section, add the line to show the favicon you have uploaded.
If you look at the source for this page, the line defining the favicon is this:
<link rel="shortcut icon" href="//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6">
but the code stated elsewhere here will also work (<link rel="icon" type="image/x-icon" href="favicon.ico"/>)
Many browsers will automatically look for the favicon.ico in the root of the webserver (as Alex Shesterov wrote in a comment)
Related
I have looked over the code and cant seem to see where the link between the two files is failing. My index page uses the exact same code to link the files and it works fine. When I add the styling in the header of the php/html file it works but otherwise nothing happens.
The reference that you have for the stylesheet is relative to the url of the page you're on.
For example, this:
<link rel="stylesheet" type="text/css" href="style.css">
... says that the stylesheet is at the same path that the page is on. So if the url in the address bar is https://somewebsite/admin/index.php then that page will try to load the stylesheet at https://somewebsite/admin/style.css. If the url is https://somewebsite/index.php then the page will try to load the stylesheet at https://somewebsite/style.css.
If the stylesheet resides at the root of the site then your link tag should look like this:
<link rel="stylesheet" type="text/css" href="/style.css">
This will make your page look for the stylesheet at https://somewebsite/style.css regardless of what the path of the url says.
You should make the right path, right into your css file at
Example:
<link href="assets/css/blabla.css" rel="stylesheet">
I am baffled by this and I am hoping someone can indicate at a highlevel where my thinking is faulty.
I have a simple PHP programme
- index.php includes a file /common/header.php
- header.php links to the stylesheet.
Issue 1 which I think has baffled other people but I have not seen a reply that answers the question directly.
If I put the style sheet in the root folder (in the same place as index.php), then I can link to the file without a path
<link rel="stylesheet" type="text/css" href= "style.css" />
The point is that the style sheet is relative to index.php NOT the the header.php when it is included in index.php. Is this correct?
Issue 2 is really odd. When i put the file in a folder I can link to it as
<link rel="stylesheet" type="text/css" href= "/common/style.css" />
or
<link rel="stylesheet" type="text/css" href= "common/style.css" />
or
<link rel="stylesheet" type="text/css" href= "styles/style.css" />
and so on.
BUT, this fails if I name the folder css. Anyone?
There is one other point which might be relevant. I am using WAMP and this website is set up with a virtual host.
That is, I have the host set up in the hosts file in Windows/System 32 and in the Apache httpd.vhosts.conf file.
That means that the index.php file is in the root directory and /common/style.css is functionally equivalent to common/style.css.
Any tips for understanding this would be much appreciated. thanks.
First of all, a relative link to a path in html is completely different from one that is in PHP.
in PHP your document root might be /var/www/example/ while in html this could be http://www.example.com/
the client browser that reads the HTML as no idea of where your html is echo'd location wise other then the entry script (in this case : http://www.example.com/index.php)
So if i just refer to
<link rel="stylesheet" type="text/css" href= "/css/style.css" />
and put the stylesheet in /var/www/example/css/style.css then it doens't matter what the location of header.php is and where it is echo'ed, as long as it is in relation the to entry script (index.php in this case)
Issue 1:
Your problem is not one of PHP, but rather of HTML. CSS is applied by the browser after it has received the HTML source. So when your index.php is the script that outputs the content, all resources your reference in your html will be relative to the path this file is in.
Issue 2:
the difference between
<link rel="stylesheet" type="text/css" href= "/common/style.css" /> and <link rel="stylesheet" type="text/css" href= "common/style.css" /> is that version 1 will only work as long as /common resides in the root of your web server. It's an absolute path (starting with /) while version 2 is relative and would also work if your file was /xyz/common/style.css.
I have no idea why this should not work with the name css though. You should probably retry this.
Thanks everyone. That was fast.
To sum up the include problem which I suspect many people have. The path to the stylesheet must be relative to index.php not header.php.
The other problem I have solved. Some files were inadvertently copied into C:/wamp/www, i.e., the normal root. I cleaned all those out and the odd problem of refusing to play with a folder call /css went away. So this is a two fold problem beginning with 1. mess and 2. being something to do with the virtual host not working properly. At least the fog has lifted. Thank you all.
And for DarkMukke, "Anyone?" is phatic. It is a social nicety most likely used by newbies to convey respect when they realise the problem is as much to do with their own fog as anything technical. Or in geek-speak, the newbie is tipping their hat to anyone who will give them 5 mintues to set them straight.
Thanks everyone.
I have a application where i have two versions, Both these versions used different skin. My problem is I need to change favicon based on skin used.
In my application root folder there is only one favicon of one skin.
For 2nd favicon i used path in index.php like
<html>
<head>
<link href="images/skin2/favicon.ico" rel="SHORTCUT ICON"/>
</head>
</html>
And it render favicon of 2nd skin fine, but when i refresh page using Ctrl + F5 then favicon of 1st skin get rendered which is placed in root directory.
Please advise me some solution to solve this problem....
Firefox might be caching the favicon.
Try
Append a query string to the end of the favicon name
<link href="images/skin2/favicon.ico?v=2" rel="SHORTCUT ICON" />
Check to make sure the favicon is accessible. Go to the URL and force a refresh.
http://mydomain/images/skin2/favicon.ico
Ctrl + F5
Rename the favicon file.
Use url rewriting to retrieve favicon.ico from php or asp.net.
You can disable caching and also retrieve the correct icon for the active skin.
RewriteRule ^favicon.ico favicon.php [L]
Then in favicon.php return the correct version
<?php
// add cache control headers here
header('Content-type: image/x-icon');
echo file_get_contents("path-to-skin-icon");
?>
I did some trick and it is working fine, sharing here may help others
<script>
var faviconFolderName = "skin3";
if(skinName == "skin1")
{
faviconFolderName = "skin1";
}else if(skinName == "skin2"){
faviconFolderName = "skin2";
}
$(window).load(function () {
$('head').append('<link href="images/'+faviconFolderName+'/favicon.ico" rel="shortcut icon" type="image/x-icon" />');
});
I have following code for my header.php file, in the includes folder.
<html>
<head>
<title>Health Mate</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link href="stylesheets/public.css" media="all" rel="stylesheet"/>
</head>
<!-- Some more code-->
</html>
I have pasted favicon.ico in the includes folder itself.Problem is the favicon is not setting up.Also If i redirect user to some site on submit button like yahoo.com . My site is taking favicon of yahoo. Please suggest some solution. Also tell me if favicon needs to be .ico file or it can be .png as well?
You should have necessary path needed to locate your favicon.ico image.
Eg: If your folder is structured this way:
/mysite
/includes
favicon.ico
index.php
If you're going to use it in index.php you should include the necessary path needed like this:
<link rel="icon" href="includes/favicon.ico" type="image/x-icon" />
Note: for checking if your like get the path towards your icon image..
you could check your web page source code using ctrl + u. Then click the href path linked if it displays the image it means your path is correct.
You have to put favicon.ico in to root directory of your website such that anyone can access it by yourdomain.com/favicon.ico. yourdomain.com/includes/favicon.ico will not work without a link tag.
If you can't put the favicon on the root folder for your domain then you have to use this code and change the href attribute to match the path to the favicon relative to the root of your site. i.e. /includes/favicon.ico
<link rel="Shortcut Icon" type="image/ico" href="/includes/favicon.ico">
I would recommend converting the file to an actual .ico using http://www.icoconverter.com/ or some equivalent tool.
I asked in another question about how to reference a file in a higher directory, and the answer is:
<?php include('../filethatineed.html');?>
The problem now is that filethatineed.html can't find it's CSS file. If it's in the same directory as my file that includes it, this works fine. But when it and it's reference files are moved to a different directory, those files can't be located anymore. Opening filethatineed.html in a web browser displays it correctly, so the files are in the correct place.
Here's how I reference them currently, as an example:
<link rel="stylesheet" type="text/css" href="header_style.css">
How should I reference them differently to make sure they work when the file is included from another directory?
Reference them by using an absolute or root-relative path.
<link rel="stylesheet" type="text/css" href="header_style.css">
Either (absolute, protocol-less):
<link rel="stylesheet" type="text/css" href="//yourdomain/path/to/css/header_style.css">
or (root-relative):
<link rel="stylesheet" type="text/css" href="/path/to/css/header_style.css">
You will have to set CSS and image paths according to file in which you are using <?php include('../filethatineed.html');?> not to that file that you are including.
OR you can use this
<link rel="stylesheet" type="text/css" href="//example.com/path/to/image/img.jpg" />
You need to give full path of header_style.css
example
<link rel="stylesheet" type="text/css" href="http://foo.com/css/header_style.css">
or whatever your path is.
The client (= the browser) doesn't see nor care whether your HTML comes from an include() or not. All paths will be relative to the directory of the HTML file that the browser is currently pointing to. Hence, any relative paths you use in filethatineed.html will no longer work.
You'd have to use absolute paths as suggested by Alasjo, or change the relative paths.