How to Add a Favicon to a Website

Webpage favicons and blog favicons identify your website and help brand your online presence.
Webpage favicons and blog favicons identify your website and help brand your online presence. | Source

What is a Favicon

A favicon, also known as a favorite icon or shortcut icon, is simply a small image associated with a website or blog that often appears on browser tabs or even next to a website's URL in the address bar.

Although a favicon may be very small in size, typically measuring in at a mere 16x16 pixels, it is a huge branding opportunity and should not be overlooked by website owners and bloggers.

Many developers and bloggers, however, do in fact miss this chance to brand their site online. Read on to not only learn how to add a favicon to a website in a few simple steps, but also why it's beneficial to have a favicon in the first place.


Why Have a Favicon

Many times, the image used for the favicon is the same as the logo for a business, website or blog. Quite often, however, the icon is an adapted version of a logo designed to look good in just a few square pixels of space.

Favicons shown on broswer tabs in Firefox
Favicons shown on broswer tabs in Firefox

Favicon designs limited to one or two colors and simple shapes or letters often are much clearer to see and may have the greatest impact. Additionally, many bloggers prefer to use their photo avatar as their favicon.

By using a logo or other recognizable image, viewers can quickly recognize a favorite website or blog, making it more likely for them to click-through.


Advantages of Having a Favicon:

  • Increases brand recognition
  • Increases brand/follower loyalty
  • Improves site visibility and perhaps click-through
  • Gives a website or blog a professional touch


The advantages of utilizing a favorite icon are readily apparent when you see the numerous locations they are currently visible on the Internet.


Favicon Shown Next to Bookmarked Websites

Favicons make it simple to locate a favorite website or blog that has been bookmarked.
Favicons make it simple to locate a favorite website or blog that has been bookmarked.

Places a Webpage Favicon Appears

When webpage favicons first started appearing on the Internet they mostly were only visible next to the URL in the address bar. Today, webpage and blog favicons appear in a variety of locations on both browsers and social media such as Google+, making the task of adding a favicon to a website even more paramount.


Places a blog or webpage favicon is seen in browsers:

  • Browser tabs
  • Recent browser history
  • Bookmarks/favorites
  • Next to the URL in a browser's address bar

Just look at any open browser tabs, or do a quick scan of your recent browsing history and favorite/bookmarked sites, and it's readily apparent that these little icons provide instant brand recognition, thus making it a snap to return to a site.


Favicons Displayed in Recent Browser History

Favicons in recent history make it easy to return to a previously visited website.
Favicons in recent history make it easy to return to a previously visited website.

Favicons on Social Media

Google+ displays uploaded favicons on the profile/about page.
Google+ displays uploaded favicons on the profile/about page.

Places a webpage or blog favicon is seen on social media:

  • Social media feeds
  • Social media profiles

Many social media sites are great places to share links. While most social media feeds still do not show a webpage's favorite icon next to its link, some do, and quite possibly more will in the future. For now, Google+ is one of the bigger social media networks that displays favicons.

Google+ displays favicons:

  • next to shared links on a user's feed, and
  • next to other profiles or contributor-to sites entered on a profile page.


Favicons on the Google+ Feed

Google+ displays favicons next to ahared links on a user's feed.
Google+ displays favicons next to ahared links on a user's feed.

How to Add a Favicon to a Website or Blog

In general, adding a favorite icon to a website is a simple three step process:

  1. Make a favicon image
  2. Upload favicon to web server
  3. Add favicon HTML to website

For bloggers who may not have direct access to the HTML code, please refer to alternate instructions below.


1. Make a favicon image:

Image Size: A shortcut icon is most commonly displayed as 16x16 pixels so create an image this size.

File Name and Type: After making an icon it can be saved as .png, .gif, or .jpg. Using a free icon converter, the 16x16 image should be converted to .ico, and named favicon.ico. For more information about file format and browser compatibility, read "Favicon" on Wikipedia.


2. Upload favicon to web server:

Most major browsers automatically search a website's root directory for favicon.ico, so upload or FTP favicon.ico to the root directory. Without doing anything further, your shortcut icon will now be visible on most browsers. To ensure that it displays in every possible location, continue to the next step.


3. Add favicon HTML website:

