I'm trying to add a favicon to my url-bar. But it's not showing up, I'm sure the path is correct because when I use it as a normal image it does show up. Here is the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> title </title>
<link href = "styles.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="../images/favicon.png">
First, try to give the full URL istead. For example "http://localhost/mysite/images/favicon.png" (adapt it to your configuration, actually)
Otherwise, on my site, this works:
<link rel="shortcut icon" href="images/favicon.ico" />
Try to:
convert your png to ico. There are free online tools, for example http://www.convertico.com/
be sure of your folder path. Won't be ./images instead of ../images? Try to give the full URL otherwise. For example "http://localhost/mysite/images/favicon.ico".
after the above steps, try to clear the browser cache and reload the site.
use <link rel="icon" type="image/png" href="../images/favicon.png">
See W3C howto.
However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors.
Your rel attribute needs to be icon and not shortcut icon.
There are several ways to set a Favicon, but this is what I use:
<link rel="icon" type="image/png" href="<?= base_url('assets/images/logos/favicon.png'); ?>" />
Related
<head>
<meta(charset='utf-8')>
<link rel="shortcut icon" type="image/x-icon" href="http://viewwit.com/image/favicon.ico" />
</head>
the head of my site starts with this but the favicon still won't show up inside of the title bar on any of my pages.
if you want to check for yourself the site is http://viewwit.com/ (I know it's bad, I'm making it just for fun).
I can't figure out why it isn't working. Any help would be awesome.
Try these
<meta charset="utf-8">
<link rel="shortcut icon" href="http://viewwit.com/image/favicon.ico" />
Take a look at the meta charset
As an easy fix, you can place your favicon within the root directory (same place as index.html). This is the default location which a browser will look for when searching for a favicon.
There's an indentation indicating that my favicon was loaded, but instead of seeing the favicon, I see a completely blank region where the favicon should be. The image is 38x48, but I also tried 32x32. It's about 10kb for the 48x48, 5kb for the 32x32. It's certainly not a blank/transparent image.
This is what I see when I load the favicon:
This is what I see when I load no favicon:
Can you see the difference? I should be seeing a picture of a leaf swaddling a baby's cheek with bird saliva that's been transformed into honey.
*I put this under compliance because I thought it might be an issue of the image size, dimensions, or something else very nitche.
Here's the head. I wonder if it's because I'm in China and W3C may not be accessible.... I'm going to try quirks mode, next.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>...</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<link rel="icon" type="image/x-icon" href="/index.ico" />
<!-- Style link START -->
<link rel=stylesheet media="screen" type="text/css" size="48x48" href="screen.css">
<!-- Style link END -->
</head>
Favicons have to be of various sizes for different types of browsers.
It's important that the sizes are correct for each browser.
You seem to be using mozilla, so use an image which is either:
16 x 16
32 x 32
48 x 48
62 x 62
All in pixels.
Here's the code:
<!-- For IE 11, Chrome, Firefox, Safari, Opera -->
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
<!-- More info: https://bitsofco.de/all-about-favicons-and-touch-icons/ -->
Hope this worked.
I tested this myself to see if I could get it to work. It did not work with an ico file named "index.ico" However, it did work when I renamed the ico file to "favicon.ico". if that does not work you can also try with other file formats. PNG and JPG always work for me no matter the name.
Also make sure that your ico file is converted correctly and that you have not just renamed it to an ico file. There are many converters out there where you can convert other images files to ico files.
Edit: Afterwards I tried with several different random names and they all worked, all except from index.ico
I believe it's some cache issue because the problem resolves itself over time. I've tried changing the favicon, and it doesn't change until a significant amount of time elapses. I'd like to learn more about this behavior and understand why it occurs.
<!doctype html>
<html>
<head>
<title>Asem Syed</title>
<link rel="icon" href="favicon.png" type="image/png" />
</head>
<body>
<div><h1>aasemjs.com will be live.</h1></div>
<div><h1>...soon.</h1></div>
</body>
</html>
Here is my short code, my favicon has been uploaded in the public_html directory, as well as a folder in that "images". On the browser it keeps showing me a broken link.
What am I doing wrong over here?
This code should help you out.
If you have the css in a folder use "../", if this doesn't work just stick with "/" in front of images.
<link rel="icon" type="image/png" href="/images/picture.png">
If you put "sizes" in the link tag, it won't be supported by any browsers, so you'll have to change the width and height in a photo editor.
I'm making a website and i want to put an image in header in title where's the name of website and how to do that?
Here's my code and in the title where'w MyName i don't know how to put a picture.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MyName(PICTURE)</title>
<link rel="stylesheet" href="website.css"
</head>
http://bayimg.com/NApomAAfl (here's a picture of what i want)
You can't put an image in the title. Most sites use favicons to show an image in the tab of your browser.
Put this code in the head of your html file. Create a favicon.png file in the root of your web server:
<link rel="shortcut icon" type="image/png" href="//favicon.png" />
<head>
<title>Water Bureau</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen" title="Main CSS">
<link rel="stylesheet" href="custom.css" type="text/css" media="screen" title="Custom Styles">
<script language="JavaScript" src="/shared/js/createWin.js" type="text/javascript"></script>
</head>
Thats the code, but the "custom.css" isn't working. It doesn't work at all. If we add a #import into main.css OR into the header instead of a it works fine though. Any ideas? We also got rid of the media="screens" on both as well.
The CSS inside of it is working fine, it's just when we stack those two, the first one parsed is the only one read by the browser. So if we swap main below custom, custom than works but NONE of main works. and custom just has snippet of CSS, and doesn't override all the CSS in main, just 1 element.
I can't figure it out! We have other ed stylesheets in the head (which we took out for trying to fix this) and they worked fine...
Like hsource said, try validating both css files.
http://jigsaw.w3.org/css-validator/
Also just try this, without that title thing with both css files in same folder, both relative to the page which is importing them:
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />
It also might be that because you are not using any doctype and also you are not closing your link tags, something related to that might be your problem. So try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />
</head>
There's a two places that I think may be the problem:
The href for custom.css currently points to a location in the current directory of the HTML file. If custom.css is in the /css directory like main.css, you'd have to add that. The file is included when you use an#import tag because the #import is relative to main.css, and it can find custom.css in the same directory as main.css
There's an unclosed CSS tag or something that is breaking all the CSS coming after it; this is pretty unlikely, but you can verify your CSS with the W3.org CSS validator.
This might be due to the way CSS handles style precedence, but might as well be caused by bad markup. Try validating your document or using an absolute path for the custom.css stylesheet.
GaVra, you were right about the doctype, etc. We should have known that, given the HTML5 doctype was being used and probably isn't quite ready for action.
Thanks!