I'm just transferring all my files over from xampp's htdocs to my server and now I just need to add a favicon.
I have the icon saved as 'favicon1.ico' and it is a proper icon size 16x16, but I cant get it to work.
This is the code I have for it:
<html>
<title>Server Test</title>
<head>
<h1> Hello World </h1>
<link rel="shortcut icon" href="O:\Intranet\favicon1.ico"/>
</head>
<body>
</body>
</html>
That is the correct location of the icon in the href so I dont see why this shouldn't work.
I've never added a favicon to a site before so that is where my main problem of not knowing exactly what it should look like lies.
Your Favicon path uses a windows style File path as pointed out in the comments.
Ensure the following
favicon1.ico file is present in the package that you are transferring onto the server.
Ensure that the file is accessible over http (try using a browser to navigate to it). The path should be something like http://server:port/app-uri/favicon1.ico
After that as suggested in one of the comments use a relative path such as ./favicon1.ico in the HTML source.
Also I suggest reading up on the concept of favicon http://www.w3.org/2005/10/howto-favicon
Code below should work. Try this.
<link rel="icon" type="image/png" href="http://yoursite.com/favicon1.ico">
Notice that href points to the address of your icon depending where you put the icon.
Related
I tried to implement a favicon to my website but it is not working properly.
I think the problem is that in my code, I am using in the twice, one for the href=style and one for the favicon but I don't know how to fix it.
this is my code at the moment:
<head>
<title>title</title>
<link href="faviconfinal.jpg" rel="icon">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
For the link type="shortcut icon" I recommend you have a png file. What I normally do for link shortcut icons is that I prepare a 256x256 or 512x512 transparent png icon and just save it in a location like images/icon.png.
You should verify if the file is correctly located in your page. The easiest way to do this is opening your browser's console and looking for 404 errors. The easiest way to see it's working is the browser's tab showing your icon.
Besides that, what you must have is a favicon.ico file at your root folder (where your index file is located). The icon has to be a .ico file. For Windows you can use IcoFX. For mixed use or Mac focused you could use either IconWorkshop or IconFactory.
You don't need to specify the favicon.ico icon, it's the default icon. You can check more on this here
Change the suffix of the .jpg file to .ico, rename it to favicon.ico and link to it as follows:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
I want to show user circle icon, I have download a font-awesome css file with version 4.7.0.
But this is not working for me. If I use cdn then its working. I am not getting what is the issue in downloaded file.
Here my code:
<html>
<head>
<link href="font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<i class="fa fa-user-circle-o"></i>
</body>
</html>
Does anyone know what is the issue?
There is no problem with body part of HTML. Surely, it has to be with font-awesome.min.css or its path.
There are two ways to go about this problem:
font-awesome.min.css may not loaded along with your HTML. Check in network tab of chrome DevTools. The path you have provided indicates chrome to look for the CSS file in same directory as the HTML file.
Alternatively, you can provide cdn link for font-awesome.min.css, if you dont want to maintain the CSS by yourself. For this, change link tab in head to below:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
You have to host the font files too. Go to the fontawesome website and read the related documentation.
Font awesome get started
As you can understand from it's name, Font-Awesome has cool font-based approach to use icons. So, including CSS file is not enough. If you want to store your CSS file locally, you should store font files too.
As documented, you should have entire folder (including fonts folder which includes woff, tff etc) on your server.
Copy the entire font-awesome directory into your project.
In the of your html, reference the location to your font-awesome.min.css.
I am trying to add a favicon.ico in my title but it is not working. The image and the HTML file are in the same folder but it still can't show me the favicon icon.
<title><link href="\Users\fjoni_000\Desktop\Stuff\Projects\Programming\favicon.ico" rel="shortcut icon">Best Of Internet | Front page</title>
This is the code that I am using. I tried with the Google logo and still it didn't show. This is the code from Google source code:
<link href="/images/branding/product/ico/googleg_lodp.ico" rel="shortcut icon">
If there is any question similar to mine and has the answer that I'm looking for then please comment it. Also the website is locally hosted NOT online
The <link> should not be within the <title>... it should be outside of the <title> but still within the <head>...
<head>
<title>Best Of Internet | Front page</title>
<link href="\Users\fjoni_000\Desktop\Stuff\Projects\Programming\favicon.ico" rel="shortcut icon">
...
Although I think the main issue you have is it looks like a local system path, not a URL as understood by your browser. And you're also missing the type attribute
Without knowing the setup of your website server... I would take a complete guess that you want something like...
<link href="/Programming/favicon.ico" rel="shortcut icon" type="image/x-icon" />
Just as an additional point, if you're able to... simply placing the favicon.ico file in the root of your domain is enough for the majority of browsers to pick up. Then you don't need the <link> at all
You could try to clear your browser cache and try again.
Do you have a live URL?
you adding Favicon inside the title tag which is wrong and make sure the icon exist in path. try this
<title>your title</title>
<link href="/images/branding/product/ico/googleg_lodp.ico" rel="shortcut icon">
I'm trying to add a favicon to a (simple) HTML page. It has to work on Internet Explorer only, I don't care about other browsers.
<html>
<head>
<title>Test</title>
<!-- COMMENTS -->
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
Favicon Test
Download
</body>
</html>
It doesn't work. I tried in order: /favicon.ico, the absolute path in this format \\SERVER\...\favicon.ico, an http://randomDomain.com/favicon.ico http link, Base64 encoding of the .ico file, Base64 of png file but any solution is actually working. I'm 100% sure the .ico file is well designed. I was wondering if this problem is related to the fact that the page is actually hosted on a system where is not running an HTTP server. In fact, if i try to click on the Download link and then I look at image properties, the result is this
(source: xomf.com)
(source: xomf.com)
Is there any solution? Consider that there wouldn't be a problem using an external http link but it doesn't work.
Many thanks
said page located here:
http://lolisrael.co.il/betatest/index.php
favicon is located here:
http://lolisrael.co.il/betatest/favicon.ico?v=3
I've cleared the history, and reloaded the page and it still shows no favicon
<link rel="shortcut icon" href="http://lolisrael.co.il/betatest/favicon.ico?v=3" />
I think the <script> tag containing facebook code is manipulating DOM. And if you inspect with developer tools in Chrome, you can see that in the final DOM tree, your <link rel="shortcut icon" is put in <body>.
Try moving the facebook code into <body>. According to Facebook's documentation:
You should insert it directly after the opening <body> tag on each page you want to load it:
That <link> tag goes in the <head> not the <body>. It should work once you move it.
According to Favicon Checker, your ICO is corrupted. Lots of other problems detected too.
Errors are as follow:
favicon.ico seems corrupted or not in ICO format.
Some picture(s) are missing in favicon.ico
For me when trying with localhost it is working. Are you sure that you have valid image in the .ico format. If no please regenerate the ico file.
Try this code sir. This code is working for me.
<link rel="icon" href="http://lolisrael.co.il/betatest/favicon.ico?v=3" type="image/x-icon">