New to development and learning..
Do you have to download the favicon to your computer in order to reference in your HTML code OR can you reference image directly from web?
The image must be served from a Web Server. It could be from your own server or any other web page.
For example, assuming the image is in your main folder you can add it with:
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
Note: Displaying an image on a website by linking to another website is called hotlinking and should only be done when the website explicitly allows it.
Related
I want to add an favicon to my web application.
I've added this in the site.master page:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
It is only working, when I run the application via Visual Studio.
If i start the app from IIS (for example) the favicon is not displayed.
Any thoughts on this?
If you want to add the same favicon to the whole site, there's no need to add any markup to the site - just ensure the file exists at http://yoursite/favicon.ico
If you need to have different favicons for different parts of the same site, then you will need to use the markup.
The site uses a favicon stored in the root, but the https admin section is using the old favicon and I'm not sure where it's coming from.
Does anyone know of a way to find favicon site resources, i.e. where they're coming from? The unsecured pages all use the same head CSS with references to the same favicon, but the admin references no favicon, so I'm baffled as to why it's using the old one on those pages.
On your site using the selector document.querySelector("[rel='shortcut icon']") gets the element:
<link rel="shortcut icon" href="http://www.inside-guides.co.uk/favicon1.ico" type="image/x-icon">
You can reveal the element in the html panel with most javascript consoles if you want to see where its being declared in your html. In your case its declared:
If there is no favicon.ico in the root of the site, then view the source of the site and look for <link rel="shortcut icon"/>. It should have a href attribute. This would tell you the file location.
Most browsers will look for a favicon at /favicon.ico if they don't see a tag.
Source: https://stackoverflow.com/a/21359390/13683677
My web page is not actually live on the internet. I have it saved on my computer and I am simply opening the HTML file from my computer- the navigation of the website is all on my computer. Anyway, before I put my site live on the internet, I want to test out all my code, including my favicon. My favicon is not showing up, though. Here is the code I found to be most recommended so far:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Try "shortcut icon" instead of "icon":
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
And note that the path to your favicon is relative to the html file. If both are in the same directory, the path is just "favicon.ico", no slash.
favicon.ico must be in your root folder, same place where is your index.html, and of course you must have a localhost server
<link href="favicon.ico" rel="shortcut icon">
The link element is correct as such (though the type attribute is redundant, and all that it could achieve is to prevent a browser from using the icon), but the URL /favicon.ico is relative and generally does not work when the HTML document is local. A locally accessed HTML document has a file: URL, and such URLs are by definition system-dependent, and in practice they also depend on the browser, too. For example, in a typical Windows system, in you placed favicon.ico directly in the root of the C: disk (requiring normally admin privileges for that), Chrome would find it, Firefox wouldn’t, as they use different file: URLs when you open local files.
So in local testing, you should normally use relative URLs that are relative to the current document, e.g. as in href=favicon.ico (when favicon.ico is in the same folder as the referring HTML file) or as in href=../images/favicon.ico (when favicon.ico is in an images folder that is a sibling of the folder where the referring HTML file lies).
If you need to test locally with URLs that relative to the server root, you should download and install a local HTTP server, such as XAMPP.
This website has a favicon:
link rel="shortcut icon" href="http://www.pathfolios.com/sites/default/files/Untitled-1%20copy%20%281%29.png" type="image/png"
The favicon appears normally when accessing pages within the site.
When using admin pages and particularly "viewing source" the icon becomes a stock icon of the server host. It happens on other computers as well.
Is it as simple as putting my icon file as favicon.ico?
I really want to know why if possible.
Use this to covert it http://www.convertico.com/
See the small logo/icon in the tab when you open any website in any browser?:
How can I put such logo/icon on my wordpress blog?
This is called a favicon. You link to it in the head section of your HTML.
You can read more about it here: http://www.w3.org/2005/10/howto-favicon
And view a list of Wordpress plugins that do the work for you here: http://wordpress.org/extend/plugins/tags/favicon
Two ways,
the first is use this plugin
http://wordpress.org/extend/plugins/shockingly-simple-favicon/
Or, if you really want to learn how it works. Open your theme folder (normally under wp-content -> themes -> your theme name) and then normally in the header.php file there is everythign that happens in the head of your pages.
Any where in the <head></head> place the following code...
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Where /favicon, is the link to your favicon.ico.
To easily make a favicon, use the following link.
http://www.favicon.co.uk/
Hope this helps you learn how to do it and what the actual plugin does for you :)
Use plungin: http://wordpress.org/extend/plugins/shockingly-simple-favicon/
You just need to put the image into a file named favicon.ico in your website's root directory (like www.stackoverflow.com/favicon.ico). Browsers request this file when a user visits your site and will show it in the tab or bookmarks. You can find more info on wikipedia or even use http://www.favicon.cc/ to help you design the icon.
There are two ways.
In your template header.php file, you have to add the favicon code: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
or, you just put the favicon.ico into your www root. Apache has a configuration setting which will load this as default.