How to Create & Install a Favicon
A “favicon” or favorite icon is the little icon that shows next to the URL in the address bar and above or beside the site name in your browser favorites or anywhere else your site is bookmarked. It also shows next to the name of each site you contribute to in your Google+ profile.
Depending on your platform, host, and theme, you may have an default favicon that displays until you customize it. Blogger blogs show an orange box with a white B, WordPress.com blogs show the round blue WordPress logo. Bluehost site have a blue box with a white grid. Themes on the Genesis framework have a black box with a white G. Customizing your favicon is not only one more chance for branding your site, but it’s a final step to show that you pay attention to the details in your design.
The favicon will generally be visible at about 16×16 pixels. That means your favicon needs to be clear and recognizable no matter how small it is. However, if you add your site to the home screen of your iPad, your favicon may show much larger. Thus, you may want to use special image software to generate an icon file that includes multiple sizes so that the larger views aren’t pixelated.
Here’s a run-down on how to install a favicon on popular blogging platforms and themes.
Favicon in Blogger
For Blogger blogs, just go to your blog’s Layout, and click Edit under Favicon. You’ll need to upload a square image less than 100kb in size.
Blog Picture/Icon in WordPress.com
If you have a WordPress.com site, it’s easy: just go to Settings, General, and upload the image of your choice. WordPress.com will let you crop the image once it’s uploaded, and then automatically display it where and in what size it needs to be.
Favorite Icon in WordPress Theme Options
Many WordPress themes allow you to upload an image right from your theme options and it will become your blog’s icon.
In WooThemes Canvas, go to Canvas, Canvas Theme Options, General Settings, Quick Start, Custom Favicon.
In Elegant Themes, go to Appearance, [Theme Name] Theme Options, General Settings, Favicon.
Favorite Icon with a WordPress Plugin
If you’re using a Genesis theme from StudioPress, you can use a plugin like Genesis Favicon Uploader to add an icon upload feature to your WordPress dashboard. (This plugin, while outdated, usually works.)
For other themes that don’t have a custom favicon option in the theme settings, you can choose from one of many custom favicon plugins. Some may work better than others, depending on your theme and host:
Manual Favorite Icon Installation
If your theme doesn’t have a favicon option in the settings, or the plugins aren’t working for you, here are 5 steps to manually create and install a favorite icon for a WordPress site.
1. Create a square image.
Use your favorite photo editing software or PicMonkey to create a square image that will represent your site. Make sure it will be clear and recognizable no matter the size.
2. Save it as a 16×16 file named favicon.ico.
You can resize your icon to 16×16 pixels using your favorite photo editing software. Or, you can use an icon generator like ConvertIcon! to generate one icon file that contains multiple size options. Save your final as favicon.ico (favicon.png works with some themes and browsers, but not others). If your photo editing software won’t let you save as .ico, save as .png then use one of these handy tools to convert it to an icon: ConvertIcon!, Dynamic Drive FavIcon Generator, favicon.ico Generator, or Faviconer.
3. Upload your favicon file.
Login to your Cpanel and find the File Manager. Or if you have FTP access, connect to your FTP server.
Upload the favicon.ico file to both your root directory (www or public_html) and your theme directory (public_html/wp-content/themes/theme-name/) or your theme’s images directory (public_html/wp-content/themes/theme-name/images/).
4. Clear your cache and refresh your site.
Refresh your site. If your new favicon isn’t visible, try clearing your browser cache. If you’re using a cache plugin, try deleting your site cache. You can type in yoursite.com/favicon.ico to double check that it uploaded properly. Sometimes just adding your site as a bookmark will cause it to get the new favicon.
5. Add favicon details to your theme header (optional).
Steps 1 through 3 are usually all that is necessary for step 4 to work. However, if you have issues, you may need to reference your favicon in your header.php file. You can do this manually, or use a plugin like Insert Headers and Footers.
Got more than 5 minutes?
Read “Favicon: A Changing Role” for a fascinating glimpse into how you can create a different favicon to display at each size.
More tutorials:
Alright Miss Gretchen…I’ve done Steps 1-4 and checked to make sure it’s there (mysite.com/favicon.ico) and it is but it still won’t show up. I peeked in my Cpanel and my [child] theme doesn’t have a header.php file. Point me in the right direction? 🙂
NEVERMIND! When in doubt, shut down and reopen. 🙂 Thanks for the wonderfully easy instructions to follow!
Browser caches can be stubborn! Glad it finally cleared and is displaying properly. 🙂
Other options would have included the Insert Headers/Footers plugin, or simply a plugin that inserts the Favicon code for you. But I’m glad it worked once your caches cleared!
Thanks for the great post! My favicon is coming up fine on tabs and in all browsers, including Google Chrome. However, it refuses to show up next to my website link – in the list of sites I contribue to – in my Google+ profile. Any ideas why this is happening?
In my experience, favicon.ico has to be in the root directory of the domain (i.e. public_html) for it to show up in your Google+ profile. Plugins and other codes will make it appear properly on your WordPress site, but Google+ can’t find it if it’s not named favicon.ico and in your root directory. Hopefully that will work for you!
Thanks for your reply. Unfortunately I had already tried the manual way and put the favicon.ico in the root directory – with no luck in Google+. Oh well, I’m sure somehow it will all come good in the end!
Thank you! I’ve been wondering how to do this for my blog, now it’s done! 😀
I’m so glad it helped! 🙂
How do I save the image as a ico file? I only see the options for jpeg or png.
If you don’t have that option in your favorite image editor, you’ll need to use something like http://converticon.com/ to convert it to an .ico file.