I am making a simple HTML webpage, I am trying to add an icon in the browser tab, I can get the icon to appear if I use a picture from online. However when I try to use a local file the icon is not visible. Here is what I used to try and embed the icon
<link rel="icon" href="/icon.ico">
Any help is appreciated, thanks
Your code works in recent Firefox.
Maybe the problem is that leading slash in the path makes browser search it in server root directory?
<link rel="icon" type="image/vnd.microsoft.icon" href="icon.ico" />
Related
Unsolved
I want the proper png to show up in the browser tab while still maintain the app I use to connect my website with uses the gif favicon
So I'm using metamask as an extension and it automatically looks for the first favicon so thus my first favicon is a gif for an animation. But while firefox automatically uses the png version of my favicon, how do I get a browser like Chrome to use the png version as well in the browser tab menu?
So the HTML goes like this...
<link rel="icon" href="%PUBLIC_URL%/animation.gif" type="image/gif" >
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon144.png" />
The first is the gif which I need to be first due to metamask and the second is the png version which chrome skips over.
I am currently using Chrome version 79.0.3945.117. Using this code in HTML, it correctly displays the PNG icon.
Code:
<link rel="icon" href="animation.gif" type="image/gif" >
<link rel="shortcut icon" href="favicon.png">
There doesn't seem to be any problems or interferences with my case.
For debugging, I recommend that you check for any 404 errors finding the image, or in other words, the wrong href route. Also, try clearing the cache of your browser and reload.
Glad to answer.
This is the code I tried using
<link rel="icon" type="image" href="vt.png">
but unfortunately it didn't work.
The requirements link has been helpful this is the new code
<link rel="icon" type="image/ico" href="img/vt.png">
now the title icon is displaying
I suspect the issue is that it should be .png not .pg
If you want to support multiple devices and browsers check out :
https://realfavicongenerator.net/
It will tell you the html to use and generate all the files required from an uploaded image.
When trying to set a favicon to your page you have to note the following: requirements
My website favicon shows up in Chrome and Edge with a red line. This happens on Firefox and Safari on the Mac as well.
As far as I know, the only code I need to set the favicon is the following:
<link rel="shortcut icon" href="/static/sitefavicon.ico" type="image/x-icon">
<link rel="icon" href="/static/sitefavicon.ico" type="image/x-icon">
This is present in the HTML and the links work when I inspect the page, but the favicon shows up as a red line as in the above screenshot.
I have tried using direct links (i.e., with https:// instead of relative links like those above) with no effect. I have also tried clearing my caches and using a different machine and this too seems to have no effect. If it matters, the website is powered by Django and hosted on AWS.
Re-encoding the image as png and changing type to image/png fixed the issue.
Try removing that leading slash:
href="static/sitefavicon.ico"
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.
Update
I have just tried "Pinning" my site to the Taskbar again (after removing it) but when I clicked and held down the mouse button on the 16x16px icon inside the address bar (see pic below), you can see my favicon being dragged around with the mouse - so internet explorer has found and got the icon - it's just not displaying it in all the right places! Also updated code below:
As the title suggests, I can't get my favicon to display; in any version of any browser. There is 1 exception, though - which isn't good enough:
IE 9 and IE 10 -
As you can probably see in the screenshot above, the only time I get to see my favicon is after I've added it to my Favorites folder and opened the Favorites Bar. The favicon does not display in the Tab (next to the page title), it does not display in the Taskbar area, and it does not display up the top-left of the browser window if I have "Pinned" my site to the Taskbar.
In every other browser, it simply does not display at all.
I have tried every possible "solution" that I could find online.
Here's the code I have:
<link rel="icon" type="image/x-icon" href="http://www.mysite.com/favicon.ico"><!-- Major Browsers -->
<!--[if IE]><link rel="shortcut icon" href="http://www.mysite.com/favicon.ico"/><![endif]--><!-- Internet Explorer-->
I have also tried all common sizes for the favicon; 16x16, 32x32, 64x64, 128x128 and 256x256 - and I've even tried saving all sizes within the same *.ico file.
I have tried deleting the cache file for *.ico files.
Nothing has worked. The exact same code has previously worked on other sites that I've made. I don't get it. What gives?
I've edited this answer, leaving only solution to problem presented in question.
Use: <link rel="shortcut icon" href="{ICONURL}"/>
Instead of: <link rel="icon" href="{ICONURL}"/>
I had the same problem with my site just now. Drove myself crazy trying to get an favicon.ico file to work. What finally got it working correctly for me in IE 11 (on Windows 7), was to dump the favicon.ico file completely and go with a PNG instead:
<link rel="shortcut icon" href="/favicon-32x32.png" type="image/png"/>
I used a PNG file with a transparency layer. Once I did this and uploaded my page, IE began displaying the icon correctly in the Tabs (and the shortcuts/bookmarks) on the very next page refresh. I double checked and it looks like Chrome and Firefox are cool with this as well.
I use
<link rel="icon"
type="image/ico"
href="Link Goes Here">
If putting the favicon in a folder:
<link rel="icon"
type="image/ico"
herf="Folder/Subfolder"
Make sure the code is in the head tag.
Make sure the image is in the .ico format; It won't work otherwise.