What is a favicon?
You've probably noticed that many websites you visit have a little browser icon next to them in the tab on your web browser, as well as in your Bookmarks bar. This little 16×16 icon is known as a favicon (pronounced fa-vi-con) and it's used in many places across the web when displaying your site.
This article will show you how to create you own favicon.ico image and add it to your website or blog.
Why should you use a favicon for your site?
It's not required that you use a favicon, but it can be very good for branding purposes and to ensure people recognize your site across the web.
How to create a favicon for your website
It's actually very easy to create an icon like this with commercial software like Photoshop or free alternatives like GIMP or Paint.net. Just create an image that is a square shape. The default size for a favicon.ico file is 16×16 pixels, however modern web browsers will accept large sizes than this and scale down.
Previously, you had to save the file as .ico or use a favicon generator to create that file, but most browsers (Chrome, Safari, Firefox) now accept .png and .gif. The exception to this is Internet Explorer in all versions up to – and including – IE10.
While Internet Explorer 11 does support both PNG and GIF favicons, it is still recommended to use ICO where possible because many users will be running an older version of IE.
Once you've created your favicon it's time to add it to your website.
Adding a favicon to your website
By default, web browsers will look for the favicon file in your root folder. For most servers this is either public_html or www.
If you need to upload to a different favicon directory or location for any reason then you can specify this new URL in HTML in the <head> section of your web page by adding the following:
<link rel="shortcut icon" href="your-folder-name/favicon.ico">
Using a favicon in WordPress
To set a favicon in WordPress you'll need to upload a version of your icon to the root folder as mentioned above, and also upload the same icon to your current theme folder under wp-content/themes/theme-name/.
Next, you'll need to go to Appearance > Editor in your WordPress Dashboard and find the file called Header or header.php. Find that line that begins <link rel="shortcut icon"... and replace it, if it exists, or add the following code into <head>:
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
Adding a favicon to the Genesis theme
If you use the Genesis Framework for WordPress (which Site Beginner does) you can add the following PHP code to the functions.php file to change your favicon:
//* Display a custom favicon
add_filter( 'genesis_pre_load_favicon', 'my_favicon_filter' );
function my_favicon_filter( $favicon_url ) {
return 'http://www.yoursite.com/images/favicon.ico';
}
Once you've made the changes to your favicon you can force the browser to show it by doing a “hard refresh” using the following keyboard shortcuts:
- Windows: Ctrl + F5
- Mac: Apple + R or Cmd + R
- Linux: F5
Leave a Reply