How to Get an Image for the Title on Tumblr

By David Wayne

Customize your Tumblr theme to match your blog.
i Siri Stafford/Digital Vision/Getty Images

Tumblr provides a free microblogging platform for sharing multimedia content, supporting the creation of multiple public or private blog pages and the design of custom page layouts. Many Tumblr themes include a button for uploading a header image, but even themes without this button can be edited from the built-in HTML editor. Header images must be hosted on a Web server and referenced by a small line of HTML code, and Tumblr provides a free image hosting service for this purpose.

Visit Tumblr and sign in to your account. Click the “Gear” icon and choose the blog you want to edit. In the Theme section, click “Customize.”

Click “Upload” next to Header Image in the Appearance section, if your theme offers this option. Locate a file on your computer and click “Upload” to set the image as your blog's title. Image files can be in any format but must be less than 5MB.

Visit the file upload page on Tumblr if your theme doesn't include an upload button (link in Resources). This page is strictly reserved for Tumblr theme assets, and uploading any other type of file can result in your account being banned. Click “Choose File” and locate the image file on your computer, then click “Upload.”

Copy the file's URL from the text box that is displayed when the file is uploaded. Paste the copied text into a blank text file to save it for the next step or simply keep it stored in the clipboard. Alternatively, leave the file upload page open in a separate browser tab while editing your Tumblr theme.

Return to your blog's Customize page and click “Edit HTML.” Press “Ctrl-F” to open the Find and Replace window, then type “<a href="/">{Title}</a>” (without the outer quotes) in the Find box. Within the body of HTML <a> tag, select the curly braces and the word “Title” they surround and replace the selection with the following line of code:

<img src=“File URL”>

Substitute the URL you copied in the previous step for File URL, ensuring that the URL is enclosed in quotes and the entire line of code is enclosed in angle brackets. For example, if your URL is "," insert the following line of code within the HTML <a> tag:

<img src=“”>

Click “Update Preview” to view your header image. Save your changes by clicking “Save.” Return to your account page by clicking “Exit” and view your updated blog page by selecting the blog from your main account menu.


If your header image is too large, it won't display correctly when your blog is viewed. Most browser windows take up about 1,000 pixels horizontally, so choose an image no more than three-fourths that width and 200 pixels tall.