Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

migrated from webapps.stackexchange.com Feb 15 '11 at 0:33

This question came from our site for power users of web applications.

    
You have one, you have none? Normally WordPress has none, that's why I'm asking. –  hakre Feb 15 '11 at 0:36
    
@hakre at the moment i have none –  RoflcoptrException Feb 15 '11 at 0:39
    
Wordpress version can make some difference for the default favicon.ico and I added an answer on my own to reflect some details I could not find in existing answers. Hopefully it's still of help. –  hakre Feb 15 '11 at 11:10
    
I found this useful information on the history, interoperability an different ways of adding: en.wikipedia.org/wiki/Favicon and en.wikipedia.org/wiki/ICO_(file_format) –  edelwater Feb 15 '11 at 20:20

6 Answers 6

up vote 5 down vote accepted

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">
share|improve this answer

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"/>
share|improve this answer
    
Thanks, now i it displayed in the backend, but in the frontend there is a different favicon displayed. –  RoflcoptrException Feb 15 '11 at 10:02
    
Clear your cache. –  Abhishek Bhardwaj Oct 13 '11 at 20:56

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.

share|improve this answer

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.

share|improve this answer

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:

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

share|improve this answer
1  
Just FYI: rel, comparable to class, is a space separated list of values. That would make point 2. and 3. of your question two in one. type is always optional, in case of display-errors, check the server mime-type-headers for the /favicon.ico request. –  hakre Feb 16 '11 at 8:58
    
@hakre: thanks !!. yes. uhm.... except for ie........: mathiasbynens.be/notes/rel-shortcut-icon this does not treat it as a space separated list of values so "icon shortcut" will not work (uhm excl. ie9) (but i suddenly understand why shortcut is useful: if you want seperate icons on each page) –  edelwater Feb 17 '11 at 0:05
    
@hakre: is the returned server mime type ALWAYS correct? (i now save it, load it and perform an exif_imagetype on it to be sure) i can remember some vague things about getting bmps while there were jpegs –  edelwater Feb 17 '11 at 0:15
    
don't refer to html 5. It's not ready for production use, the current version of html is 4.01 and it's doing a great job. You can however, if you're concerned, add a secondary link, on with rel shortcut and one with rel icon pointing to the same locations. Even with html 5, this discussion is so 2006 –  hakre Feb 17 '11 at 11:36

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');
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.