Add the following code to the <head> section of a website, making sure to edit the example code's path/file name to your site and image file.

<link rel="shortcut icon"
 href="http://example.com/myicon.ico" />

Easy to Add a Favicon to Blogger

How to Replace the Blogger Icon or Blogspot Icon with a Custom Favicon

Many of us are familiar with the orange Blogger or Blogspot icon. This icon can easily be replaced with a custom favicon, giving your blog its own brand identity and a certain level of professionalism.


  • Create a 16x16 pixel shortcut icon and save it as favicon.ico (see steps 1 and 2 above).
  • Login to the Blogger dashboard for your blog.
  • Click on Layout. Near the top, left, click on Edit in the Favicon box.
  • Upload favicon.ico and save.


Troubleshooting Tip: If you visit your blog and the standard Blogger icon is not replaced with your custom favicon, then do the following:

  • Go to yourblog.blogspot.com/favicon.ico
  • After your shortcut icon appears in the browser window, click the browser's reload or refresh button.


Add a Custom Shortcut Icon to Wordpress.com

How to Replace the Wordpress Icon with a Custom Favicon

Wordpress.com

Wordpress.com (the free version) allows users to upload their own favicon, or as they call it, a blavatar (blog + avatar).


  • Login to the Wordpress.com dashboard for your blog.
  • Go to Settings and then General.
  • On the right side of the screen upload a favicon. A tool will allow you to resize the image to the recommended dimensions.


Wordpress.org

If you have a hosted domain on Wordpress.org, the method for how to add a custom favicon will vary by the theme being used. Here are directions for the popular Thesis theme.


  • After logging into the Wordpress admin dashboard, go to Thesis and then Favicon Uploader. Browse for and upload your custom favicon.

  • To ensure that the favorite icon is found by all browsers and other websites (like Google+), the favicon HTML needs to be added to the <head> section. To do this using the Thesis theme, go to Thesis, Site Options, and then Additional Scripts. Add the favicon HTML code listed previously in this article to the script box.
  • Change the path name to the file to /favicon.ico. The forward slash indicates the root directory.
  • Using FTP software or your web host's dashboard, FTP the actual favicon.ico image to the root directory.

Note: If you are unsure of how to upload an image to your root directory via FTP, then upload the image to your blog like all other images, get the URL for the image, and paste the URL to the image in the favicon HTML.

Favicon HTML can be added to the Thesis theme for Wordpress through the admin dashboard.
Favicon HTML can be added to the Thesis theme for Wordpress through the admin dashboard.

Does your site have a custom favicon?

If you have a blog or website, does it currently have its own custom favicon?

See results without voting

Adding a favicon to a website or blog is a simple way to build online brand recognition.

With just a few pixels and a little know-how, your website deserves this customized finishing touch.


More by this Author


Comments 28 comments

billybuc profile image

billybuc 3 years ago from Olympia, WA

Very helpful Kt...thank you for the info!


ktrapp profile image

ktrapp 3 years ago from Illinois Author

Anytime Billy. Glad to help.


AliciaC profile image

AliciaC 3 years ago from British Columbia, Canada

What a useful hub, ktrapp! I didn't realize that a custom favicon could be added to Blogger. Thank you very much for the information.


ktrapp profile image

ktrapp 3 years ago from Illinois Author

You're very welcome Alicia. Adding your own custom favicon to Blogger/Blogspot is really simple. I went through the steps myself just to verify the process and it was really simple to do.


cclitgirl profile image

cclitgirl 3 years ago from Western NC

Great hub! I love the favicon idea and I'll have to bookmark and try this out soon. I have a wordpress.org site and really need to put some of these on there. Thanks! :)


ktrapp profile image

ktrapp 3 years ago from Illinois Author

Thanks cclitgirl. Using your own favicon instead of the default Wordpress favicon will make your site standout more. Let me know if you have any questions when you change it.


mperrottet profile image

mperrottet 3 years ago from Pennsauken, NJ

Really great, detailed info. I may try this on my blogger blog. I'm going to bookmark this for future reference - voted up and useful!


ktrapp profile image

ktrapp 3 years ago from Illinois Author

Definitely give it a try mperrottet. Your blog will stand out from all the others that have that orange icon :)


