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.

What's the proper way to add a favicon in Wordpress without a plugin?

Do I just place a file called favicon.ico with my icon grafik into the root of my site?

Do I also need this code or is that necessary?

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

Some say it's this code:

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

And this is for iPhones?

Any suggestions on software to create it or to convert it from a thumbnail? And what types of files are supported - just .ico?

I saw another thread (below) with so many methods and I was unclear what is the best practice for this simple task. How to change the WordPress favicon?

share|improve this question
5  
Why the without a Plugin restriction? –  Chip Bennett Feb 29 '12 at 15:36
    
The question contains imho too many off topic stuff. Close vote. –  kaiser Feb 29 '12 at 18:54
add comment

4 Answers

Actually, the correct method to add a favicon is via a Plugin, so that the added favicon is not Theme-dependent. Essentially, use @helgatheviking's method, but put it in a custom Plugin, rather than in your Theme's functions.php file.

Note: if you're using a top-level domain, i.e. example.com, just drop favicon.ico in the document root, and you're done. For anything else, create a custom Plugin.

Note 2: Refer to Trac Ticket #16434. A site favicon option is being added to core, hopefully version one of which will land in the upcoming 3.4 release.

share|improve this answer
    
one of these days i need to use otto's snippet. thankfully people aren't changing their theme on a daily basis, but i agree completely that favicons (and post types, etc) shouldn't be theme dependent. looking forward to this coming to core. –  helgatheviking Feb 29 '12 at 18:51
    
It really isn't even so much a "snippet". Think of it as a Theme's functions.php file, with a particular phpDoc header, that lives in wp-content\plugins\some-plugin\name instead of in wp-content\themes\some-theme-name. –  Chip Bennett Feb 29 '12 at 19:34
add comment

I usually put the icons in an images folder inside my theme so I'd use

function kia_add_favicon(){ ?>
    <!-- Custom Favicons -->
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri();?>/images/favicon.ico"/>
    <link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/apple-touch-icon.png">
    <?php }
add_action('wp_head','kia_add_favicon');

edited: to add the apple touch icon per the comment, and to clarify that if you are using a child theme, but the favicon is in the parent theme's image folder, you'd use

get_template_directory_url();

if you are not using a child theme, then either will work

I usually create my favicons here: http://tools.dynamicdrive.com/favicon/

share|improve this answer
    
In case of a child theme, wouldn't it be better to use get_template_directory_uri instead? In reply to the original question, I've added an 114x114px Apple icon like this: <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">. There's also plenty more documentation about adding favicons and Apple icons here: github.com/h5bp/html5-boilerplate –  Cor van Noorloos Feb 29 '12 at 18:37
1  
i think html5bp has gotten away from adding them in the header. if you put the icons w/ the correct names in the site root, most browsers will find them automatically. but to answer your question, child theme versus parent... it actually depends on where you store the favicon image. get_template_directory_uri() gets the parent theme's url, while stylesheet_directory_uri() gets the child's url IF it is a child OR the parent's url if it is the activated theme. –  helgatheviking Feb 29 '12 at 18:41
    
You're right. I've got them both mixed up... html5bp has indeed removed them from the header, but there's still some great documentation in the source (mostly about the Apple icons) mathiasbynens.be/notes/touch-icons –  Cor van Noorloos Feb 29 '12 at 19:01
add comment

A lot will depend on the theme you're using. If the theme is defining your favicon (with a <link> tag in the header), then you'll need to replace favicon.ico in your theme to change it.

But if your theme isn't defining anything, placing a favicon.ico at the root of your site should be enough.

share|improve this answer
add comment

Be patient, core is there for help

This is a planned feature, with two assigned core devs, that comes with 3.4.

share|improve this answer
1  
We're running a little behind - it may not be out in 3.4. We'll know more after today's meeting. –  Tom Auger Mar 7 '12 at 15:40
    
@TomAuger Thanks for keeping this up to date. Feel free to just edit the answer, when you've a full status. –  kaiser Mar 7 '12 at 19:17
add comment

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.