Most of you already know what a favicon is, but in case you didn’t, it is the small icon that shows up in your browsers address bar in front of your blog / website address. For personal as well as business branding, it is important to have the proper favicon appear in the browser address bar whenever someone visits your blog or website.

Today, I will show you easy ways to update the favicon for your tumblog.

Using the Profile Portrait Photo to Indirectly Generate the Favicon

If you have updated your tumblr profile photo, then you should already see your profile photo as the favicon also in the address bar. If you haven’t, then update your profile photo by following the instructions here.

Once you have a profile portrait photo in your tumblr profile, you should automatically see the favicon in the address bar.

If you don’t see your favicon even after updating your profile photo, then it is very likely that your active tumblr theme does not have the line of code to display it.

To update your theme to show your profile photo as the favicon, do the following.

1. Logon to your tumblr blog and click Customize in your blog dashboard.
2. Now click Theme.
3. Then click the “Use Custom HTML” button.
   
4. This will show you the Theme’s HTML code. Don’t panic!
5. Search for the end of the title tag, i.e. search for </title>
   
6. Once you locate it, press enter, and paste the following line of code as-is below it.
   <link rel="icon" href="{Favicon}"/>
7. Click Save & Close.
8. Now refresh your page.

You should see the favicon in the address bar. If you don’t see it immediately, empty your browser cache and try again.

Using a Photo other Than your Profile Portrait Photo to Generate the Favicon

If you don’t want your profile photo to be the favicon, you can still easily change your favicon to any other image of your choice as follows.

Select a favicon photo from your photo collection or logo, and generate a favicon image from it using any of the free online favicon generator sites. My favorite is this one.

Download / Save the favicon.ico file that you create. The file does not necessarily have to have a .ICO extension. You can use JPG or PNG also. Make sure the filesize is not too big, because this image will be downloaded for every 1st request from a 1st time visitor. Now follow the instruction below in sequence.

1. Logon to your tumblr blog and click Customize in your blog dashboard.
2. Now click Theme.
3. Then click the “Use Custom HTML” button.
4. Search for the end of the title tag, i.e. search for </title>
5. Once you locate it, press enter, and paste the following line of code(after replacing the url part i.e. http://somesite.com/yourfavicon.ico with the location of your favicon image file.
   <link rel="icon" href="http://somesite.com/yourfavicon.ico"/>
6. Click Save & Close.
7. Now refresh your page.

You should see the favicon in the address bar. If you don’t see it immediately, empty your browser cache and try again.

That’s it!