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.
Related
For some reason, the favicon just isn't showing. The website is gracedli.com.
You can see the favicon at gracedli.com/favicon.ico and my code to add it is (currently only on index.html):
<link rel="icon" href="favicon.ico" />
I've cleared the cache and used multiple different browsers, and for the life of me, I can't figure it out. Would love some help on it (everything's written in pure HTML/CSS so you can take a peek at the full code at the link). Thank you so much!
You have put the contents of <head> in <header> instead. Move them into , and that would possibly solve your problem.
Common reasons your Favicon is not showing
Check file path : You need to ensure that your favicon’s file path is correct.
The link of favicon is not at the right location : It is important to place the link to add your favicon in the head section of your webpage.
Syntax errors : A minor syntax error in the link of favicons could result in your favicon not showing.
When favicon file in the root directory, but not linked : Always put the favicon in the root directory, and name it favicon.ico. Almost all modern browsers look up /favicon.ico by default but make sure that you have these links in your head section:
link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon" />
link rel=" bookmark" href="favicon.ico" type="image/x-icon" />
Because in many cases Just because the favicon file is in your root directory, it does not mean that it will automatically recognize.
Your browser has cached your site as one without a favicon : May be your browser has ‘saved’ your site as one without a favicon. You need to clear the cache in your browser or use a different browser.
May it helped to solve the issue…
Huge shout out to Timmy Chan (in the comments of the question) for noticing this, but I put my tags in <header> instead of <head>. Once I moved them, it worked!
I'm almost done with my personal website. All that's left is my tab icon, but my knowledge of html is pretty limited. I've placed my favicon.ico code below in the head.html with the other link and meta code, but I'm not seeing any changes. Do I have the right idea? I'm not sure what to change from the wiki instructions.
(no spaces at ends)
< link rel="shortcut icon" href="/assets/images/favicon.ico" >
You can see what I have here at https://dietmocha.github.io/
That image doesn't seem to exist in your GitHub repo. Try <link rel="shortcut icon" href="/assets/img/favicon.ico">
Most shortcut icon are presented in HTML like this:
<link rel="Shortcut icon" href="url" />
but many sites don't have shortcut icon in their html code but still chrome is showing me icons on tabs. How they made it? I want to download icons from different websites but I don't know where my crawler should look for them. Examples of websites where I can find it:
http://www.amazon.com/dp/0976470705?tag=lessolearn01-20&camp=0&creative=0&linkCode=as4&creativeASIN=0976470705&adid=0E34NG800FT9HMWYP4D6
http://www.startuplessonslearned.com/2008/10/lean-startups-vs-lean-companies.html
It is known as favicon (most of times!).
For the second link you pointed to, it is :
<link href='http://www.startuplessonslearned.com/favicon.ico' rel='icon' type='image/x-icon'/>
Also, it could be added in several ways. For more info read this article.
On the second page give as example, the tag is
<link href='http://www.startuplessonslearned.com/favicon.ico' rel='icon'
type='image/x-icon'/>
The attribute specification rel="icon" is practically synonymous with rel="shortcut icon".
On the first page, there is no tag that affects favicon issue, but at the server root there is a file with the name favicon.ico, i.e. http://www.amazon.com/favicon.ico, and that’s what browsers use, by convention. Putting an icon under such a name at the server root thus makes the link elements redundant, provided that you want to use the same icon for all pages. Of course, not everyone can put files at the server root.
you can also use .png file:
<link rel="shortcut icon" type="x-icon" href=".directory/image.png" />
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
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