How To Add a Favicon To Tumblr


Even though most tumblr themes automatically insert favicons made from your profile picture, sometimes you just want to add a favicon to your tumblr blog that is different from your avatar photo, even getting a simple code to put an animated gif as a favicon is actually possible !!.

Just in case you have no idea what I’m talking about, check the screenshot below to find out what a favicon is.

To create, customize and then add a picture as a favicon on tumblr is a simple process. Follow the tutorial below.



How To Create, Customize and Add a Favicon To Tumblr

  1. First of all, we’ll check whether your tumblr theme has the favicon code necessary to display it.
  2. Go To Customize Appereance >> Edit HTML and with Ctrl+F look for the word “Favicon”
  3. This is the exact piece of code you need to find within your HTML:

  4. <link rel="shortcut icon" href="{Favicon}" />


  5. If the tumblr favicon code mentioned above is nowhere to be found, please copy the code snippet and paste it right after the <head> tag
  6. If indeed the code is there, but you want to modify, or completely change the tumblr favicon you already have, then pick any picture or gif of your choice and visit the following site in order to create a favicon from it. Download the file, it should always have the .ico extension
  7. Now, upload the favicon image you just created to tumblr static uploader. Get the tumblr favicon url (it must end with the .ico extension)
  8. Now, go back to the code snippet we first searched and replace {Favicon} with the URL you just got. Example below

  9. <link rel="icon" href="http://static.tumblr.com/p345vtm/a36mthfbn37/tumblr_li4259an1qzyxv8o1.ico"/>


  10. Update preview >> Save >> Close.
  11. Clear your browser cache and cookies, wait a couple of minutes and visit your tumblr blog, you should see your favicon being displayed correctly.


It’s not mandatory that you use a .ico extension to get a favicon for your tumblr account,it can also be a jpeg or PNG, but it should not be bigger than 16×16 pixels.


How To Insert a Favicon on Tumblr

Chrome Browser Displaying a Favicon on a Tumblr Blog

2 Responses to "How To Add a Favicon To Tumblr"

Add Comment
  1. Taryn

    August 23, 2012 at 2:43 am

    I did all of this and it still hasn’t uploadedd. I’m so confused

    [Reply]

  2. Aei

    January 3, 2013 at 4:25 am

    The latest Google Chrome browser doesn’t seem to need cache and cookie clearing.

    [Reply]

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>