I have a tiny HTML file with a favicon and a redirect redirect to differentiate a number of URLs which have no custom favicons, on different computers, which I would like to bookmark on Chrome. Since the absolute initial path differs on all computers, I was hoping to use %UserProfile%\Desktop\ as the path to my file, which would work on all computers, but I don't know whether and how I can enter this kind of path in a URL in Chrome?
Running either Windows 7 or Windows 8 on those computers.
As far as I'm aware, you cannot bookmark dynamic URLs. What you can do is compressing your HTML page into a data URL which can be used as a bookmark:
data:text/html;utf-8,<!DOCTYPE html><head><title>Title</title><link rel="shortcut icon" href="http://example.com/favicon.ico"></head><body><script>setTimeout(function(){ window.location.replace('http://example.com/') },1);</script></body>
This is just the following HTML without new lines and data:text/html;utf-8, at the beginning:
<!DOCTYPE html>
<head>
<!-- Page title, can be omitted -->
<title>Title</title>
<!-- Link to the favicon in href -->
<link rel="shortcut icon" href="http://example.com/favicon.ico">
</head>
<body>
<script>
setTimeout(function(){
// URL to redirect to in quotes
window.location.replace('http://example.com/')
},1);
</script>
</body>
I just tested this and it seems to display the correct favicon if you provide the path to it. To add it to your bookmarks, right-click the bookmark bar and select Add page... then enter the data URL for the location.
If you need to use local favicons, then you can convert your .ico to a data URL as well. Here's one tool of many that I found through Google: http://dopiaza.org/tools/datauri/
A simple search for ico to data url should give you relevant results.
You'll get a nice long URL that you can use in place of http://example.com/favicon.ico and it'll still be contained within the bookmark.
Related
I'm getting an error in Firefox console of favicon not included in page.
Can favicon just accept png or jpg file type by the browser?
UPDATE:
I've added the link to the favicon as suggested:
I still get the error but it is a new error:
The simplest way to know is to test it. Just put a PNG image path in your HTML (using link) or the manifest.json to specify various icons for different device audiences (the app doesn't need to be a complete PWA). Read https://developer.mozilla.org/en-US/docs/Web/Manifest/icons to learn about the specification. For the example of the link element in the HTML, I used the following code inside the <head/> element, and I was able to see the Google icon (which is a PNG on the tab):
<head>
<title>Using PNG Icon</title>
<link rel="icon" type="image/x-icon" href="<link-to-image.png>">
</head>
This should update the icon for you. Note that sometimes a browser might cache the resources, so consider a hard refresh to load the fresh copy of the web document.
Also, it is interesting to note that caniuse website specifies that a PNG file is preferable.
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.
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
Currently I'm using this bit of code to add a favicon to a website:
<link rel="shortcut icon" href="https://www.mysite.co.uk/images/favicon/favicon1.ico" />
However, this code must be added to each HTML page. Does anyone know how to set a global favicon?
Everywhere I've looked tells me I must add it to each page.
UPDATE:
Chrome searches for a favicon.ico file in the root directory.
Firefox needs this on each page:
<link rel="icon" type="image/png" href="/favicon.png" />
For future reference use php to include the header information (including the favicon) that stays consistent on each page so that you only have to edit one file instead of a large number of files.
Use <?include "header.php" ?> on all pages where your header.php includes all the code that is common to all pages
It could be something like:
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<script src="../quirksmode.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
and all the other code that needs to be included on all the pages
See more about include here:
http://php.net/manual/en/function.include.php
EDIT:
For now you could open all files in an editor like notepad++ and do a find and replace to replace all occurrences of with \r\n
where \r\n is the newline character for windows in the extended search mode.
Notepad++ has the option to do a find and replace in all open files.
On most modern browsers, all you need to do is to put the favicon.ico file in the root of your website, it will cache and work on all pages.
No, you need to include the <link rel="shortcut icon"> element in every page. However, you can:
Place the favicon.ico file in the root of your project, then refer to it as /favicon.ico.
As far as I know, it will be cached, so there's no problem of redownloading.
Most browsers search for /favicon.ico in the website. It usually caches and will work across the whole website from the one directory.
What I did was create a script file that created the link element through the DOM and added the attributes. Use this code in a JavaScript file and link it to the HTML file (note this also works in markdown)
window.onload = function() {
var link = top.document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = "./Australian_Kangaroo.ico";
top.document.getElementsByTagName("head")[0].appendChild(link);
}
In the HTML, you need to link it through the script tag
<script src = "script.js"></script>
The advantage of this over the link tag is that you can add this JavaScript to a file that you have other functions in, so it will be less work.
Place the favicon in the root of your website named "favicon.ico".
If you want to use another format of icon (in the root directory) you could use htaccess (or equivalent) to set the mime type of ".ico" files to ".png" and rename the "favicon.png" to "favicon.ico".
In your htaccess file add the following code:
AddType image/png .ico
Is there some directive I could use in my HTML to tell the browser not to ask for the favicon?
Add this line.
<link rel="icon" href="data:,">
This assigns an empty data URL to the favicon’s element which specifies the location of the external resource. This trick stops the user’s browser from sending an automatic HTTP request for the favicon.
This has some more details
No, I don't think there is. From Wikipedia:
Most web browsers do not require any HTML to retrieve a favicon that conforms to the de facto file name and type (favicon.ico) located in the web site's root. If no favicon link is detected upon HTML page load completion and no previous site visits are recorded in the browser's history, a favicon.ico is requested automatically.[8]
The only thing you could do is explicitly point the browser to a different location (that for example could return a 204 no content)
<link rel="shortcut icon" href="http://www.example.com/my_empty_resource" />
You could try pointing the <link> at a data URL. As commented below, IE will not like this, though.
Example (from 11011.net):
<link rel="icon" type="image/gif" href="data:image/gif;base64,R0lGODlhEAAQAIAAAAAAAAAAACH5BAkAAAEALAAAAAAQABAAAAIgjI+py+0PEQiT1lkNpppnz4HfdoEH2W1nCJRfBMfyfBQAOw==" />
Edited to reflect Pekka's concern regarding IE.
If you are not using HTML and its auto generated by Flask or some frameworks you can always add a dummy route in the app to just return dummy text to fix this issue.
Eg for Python Flask Application.
#app.route('/favicon.ico')
def favicon():
return 'dummy', 200