I am Trying to add a favicon into my website. I created the icon on https://www.favicon-generator.org/ and pasted in the given code. I'm sure the file directory is right as I've checked multiple times. Could someone help me out, what styling to I need to add or remove or am I missing something?
<DOCTYPE html>
<html lang="en">
<title>Drafted</title>
<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="bg">
<video id="video-bg" preload="auto" autoplay="true" loop="loop">
<source src="video.mp4" type="video/mp4">
Video Not Supported :(
</video>
</div>
<div class="form">
<a href="#" target="_blank">
SUBMIT A BACKGROUND VIDEO!
</a>
</div>
<div class="text">
<a href="#" target="_blank">
drafted
</a>
</div>
<div class="steam">
<a href="#" target="_blank">
STEAM
</a>
</div>
<div class="esea">
<a href="#" target="_blank">
ESEA
</a>
</div>
<div class="twitter">
<a href="#" target="_blank">
TWITTER
</a>
</div>
</body>
</html>
Favicons have a tendency to cache super-aggressively.
Your code doesn't appear to be off, but I would suggest the following troubleshooting steps:
Try accessing the same page in a different browser. Make sure that going to /favicon.ico directly in the browser actually works, and gives you the icon you expect.
Load the page in a different browser (or a different computer) - one that has preferably never seen this page before.
I'm not sure it's related to this, but there a couple of issues with other parts of the code that could possibly be causing this side-effect;
You've missed a ! in your doctype - it should be <!DOCTYPE html>
Your title should be inside your head section.
I suggest also running your html through a linter, as badly formed html can have really strange side effects sometimes.
Your favicon is referenced correctly in your HTML, and should display. As such, there are only a few possible causes of your problem. Check whether you can navigate to www.yourwebsite.com/favicon.ico manually.
If so, there's a caching issue:
Try clearing your HTML cache. This can be done by pressing CTRL + F5.
Try clearing your CSS cache. This can be done by holding SHIFT while clicking on the refresh icon of your browser.
Try a hard refresh. This is done by holding CTRL and SHIFT and then pressing R.
If not, the problem is that the file isn't found:
You may not have got your favicon stored at the root of your project. Ensure that the file is actually at root level.
You may not have uploaded your favicon to the server. Check whether the file exists on the server itself.
If the file exists on the server, ensure that it is a valid .ico image.
You also have invalid markup, which may be the cause of your issue:
Your <DOCTYPE> tag needs an exclamation mark before html.
Your <title> tag should be inside <head>.
I would recommend running your HTML through a markup validation service, such as The W3C Markup Validation Service, to ensure that you have valid HTML.
Confirming all of that and fixing up those two errors should almost certainly fix your favicon not coming through.
Hope this helps!
Related
I am making a new web page, and has been a while since I written any code. my issue is that I am trying to use a picture as part of the page and have also as my email link. can someone please check my code and tell me what I am doing wrong, the picture works but it doesnt do anything when I load the site to my host. the back ground picture works fine but the slot is the one I am having issues with here is what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="flavicon icon" href="http://carymcclure.com/favicon.ico" />
<style>
body {
background-image: url(../img/background.gif);
background-repeat: no-repeat;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Cary McClures' Portfolio</title>
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body background="../img/background.gif" class="embed-responsive">
<a href: mailto:chef#carymcclure.com>
<img style="float:right; margin-right:150px; margin-top:350px"
<img src="../img/slot.gif" width="216" height="89" alt="email"/></a>
</body>
</html>
also having issue with my code for the flavicon - doesnt load..
any help would be greatly appreciated.
You have a typo in your anchor tag:
<a href: mailto:chef#carymcclure.com>
<img style="float:right; margin-right:150px; margin-top:350px"
<img src="../img/slot.gif" width="216" height="89" alt="email"/></a>
That href is not valid. href is an attribute, so the syntax is
content here
MDN reference
You also have two image tags, with the first one being incomplete. Not sure what you're trying to do there.
For your code, that means something like this should work (slightly formatted, so that you can see the changes a bit better):
<a href="mailto:chef#carymcclure.com">
<img
style="float:right; margin-right:150px; margin-top:350px"
src="../img/slot.gif"
width="216"
height="89"
alt="email" />
</a>
I eliminated one image tag, assuming that there was only supposed to be one image with a picture of your email address (not a great idea, and I'm not sure why you're doing that, but that's a long discussion that belongs somewhere else).
You might have issues with the image itself rendering; that local path has to resolve relative to where the email message is stored once retrieved. You probably need to make that an absolute link to where it resides on your server, or read up on embedding images in your message (for example) and adjust the path accordingly.
In fact, you have 2 typos issues in your code.
Missing = sign in href attribute of the tag.
First <img> tag has no ending tag.
Please check the correction below.
<body background="../img/background.gif" class="embed-responsive">
<a href="mailto:chef#carymcclure.com">
<img style="float:right; margin-right:150px; margin-top:350px"/>
<img src="../img/slot.gif" width="216" height="89" alt="email"/>
</a>
</body>
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
I have a private (not public) website. In this website I want to use Lightbox2 (image gallery), but when I run lightbox2, the links of my home page and my background picture don't work.
There is a style.css in my template, and there is also one in lightbox2. I think this is the problem, but I'm not sure. Can anyone help me please?
Simply load in your own stylesheet and the one lightbox uses in the header
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/my_style.css">
At the end of the page you must also load in the javascript that comes with lightbox:
<script src="js/lightbox-plus-jquery.js"></script>
Don't forget to set the right attribute for all your pictures:
<a href="./pic.jpeg" data-lightbox="lightbox">
<img src="./pic.jpeg" style="width:100%">
</a>
I'm about ready to rip my hair out trying to make respond.js work.
We use it on all of our mobile sites, and usually there are no issues at all, but I've recently needed to make it possible to get mobile compatability going on one of our very, very old systems.
I've tried everything I could - I've stripped out all of the extra code from the page, tried an alternative to respond, tried putting the script inline, I've even made a localhost copy. I know it's going to be something stupid but I just can't see it right now.
The entire code, after stripping it all back, is included below - works fine in Chrome, as always. I know respond.js isn't even being applied, because if I put the mobile styles in a media query they don't load either.
I've tried all this on the server too, to make sure it's not a local issue.
Can someone point out the silly mistake please!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" id="property-results">
<head>
<title>Search Results</title>
<link href="http://www.skitts.net/css/results.css" rel="stylesheet" type="text/css" />
<script src="http://searchtest.issl.co.uk/js/respond.js"></script>
</head>
<body>
<div class="property clearing">
<div class="property-info">
<span class="address">CROWN STREET, WOLVERHAMPTON.</span>
<span class="price">
<span class="pre-price"></span>
<span class="price-amount">£10,500 Annually</span>
<span class="post-price"></span>
</span>
</div>
<a href="detailsLite.aspx?chainid=2047&propertyid=467168443" class="image" target="_blank" >
<img src="http://img.issl.co.uk/2047/008/thumbs/GRB-11MH0ZQA_3559464935.jpg" alt="Address" />
<div class="status let">Let</div>
</a>
<p class="description">SEPARATE STORAGE YARD To the north of the units is an adjacent fully enclosed storage yard with separate vehicular access extending to some 1,961 sq.yds. (0.4 a...</p>
<ul>
<li>0 Bed</li>
<li>0 Bath</li>
<li>0 Reception</li>
</ul>
View full details and photography
<div class="ref-more">
<span class="ref">REF: GRB-11MH0ZQA</span>
See more
</div>
</div>
</body>
</html>
Told you it would be something stupid. For obvious reasons, respond.js can't do anything with a stylesheet on another domain.
D'oh.
Here's the compiled fiddle for your project.
It works on every browser for me"
Fiddle
Have you tried adding a meta viewport to your head tag?
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
I recently migrated my website from xhtml transitional to html5. Specifically so that I could make use of valid block level anchor tags. <a><div /></a>.
When running validation I encountered the following error:
Bad value publisher for attribute rel on element link: Keyword
publisher is not registered.
But according to this page, that is exactly what I am supposed to do.
https://developers.google.com/+/plugins/badge/#connect
My code:
<link href="https://plus.google.com/xxxxxxxxxxxxxxxx" rel="publisher" />
<a href="https://plus.google.com/xxxxxxxxxxxxxxx?prsrc=3" style="text-decoration:none;">
<img src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt="" style="border:0;width:16px;height:16px;"/>
</a>
I can't figure out how to implement this in an html5 compliant way. Can anyone help?
1st) Within <head>:
<!DOCTYPE html>
<head>
<!--head code-->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
2nd) Anywhere within <body>:
<body>
<!--body code-->
<div class="g-plusone" data-size="small" data-annotation="none" data-href="https://plus.google.com/u/1/+StackExchange/"></div>
</body>
This code is valid AND "FRIEND'S" with http://validator.w3.org/
You can change https://plus.google.com/u/1/+StackExchange/ for any google+ url you desire (https://plus.google.com/xxxxxxxxxxxxxxxx/)
Documentation
Google sends help: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2539557&topic=2371375&ctx=topic.
You need to add ?rel=author to your <a>s href value and delete that non-conformant <link> tag:
<a href="https://plus.google.com/12345?rel=author">
<img src="https://ssl.gstatic.com/images/icons/gplus-16.png"/>
</a>
Well, you must add two links inside head tag and body tag as follows:
<head>
<link href='https://plus.google.com/xxxxxxxxxxxxxxxxx' itemprop='publisher'/>
</head>
After that, use the the google+ format in the body. It should be below body tag:
<body>
<a href="https://plus.google.com/xxxxxxxxxxxxxxxxx" rel="publisher" />
.....
.....
.....
</body>
here's the screenshot.
Oops! sorry, I need 10 reputation to load Image in this page ... LOL
From the two formats, we will be validated by Structured Data of Google Webmaster and validator.w3.org.
As you know that in microdata schema uses publisher as one of the itemprop, therefore, in body tag or in html tag should be like this:
<body itemscope="" itemtype="http://schema.org/Blog">
*) that's it when your site type is a BLOG.
(Love this forum) tina-andrew-blog
NB: I found this: https://productforums.google.com/d/msg/webmasters/lciIK8HdJXE/kcv8EipRzzcJ
But, I do with the code above, It works well :(