I added a icon to a site I built but the problem is it doesn't appear on Google Chrome And Safari. And here's what I did:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="shortcut icon" type="icon/icon" href= Jo.ico />
<title>My site</title>
</head>
<body>
</body>
</html>
Well you haven't put speech marks on the href section. And also, you should give your content a more unique identifier, because text and html are keywords, so the browser may, hypothetically, misinterpret them.
Why don't you try this instead:
<link href="Jo.ico" rel="icon" type="image/x-icon">
Your browsers may also be caching the icon. Please make sure your browser cache is properly cleared.
Also, make sure the icon's path is correct ("Jo.ico" assumes the icon is in the same directory as the file containing the above line of HTML).
Method 1
HTML 4.01:
<link rel="icon" type="image/png" href="favicon.png">
XHTM 1.0:
<link rel="icon" type="image/png" href="favicon.png" />
Method 2
<link rel="shortcut icon" href="favicon.ico">
Apple Devices:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Method 3
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Methond 4 (no support at the moment)
HTML 5:
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />
Save your icon to the root folder of your website with the name: favicon.ico
Related
I just started learning HTML, and to practice, I was just messing with Sublime Text to make a test website. I added the code for favicons which I have shown below which worked for Chrome, but not Safari.
<!doctype html>
<html>
<head>
<title>My Website</title>
<link rel="apple-touch-icon" sizes="180x180" href="/Users/umairzubair/Documents/html/image/apple-touch-icon.png">
<link rel="shortcut icon" type="image/png" sizes="32x32" href="/Users/umairzubair/Documents/html/image/favicon-32x32.png">
<link rel="apple-touch-icon" type="image/png" sizes="16x16" href="/Users/umairzubair/Documents/html/image/favicon-16x16.png">
<link rel="manifest" href="/Users/umairzubair/Documents/html/image/site.webmanifest">
<link rel="mask-icon" href="/Users/umairzubair/Documents/html/image/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
Please guide me on what I am doing wrong and how can I correct it. I would really appreciate it.
I guess the issue is with the file path you are using inside href tag.
It should be something like this:
/image/faviconname.png instead of the long one.
Hey guys I need some help on favicons for my site
I am using chrome and am writing the code in HTML and CSS
I am using the below line of code in my head tag
<link rel="icon" type="image/png" href="favicon-16x16.png" />
can I plz get some help on this fast
Have you tried this? Favicon.ico is an icon file that is displayed next to the URL in the browser bar. (See the StackExchange icon next to the URL).
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
or
<link rel="shortcut icon" href="http://example.com/favicon.ico">
Use
<link rel="icon" href="favicon-16x16.png" type="image/png"/>
<link rel="shortcut icon" href="favicon-16x16.png" type="image/png"/>
I opened Chrome's developers tools and it doesn't load my favicon at all when I looked for it at networks tab.
Here is my code:
<DOCTYPE HTML>
<head>
<link rel="icon" href='./img/favicon.ico' type="image/x-icon"/>
<meta charset="utf-8">
<title>Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
Try this one:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Upload your favicon.ico to the root directory of your website and that should work with Chrome. Some browsers disregard the meta tag and just use /favicon.ico
Go figure?.....
Seems there's no issue with your code attributes.This is the standerd form
<link rel="icon" href="imagelocation" type="image/x-icon" sizes="16x16">
Try a Image from internet without downloading and make verify that it's not a issue of Chrome first.Then take a look to your code and location of the image are matching correctly with your location of file you have call your Favicon.
Accroding to your tag your favicon should be in a sub directory called 'img'.This may be a browser cacheing issue also. Try viewing page source (Right Click > View Page Source ) and go to the location of the image and try reload it.
Try adding type type="image/x-icon"
<link rel="icon" href='./favicon.ico' type="image/x-icon"/>
and try move the favicon.ico in an subdir /img
then
<link rel="icon" href='./img/favicon.ico' type="image/x-icon"/>
or with shortcut icon
<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
or save the ico like a png
<link rel="shortcut icon" type="image/png" href="./img/favicon.png" />
I have an spring application and i want to show favicon image.
In my case browser is not making any call favicon image by itself.
I tried
<link rel="shortcut icon" href="<spring:url value="/assests/login/img/favicon.ico"/>"></link>
I also tried setting profile attribute in head
<head profile="http://www.w3.org/2005/10/profile">
in both cases browser is not making any call for favicon
Try this code
<link rel="shortcut icon" href="assests/login/img/favicon.ico" type="image/x-icon">
<link rel="icon" href="assests/login/img/favicon.ico" type="image/x-icon">
What about this :
<link rel="shortcut icon" type="image/png" href="/assests/login/img/favicon.ico" />
or :
<link rel="icon" type="image/png" href="/assests/login/img/favicon.ico" />
How can I display my web site logo on the address bar?
you just need the favicon.ico in your webroot. the browsers will pick it up automatically.
Using the suggested
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
allows to use differently named icons or different icons for certain pages.
You can put these inside <head> tag:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
Make sure that you specify the correct path, usually the root folder.
More Info about Favicons
The feature is called Favicon.
use a fave icon
<head>
<link rel="shortcut icon" href="http://www.your-page-name.com/favicon.ico">
</head>