How to change the WordPress favicon?

Question

I'm looking for a way to change the WordPress favicon. Any hints how to do this?

Answer 1

You should add it on your theme's header.php file with this code (W3C standard code):

<link rel="icon" type="image/png" href="http://yourblog.com/favicon.png">

Answer 2

For a little bit interoperability, consider using the Microsoft Icon format.

Just place a file called favicon.ico with your icon grafik then into the root of your site.

That's important because many are requesting it directly.

Sure you should add the meta to your site's output as well, it goes into the html head section:

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon"/>

Doing so will make it work in a large share of browsers and it will prevent 404s error messages in your server-logs as the meta href is not reflected by all user-agents.

Favicon in WordPress

A HTML head related WordPress hook is wp_head (Wordpress Codex):

add_filter('wp_head', function(){ 
    printf("%s\n", '<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon"/>');
    });

Since version 3, WordPress has an empty favicon.ico build in.

If you're interested in some details, there was some discussion going on in Should include default favicon (Ticket #3426) and Discard requests for favicon.ico (Ticket #11412) which resulted in that default 0-byte long virtual /favicon.ico file (if wordpress placed inside the server root).

So it's basically a file the browser will fail at in a default setup w/o a user-added /favicon.ico file.

Answer 3

In case you support IE 6, a small warning: The favicon does not show in toolbar unless the url is added to 'Favorites' (bookmarks), and the favicons are stored in IE cache, so will get deleted when you delete the cache, or when gets periodically deleted.

Answer 4

To make the list of answers complete, in the above answers were mentioned (see also http://en.wikipedia.org/wiki/Favicon) and your choice:

1. adding a /favicon.ico in the root (http://en.wikipedia.org/wiki/Favicon), you can only add icons here, so e.g. /favicon.png is not valid there are some considerations on the ico type, very older IE browsers ONLY support the MS ICO format
2. tag with rel=shortcut icon : cross browser support with notes, many sites prefer this, you can add other file types here but mainly i see png, gif, ico, jpg and jpeg. You can add also animated gifs when using the GIF format.
3. tag with rel=icon : where you specify the mime type

4. embed it directly in the page using e.g. base64 encoding: e.g href="data:image/x-icon;base64,iVBORw0==" , this is also NOT supported by all browsers but there are quite some sites using it.

   • Take notion of the mime type specified e.g. for icons the official standard is still mentioned as "image/vnd.microsoft.icon" but “image/x-icon” is needed here even for IE 6 versions.
   • Also I notice that the mimetype specified is not always corresponding with the actual filetype sometimes ICO is specified but an actual PNG is present. So note the correct mime type.
   • If you want to end up in Google's favicon provider you should add the ico in the root.
   • Other Icon Support: Apart from favicon.ico there are A LOT of additional tags for icons such as the Apple icon mentioned above but also link rel="avatar", link rel="pavatar" etc...

From the other side, if I look for a favion I:

• first look in Google: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_google_s2.php
• then i look in other providers such as geticon: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_geticon.org.php
• then i scan the page for first rel icon an then rel shortcut icon: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_extract_from_page.php and if embedded I get the embedded one
• and only then i try to fetch the icon from the root: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_extract_from_root.php

p.s. you can ofcourse apply all these methods for your site to give the widest support possible ;)

Answer 5

Just upload a "favicon.ico" file to your websites root and that's it! Actually, Fernando's answer works too:

<link rel="icon" type="image/png" href="http://yourblog.com/favicon.png">

And to add Favicons for Apple devices add this to your head:

<link rel="apple-touch-icon" href="/customIcon.png"/>

Answer 6

Simply Paste this code to functions.php and change href with your favicon path

function blog_favicon() {
echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('wpurl').'/favicon.ico" />';
}
add_action('wp_head', 'blog_favicon');