I'm creating an HTML web page.
I'm nowhere near finish and therefore should not focus too much on the following matter at the moment.
But I'm confused about why my code for the Shortcut icon is not working.
I'm testing everything by placing all files in the same folder (offline, no servers or anything similar)
The code is
<link rel="SHORTCUT ICON" type="image/x-icon" href="favicon.ico">
I tried with different ico files and it will only work with an ico uploaded to a website.
For example the following code will work.
<link rel="SHORTCUT ICON" type="image/x-icon" href="\WEBSITEFOLDER\favicon.ico">
Try:
<link rel="SHORTCUT ICON" type="image/x-icon" href="~/favicon.ico">
or:
<link rel="Shortcut Icon" type="image/ico" href="favicon.ico">
I ran into this similar problem, and it turned out that the size of the actual file was what caused the issue. According to sources it has to be either 16x16 or 32x32. I would use an icon generator like: x-iconeditor.com.
If you want a favicon on local file, you will have to use Data URI
See this answer : local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
set favicon icon size 16x16 it will work in chrome...
I HAD the same problem. The site I "borrowed" from used a folder called "icons" for the location of the .ico file so I followed that exactly. The service my girlfriend used was Web.com. For whatever reason with Web.com if a shortcut icon in located anywhere other than the root directory, it will not show up in Internet Explorer. I simply moved the favicon file into the same place index.html was and changed that one line of code in the index to reflect that.
Solved (in my case anyway)! Good luck!
<link rel="icon" href="relative_PATH/favicon.ico">
Try to put the all relative path to the icons file
It doesn't work, absolutely because the link target is not correct.
If you put the icon in the same folder of your web page, then correct the link to the following:
<link rel="SHORTCUT ICON" type="image/x-icon" href="./favicon.ico">
which means favicon.ico is in the current folder.
However you can use the debugger i.e. chrome debugger and navigate to
the source code of your web page, i.e. right click on the link of your icon ->
open in new tab, and see how it works
Try to add the absolute route for the image icon and Use 48x48 px image size.
That worked for me
<link rel="shortcut icon" type="image/png" href="http://yoursite.com/Content/Images/favicon.png" />
Related
I tried to implement a favicon to my website but it is not working properly.
I think the problem is that in my code, I am using in the twice, one for the href=style and one for the favicon but I don't know how to fix it.
this is my code at the moment:
<head>
<title>title</title>
<link href="faviconfinal.jpg" rel="icon">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
For the link type="shortcut icon" I recommend you have a png file. What I normally do for link shortcut icons is that I prepare a 256x256 or 512x512 transparent png icon and just save it in a location like images/icon.png.
You should verify if the file is correctly located in your page. The easiest way to do this is opening your browser's console and looking for 404 errors. The easiest way to see it's working is the browser's tab showing your icon.
Besides that, what you must have is a favicon.ico file at your root folder (where your index file is located). The icon has to be a .ico file. For Windows you can use IcoFX. For mixed use or Mac focused you could use either IconWorkshop or IconFactory.
You don't need to specify the favicon.ico icon, it's the default icon. You can check more on this here
Change the suffix of the .jpg file to .ico, rename it to favicon.ico and link to it as follows:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
How to set rel="shortcut icon" on image page ?
When i access EG: example.com/food.png
I want to display rel="shortcut icon" on image page, how can i do that ?
In other php page i write <link rel="shortcut icon" href="food.png"> in <head> tag
But in image page EG: example.com/food.png how to add rel="shortcut icon" ?
you can test on this link http://ir.ebaystatic.com/pictures/aw/homepage/eBayTodayCoverPhotos/UK/Sale_27062014_2.jpg you will see favicon of ebay , how can i do that ?
All that you need to do is place image file favicon.ico in your main site directory eg public_html/favicon.ico place that way file with name and extension favicon.ico size 16x16 it will be shown in every pages of your site including in image preview also Here is example http://srpskalegija.bplaced.net/forumhtml/images/logo.gif
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png">
This is achievable, just insert put the PNG image in your root directory the, linking absolutely will help. Put the above link tag in your head.
I guess the PNG image would work fine, but if it doesn't just convert your image to ico format and replace the type with ico. I suggest just converting it in .ico format as it has more support.Check this wiki link Favicon Browser Implementation and Support
I've seen that some browsers do take time to display the favicon if you've changed it or added a new one, anyways it'll work fine. After you've done that, when you open any image suppose at this URL
example.com/img/one.png it'll show the favicon on the tab, that's what you want right? :D
Here is a solution.
<link rel="icon" href="address" sizes="32x32">
<link rel="icon" href="address" sizes="192x192">
<link rel="apple-touch-icon-precomposed" href="address">
<meta name="msapplication-TileImage" content="address">
My favicon isn't working properly. It is located in the root of my project. Do I need the absolute path to my icon?
e.g.: "C:/Users/Damian/www/favicon.ico" Or should I type instead:
<LINK REL="SHORTCUT ICON" HREF="favicon.ico" >
Is that enough? I have cleared my browser's cookies.
If your favicon is in the same directory as the page:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Otherwise use this
<link rel="icon" href="your_url/favicon.ico" type="image/x-icon" />
Relative paths are fine, as long as the path is relative to the document you are serving.
Have a look at the below link- it may help.
http://www.w3.org/2005/10/howto-favicon
What browser are you using? Keep in mind that it is up to the browser to display the icon, and different browsers may have different ways of how the expect the icon to be shown in the HTML. If you are sure your HTML is correct, it may pay to try a different browser.
The favicon needs only the relative path. It is working fine, but it is a matter of browser's cache. Try to clear your history and cache then try again. Or if you use localhost to access your website, try to use 127.0.0.1
M designing a website using DW. I wanted to add a favicon to my website so when I did and view the website, it dsn't show up the icon. I used a 16 x 16 png as the image and the coding is given below. what might I have done wrong. please help me!
thank you.
<link rel="icon" type="image/png" href="favicon.png">
Internet Explorer does not support a PNG favicon.
What you should do, is setup your <link tag like so:
<link rel="shortcut icon" type="image/png" href="favicon.png" />
For IE, and legacy browsers, also keep a less-pretty (by the fact it's an ICO, not intentionally!) version of your icon in .ico format in the root of your site named favicon.ico. You can use http://icoconverter.com/ to convert your PNG to an ICO. Don't just rename favicon.png to favicon.ico and expect it to work.
wrong file extension.. it's supposed to be .ico instead of .png
go here for all the info:
http://tools.dynamicdrive.com/favicon/
EDIT:
Try going on the link and converting your favicon to ico
then add this <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> to your main page.
make sure the favicon exists in that directory.
I have copied my favicon.ico file to my Apache document root. I had to add an Apache Rewrite exception for it and now it is accessible from www.example.com/favicon.ico. But when I hit my main URL it does not show up.
I thought all you had to do was copy the file with the correct permissions into the doc root? Do I need to make php changes? Thanks!
Try throwing this tag in the head of your document:
<link href="/favicon.ico" type="image/x-icon" rel="icon" />
IE and Firefox can behave differently (not sure which one you are using). Try to add the page as a bookmark, then click the bookmark (to load the page). After you do that exit your browser and see if the if shows up then.
If that does not work try to clear your browser cache and repeat the above steps that should fix it. I have seen your problem before!
the favicon.ico reference must be an absolute URL, not relative.
Using this:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
My status was
favicon.ico () shows up in:
IE 9.0.8
Safari 5.1.7
Fails in:
FF 28.0
Google Chrome 34.0
changing to absolute values
<link rel="icon" href="http://127.0.0.1/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://127.0.0.1/favicon.ico" type="image/x-icon">
causes all browsers to locate and display the favicon.ico
Could it be that you uploaded the favicon after your browser has remembered that your domain doesn't have one and therefore doesn't issue a new request?
favicon icon behaves differently for different browswrs & sometimes if it works in FF & does not work in IE.
Try after Clearing the cache of the browser and standard code for favicon ico is,
Just put below tag in your index file OR whichever common file for your project.
<link rel="FaviconIcon" href="favicon.ico" type="image/x-icon">
Although new browsers support GIF and PNG images , but , I would suggest always saving the image as favicon.ico.
Try placing the ico file in an images folder in your root. That's where many browsers look for favicon. And that's something to keep in mind. Favicon is a very loose standard, if you can even call it that, which is supported by browsers, not by the server. The browsers themselves actually fetch favicons in separate calls to display on their favorites bars, or tabs... The favicon file just has to be placed somewhere that the browsers can find it.
Some browsers will pick up the icon if its in the root directory without adding anything to the page, however IE and FF don't. Add this code to the head section of your page
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
It seems like in Chrome that you cannot use a link (ex. https://) rather must you have the favicon.ico in the same folder as the index.html. For any other file, it seems to work with a link.