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">
Related
I can change my favIcon and use newIcon's by implementing snippet below succesfully. But I can only see one favIcon(skullIcon). I am not able to see other favIcons. I tried nearly 20 of them and only I can see them 1 of them. Do you think I have to modify my snippet to see all of them or I have to find a suitable favIcon in order to see it properly ? If yes, what I have to do to convert my icon to proper favIcon ?
Regards
Alper
<head>
<link id="favicon" rel="shortcut icon" type="image/png" href="favIcon/test5.png" />
</head>
In above example you are using png image file. however the favicon expects an icon image with .ico extension. Use below URL to convert your png image to icon.
http://www.xiconeditor.com
And try this : <link rel="icon" type="image/x-icon" href="favicon.ico">
This works for me.
I try to add favicon to my site.
I am upload the favicon to directory index and I add this line to my header site:
<link rel="icon" href="http://example.com/favicon.ico">
Maybe its chache?
help me please :)
edit:
I am dont see request to favicon :O
http://i.stack.imgur.com/1DET3.png
Any-asnwer not working..
Maybe I need clear chache?
EDIT: THIS IS WORKING NOW, THANKS FOR ALL!
Try this,
<link rel="shortcut icon" href="http://example.com/favicon.ico" />
Try this code
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
Put your favicon icon on root directory.
Also ensure that the favicon icon exists at the url("http://example.com/favicon.ico")
Your favicon may be the wrong bit depth and/or size. Save your favicon as an 8bit (jpg is 8-bit, but png is better and you can save for web as 8-bit, it doesn't need to be .ico) image and make sure to clear your cache. On upload, it should show in all browsers. Save it as ideally 16x16 pixels
Do you see your favicon when opening http://example.com/favicon.ico ?
If you do, try to reload the page http://example.com/ with CTRL + R
Try this Sure it will work
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://eg.com/favicon.png"/>
There is another way you can do this
FoYou need to upload the favicon file “favicon.ico” to the server. To do so, point your browser address bar to your FTP server. Your URL might look similar to this:
“ftp: //username # websitedesign.com”
When you press enter, the browser will prompt you seeking an username and password. Once you get access to the root folder, upload your favicon file into it.
Now, you need to edit the HTML page of your website to help browsers fetch your favicon image while displaying your web page.
To do this, keep your FTP window open and download the “index.html” or “header.php” file from server and follow the steps below according to the file you get:
Now, insert the code below in the HEAD area of the “index.html” file, and change “yourwebsite.com” for your own website address.
I put the favicon in the html like this:
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
...but when visited with Google Chrome it shows the logo of Google Drive instead of my favicon.
This doesn't happen on Firefox, only on Chrome. So is there any way how to force MY favicon to show on google drive hosted webpages? thank you!
Adding a querystring to my filename worked for me:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?v=2" />
See: "How do I force a favicon refresh"
From the Google Drive Product Forums:
<link rel="shortcut icon" href="favicon.ico" type="x-icon">
<link rel="icon" href="favicon.ico" type="x-icon">
https://productforums.google.com/forum/#!msg/drive/03pmip5YJiY/WVTn_2qGm4cJ
I'm using a Styleshout template and hosting it on Google Drive. The code they have in the header of the index.html file is:
<link rel="shortcut icon" href="favicon.png" >
And whatever I put as "favicon.png" in the root directory of the site shows up as the favicon.
I added this code to the header of a different site that was displaying the Google Drive icon and it started displaying whatever I put as "favicon.png" instead.
They are using a .png file instead of an .ico file, but it works. Furthermore, you can use other sizes of .png files, rather than just 16x16.
You have to construct your url with the folder id that contains your index.html (and js, favicon, css) instead of the file id of the index.html (I suppose that this is what you are doing because i had the same problem).
No use this id:
Use this instead:
Where "casacas" is the folder where you put the index.html file and the favicon.ico (plus js, css, images) and configured with public access.
Then, in your html simple use:
<link rel="icon" href="favicon.ico">
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" />
The image next to the page title in the browser tab - how can you link an image here?
That image is called 'favicon' and it's a small square shaped .ico file, which is the standard file type for favicons. You could use .png or .gif too, but you should follow the standard for better compatibility.
To set one for your website you should:
Make a square image of your logo (preferably 32x32 or 16x16 pixels, as far as I know there's no max size*), and transform it into an .ico file. You can do this on Gimp, Photoshop (with help of a plugin) or a website like Favicon.cc or RealFaviconGenerator.
Then, you have two ways of setting it up:
A) Placing it on the root folder/directory of your website (next to index.html)
with the name favicon.ico.
or
B) Link to it between the <head></head> tags of every .html file on your site, like this:
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
If you want to see the favicon from any website, just write www.url.com/favicon.ico and you'll (probably) see it. Stackoverflow's favicon is 16x16 pixels and Wikipedia is 32x32.
*: There's even a browser problem with no filesize limit. You could easily crash a browser with an exceedingly large favicon, more info here
It is called 'favicon' and you need to add below code to the header section of your website.
Simply add this to the <head> section.
<link rel="icon" href="/your_path_to_image/favicon.jpg">
This is the favicon and is explained in the link.
e.g. from W3C
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
Plus, of course the image file in the appropriate place.
Add a icon file named "favicon.ico" to the root of your website.
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">
or you can use this one
<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
ADD THIS
**<HEAD>**
< link rel="icon" href="directory/image.png">
Then run and enjoy it