FSlovenec profile image

FSlovenec 3 years ago from San Francisco, CA

Well done..there is so much to learn. To have explained simply to understand and put into use is amazing..thanks


ktrapp profile image

ktrapp 3 years ago from Illinois Author

Thanks Frank. There does seem like a lot to learn or at least always new things to learn like adding a favicon. But all these tools certainly make it so the small website owners can still have a big presence!


RTalloni profile image

RTalloni 3 years ago from the short journey

Thank you so much--a very nice gift to people like me. :) Definitely planning to return to this info.


ktrapp profile image

ktrapp 3 years ago from Illinois Author

Thanks RTalloni. If you have any questions about adding a favicon to a blog or website, feel free to ask. I'm glad to help.


Handicapped Chef profile image

Handicapped Chef 3 years ago from Radcliff Ky

This is really great not that great with computers would love to t it done could you help out.


ktrapp profile image

ktrapp 3 years ago from Illinois Author

H.C. From what I can see it looks like you use Blogger. Just make a 16x16 pixel image. Your avatar here really is too complex for an image that small. Perhaps you could make a blue square using the same blue as your logo and then put a white or gray H and C in it using the same font as your logo. The directions for adding it to Blogger are above and actually Blogger makes it an easy task.. Let me know here if you have any questions when you get to that point.


rajan jolly profile image

rajan jolly 3 years ago from From Mumbai, presently in Jalandhar,INDIA.

Very useful and innovative idea. Bookmarking for studying it and trying it out later. Thanks .


ktrapp profile image

ktrapp 3 years ago from Illinois Author

rajan jolly - I'm glad you found this tutorial on adding a favicon useful to bookmark. Thanks.


easylearningweb profile image

easylearningweb 3 years ago

Well written hub and quite useful! I have always loved favicons and agree that they are very useful media tool.

Voted this hub up and useful!


ktrapp profile image

ktrapp 3 years ago from Illinois Author

Thank you easylearningweb. Favicons are probably the smallest media tool, but they sure make it easy to quickly locate a bookmark or return to a site on another browser tab - instant recognition.


farmloft profile image

farmloft 3 years ago from Michigan

Branding.

I like it.

Up and bookmarked.


ktrapp profile image

ktrapp 3 years ago from Illinois Author

Thanks farmloft - Every little bit of branding helps, and the favicon is definitely little.


vespawoolf profile image

vespawoolf 3 years ago from Peru, South America

Before reading this, I didn't even know what a favicon was! Now I think I can't live without one. : ) Thanks for these helpful instructions.


ktrapp profile image

ktrapp 3 years ago from Illinois Author

Vespa - Your comment made me laugh. Glad to have been able to teach you something new. If you go to your HP profile page and look at your browser tabs, you will see that you actually have a favicon for HP.


MissJamieD profile image

MissJamieD 3 years ago from Minnes-O-ta

I love this, thank you so much for sharing this information. I knew a little bit about adding icons but I've been hearing the term Favicon lately and you defined it superbly:)


ktrapp profile image

ktrapp 3 years ago from Illinois Author

MissJamieD - I think more and more people are becoming familiar with favicons, especially when they have their own website or blog and try to figure out how to get a little version of their logo to appear in browser tabs. Thanks for your comment; I'm more than happy to share any knowledge I have that might help others.


molometer profile image

molometer 3 years ago

What a great idea to support our own branding efforts.

Well written and explained Kristin, I learned a great deal from this hub.

I liked your Gurnee website too. Lot's of useful offers and information.

I think I will have to get creative and come up with a Favicon for myself too.


ktrapp profile image

ktrapp 3 years ago from Illinois Author

I'm happy to have helped you out, molometer. I think a favicon is a simple way to help brand one's blog, among other measures. And thanks for checking out my Gurnee site; I'm glad you like it. Writing online here has definitely helped me with my more locally-focused content on that website.


sharingknowledge profile image

sharingknowledge 3 years ago from Miami, FL

All I used to know was creating a favicon and installing it on blogger through the layout but through this hub, I just found an alternative for that. Thank you.


ktrapp profile image

ktrapp 3 years ago from Illinois Author

Glad I could show you another way to add a favicon, sharingknowledge.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working