What’s the proper way to add a favicon in WordPress without a plugin?

2 Views

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?

Read More

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?

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. 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/

  2. 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.

  3. 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.