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

  • You have one, you have none? Normally WordPress has none, that's why I'm asking.
    – hakre
    Commented Feb 15, 2011 at 0:36
  • @hakre at the moment i have none Commented Feb 15, 2011 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
    Commented Feb 15, 2011 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
    Commented Feb 15, 2011 at 20:20

7 Answers 7


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">

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.


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.


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"/>
  • Thanks, now i it displayed in the backend, but in the frontend there is a different favicon displayed. Commented Feb 15, 2011 at 10:02
  • Clear your cache. Commented Oct 13, 2011 at 20:56

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 ;)

  • 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
    Commented Feb 16, 2011 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
    Commented Feb 17, 2011 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
    Commented Feb 17, 2011 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
    Commented Feb 17, 2011 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');

I used:

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">

with favicon.ico in the root of the theme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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