I've got <link rel="icon" type="image/png" href="myimage.png" />, why doesn't it work? It gives me the blank/new document icon in the favicon.
Does it have to be an icon.
Does it have to be from a URL?
It worked previously but it's stopped now, I might have changed something, but I don't think so, I didn't update anything, add any gadgets or anything, it just stopped working.
I have tried a few things such as using URL or an .ico instead of PNG, and I've looked online too, but I can't figure it out. It could be because I'm hosting the site file in a google drive sync but I doubt it somehow.
Thanks. In case anybody needed it, I've got the code on paste bin: http://pastebin.com/Wzc9zLea << HTML and CSS
You need to meet the specifications => PNG/GIF/ICO, 8- or 24-bit colors, and size 16x16 or 32x32, which your image doesn't meet at all. By the way, why do you wrap your code with <a> tags?
P.S. - You might want to remove 'shortcut.'
To answer your questions, whether it has to be an icon–I think you mean whether it has to be a .ico or a .png file, and that depends on the browser. As a general rule, most of the time it can be a png, no problem. For much more detail, check out this SO answer.
As for whether it has to be "from a URL", that's tough to give a yes/no answer to because it's a bad question. If you mean, does it have to be from an external URL accessed via the HTTP protocol, then no, it doesn't. It can be a file path and that works just fine. Anything that requires a URL will generally take a file path no problem.
Side notes:
As I mentioned in my comment, there's no need to wrap your code in <a> tags, and it may be screwing with your code.
Some people are saying you don't have a closing <head> tag, but I see it just fine, so not sure what that's all about.
Your favicon should be saved as a .ico filetype. Place the NAME.ico in the root of wherever your website is. You can go to this site http://www.favicon.cc/ and have your .png made into a favicon. Then just put it into the root and you're set.
It varies depending on the browser and these days the device (tablet, smartphone, etc). But at a minimum, your favicon link should be constructed as follows:
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
Currently, your file reference is relative to URI, meaning that if you have pages deeper than one level below your document root, your code is going to break. To illustrate, here's an example:
If you visit http://example.com, the browser will look for your favicon file at http://example.com/myicon.png.
If you visit http://example.com/mycategory/myarticle.html, the browser will look for your favicon file at http://example.com/mycategory/myicon.png, which won't be found.
See the problem? So either use an absolute path to your favicon file:
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
or make the path relative to your document root:
<link rel="icon"
type="image/png"
href="/myicon.png">
Looking at the HTML you posted, another obvious problem that stands out is poorly structured (invalid) HTML. Remove the first four lines in your HTML document:
1. HTML
2. <a>
3. <!DOCTYPE html>
4.
The first line is just text and will confuse browsers trying to determine the document type of the page being loaded. The second line is a valid HTML element but it needs to exist within parent
<html>
<body>
...
</body>
</html>
elements. The third line isn't a valid declaration and looks like a stab in the dark, and the fourth is a blank line. If you don't actually know what HTML standard you're coding to, it's probably best to simply omit the DOCTYPE declaration and simply let the browser guess the standard to use because this WILL affect how your HTML is interpreted (and rendered). I don't know if it's universally true, but I think most browsers will fall back to the loosest HTML standard in the absence of a defined DOCTYPE.
One final thought. If you're new to HTML and/or don't have any sort of formal education/training, take some time to go through online tutorials. http://www.w3schools.com is a basic resource that can help you better understand the language.
Related
Something is wrong. When I open my site using localhost then everything is fine. What can be wrong here?
And when I click assets/css/style.css I got error like this:
When ew check Network tab, and click on style.css sotmething weird happens because html file is previewed:
As myself and Quentin mentioned in the comments, it is generally good practice (and the intended effect for most situations) to use /assets/path/to/resource instead of the relative path assets/path/to/resource.
Unless it is intended to leave out that slash (which it isn't in your case, as you said in the comments), you'll need to prefix all the asset links with slashes.
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/scregal.css">
etc.
There is only one possible causes of the problem I know although your question is not so clear.
1.》 Make sure the assets folder is in the same location as your html file.
》Prefix all your href link with a dot. Check the image to see
I faced a problem like this when I wanted to push one of my electron apps to production mode. The dot makes it easy for the packager to load the whole folder.
How can I do that? Because I don't really know the word but I hope somebody knows this.
If you guys don't understand this then there is a link.
https://media1.tenor.com/images/0f097ed319d498c2bda3d87ba4f6ff10/tenor.gif?itemid=12846096
It's a gif but they set it into a cool style and I don't know how to set it like that.
The page most likely isn't actually a gif image, it could be some file structure like
> tenor.gif
>> index.html
where tenor.gif is actually a folder, with index.html inside it. Per W3C standard, folders automatically open up index.html if there is one directly inside it.
You could put whatever html code you want in index.html and styling.
You can check the contrast of the styles in the CSS documentation, they usually add you to the styles and filters, so they are fully configurable
I have created a very small personal website with three different pages and one CSS file. I know to embed a CSS file into an html page is the following:
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
but form some reason the CSS file only work in one page. Any advice please
Did you checked your folders structure? You may have other html file in different folders.
I suggest to use an absolute path for your stylesheet. something like:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css"/>
first / in href parameter is what I mean.
Edit: You may use a windows machine and upload your files into a Linux machine. Windows do not care about lowercase or uppercase, but it is important on Linux. rename all your filenames to lowercase every where and use it exactly the same in your code (check your link tags again). this may fix your problem
Sharing the link of the site would be helpful. Make sure that the line of CSS aboves goes on each page. For example, if you have 3 pages with 3 different files: index.htm, bio.htm and contact.htm (I'm having to guess since I have not gotten this info from you). Then make sure the link to the CSS above appears on each of those pages.
This question already has answers here:
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
(56 answers)
Closed 9 years ago.
I stumbled upon the following snippet in a source code of a web site.
<link href="#" id="colour-scheme" rel="stylesheet">
What does this do?
Without a base element, it does not do anything, except consume the browser’s resources a little. By URL specifications, # as a URL is a reference to the start of the document at the current base URL. Since the tag would have to be in an HTML document, it would fail (either because the document is served with an HTML media type or after the browser has in vain tried to parse HTML with a CSS parser).
If you use a base tag that sets the base URL to one that refers to a CSS document, it would technically work, e.g.
<!doctype html>
<title>Demo</title>
<base href="http://www.cs.tut.fi/~jkorpela/basic.css">
<link href="#" id="colour-scheme" rel="stylesheet">
<h1>Hello world</h1>
This would be rather abnormal, really, and it would effectively prevent you from using relative URLs otherwise in the document. So this is just a theoretical possibility, rather than what’s really going on.
Probably href="#" is just a placeholder here, to be overwritten by JavaScript code, or something. It’s bad coding style for several reasons. It would be better to omit the href attribute (even though this is technically invalid in HTML5) and have one inserted dynamically.
This does actually absolutely nothing except staying on the same page.
This comes from the Anchors that allow to jump on a part of a page (More specifically, on an id).
This is usually written to say that some link should be introduced here, because of its no-effectness. When you're coding a website, it's often useful to show links, even if the page the link refers to isn't yet existing. This is very often meant to be a temporary solution.
As specified in Ryan's and Tom's answers, it could also be to be used to load dynamically the CSS files.
Using a # in a link tag is commonly used to allow you to use javascript with later on if the URL is unknown or doesn't need to be set by default.
Example:
HTML
<link href="#" id="colour-scheme" rel="stylesheet">
JS
document.getElementById("colour-scheme").href="red.css";
This allows you to set the URL of the stylesheet in JS rather than statically set the location.
Probably some stylesheet that is to be loaded later on.
href = uri
This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute.
Using a hash (#) as the reference is often done by developers yet to include the actual reference when it's not known, however if this is on a live website it may be that JavaScript is being used to load a stylesheet based on the users colour-scheme choice. Before they've made that choice no colour scheme is required so no reference is given, hence the #.
Generally we use to call our css file for example below. Suppose I have a html file and I want to call my external css file, at that time I need to use . For more information please check this link http://www.w3schools.com/tags/att_link_href.asp
My Guess, as per the html link tags its mainly used to link the external files like
href="theme.css"
Since you are using href="#" it would not do anything / serve any purpose.
<link href="#" id="colour-scheme" rel="stylesheet">
href : This is to specify the location of the CSS file you want to import in your web page
when using href="#" it won't import any CSS file.
The default favicon.ico that gets included in a WebMatrix product is added in _SiteLayout.cshtml like so:
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
That icon does not fit my app, so I converted a jpg I created at http://www.coolutils.com/Online/Image-Converter/.
I renamed favicon.ico to YourMotherWearsCombatBoots.ico and renamed the image I had
converted to favicon.ico (after adding it to my project).
I thought that my new .ico file would get used in the browser's tab for the page/site. But, alas, no! The old .ico file is making like the Raven of Poe's poem - it simply will nevermore go away. What's up with that?
UPDATE
Note: If trying this out using firefox or IE as the browser doesn't work (currently testing with Chrome), I am going to bountify this question for 50 points ASAP. If I get an answer prior to that, I will award the bounty post-answer.
Clear the cache :)
As long as the path to the file (including the filename) is correct, and it is a .ico file, it should render.
That having been said, try not using ~ maybe, since it is only an html tag and it uses / to find the root of the site.
I've done this many many times, and never had any issue with any ico in any browser.
Honestly the cache is the only thing I can think of.
----------------------------------UPDATE----------------------------------
I'm expanding my answer to show an example. This is a scenario I have just recently set up and it worked perfect first time (as it does for me every time).
The HTML:
<link href="/Images/Site_Icon/Scribe.ico" rel="shortcut icon" type="image/x-icon" />
The Directory Structure:
The Result:
Since I've been using icons for my sites, I have not noticed that there need be anything else. As far as I know this is all that should be involved with getting this to work as expected.
If this still does not help, do the following:
Re-verify the path, check it one folder at a time.
Delete the old Microsoft favicon entirely, unless you plan on using it for something else (which I doubt).
Open the ico file you are trying to render. Is it really the picture you expect it to be?
Manually (Ctrl+Shift+Del) clear the cache (especially for Chrome) and try again (if you're gonna debug in Chrome, you might as well get used to doing this regularly [okay, actually it doesn't matter what browser you use, you'll always have to do this when something doesn't render the way you expect, so that you'll know it's not a caching issue]).
Make sure you're looking at the right site, when it's open in your browser (i.e., make sure that you're not editing your site locally and pulling a non-updated version from your server or something).
Other than that, I can't think of anything else it could be.
Most likely an issue with the browser rather than anything to do with WebMatrix or code.