14

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 into the root of my site?

Do I also need this code?

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

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

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 with so many methods and I was unclear about the best practice for this simple task: How to change the WordPress favicon?

Improve this question
2
  • 6
    Why the without a Plugin restriction?
    – Chip Bennett
    Feb 29, 2012 at 15:36
  • 3
    The question contains imho too many off topic stuff. Close vote.
    – kaiser
    Feb 29, 2012 at 18:54

4 Answers 4

Reset to default
20

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/

Improve this answer
3
  • 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
    – user5424
    Feb 29, 2012 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, 2012 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
    – user5424
    Feb 29, 2012 at 19:01
11

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.

Improve this answer
2
  • 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, 2012 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, 2012 at 19:34
2

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.

Improve this answer
1
  • Best answer for sure with a <link rel="icon" type="image/x-icon" href="favicon.ico"> inside the <head> tag of your header.php file in your child theme.
    – Isak La Fleur
    Nov 25, 2021 at 10:36
2

Be patient, core is there for help

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

Improve this answer
2
  • 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, 2012 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, 2012 at 19:17

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