How To Add Or Change The Favicon For Your Tumblr Blog

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.

tumblr customize theme to add favicon demo

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.
    tumblr customize theme how to add favicon
  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>
    tumblr customize theme to add favicon html 1
  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!

What Next?

Recent Articles

6 Responses to "How To Add Or Change The Favicon For Your Tumblr Blog"

  1. Sandipan says:

    Thanks my friend for the share.

  2. cool Tricks bro I alredy done it right here ryanabsar.info

  3. talz says:

    it didnt work ): check from my tumblr

  4. Jack-Defrost says:

    It didn’t work :( I guess it has something to do with my theme, but I’ve seen other people with this theme that found some way to change it, I just really wish I knew how… I really don’t like the default favicon that came with the theme…

  5. J O says:

    Doesn’t work for me either – any way to tell if this is just a limitation of a specific theme?

Leave a Reply

Submit Comment