How to Replace Posterous' Default Favicon with Your Own Branded Version


It’s not really a secret that I have my own personal and somewhat creepy love affair with Posterous. I’m pretty much stunned each day that I don’t get some sort of restraining order from them in the mail, so, of course, I can only assume that the feelings are mutual. I even tried to get Posterous and WordPress drunk and make sweet little blogging babies, but alas, my plans were thwarted.

All that being said, I still maintain that if you run a WordPress blog there is no better companion than Posterous to handle your mobile publishing needs. If you want to share a quick photo, a gallery of photos, videos or even voice clips, Posterous does a wonderful job of not only posting them, but sharing them practically anywhere on the web you want to be seen, including your WordPress blog.

With dozens of themes to choose from and the ability to customize each of them you’re bound to find a look for your Posterous site that makes you happy. However, if you’re not very comfortable getting in and messing around in the code then something as basic as changing your favicon on your Posterous site can seem a bit daunting. The truth is, it’s actually a pretty simple tweak.

Find out how after the jump:

Locate your current favicon and identify the URL

First things first, you’re going to need to know where your current favicon (the one want to use on Posterous) resides. You’ll need the URL for that in order to make this work. If you don’t know off the top of your head don’t worry, it’s very simple to find. Just go to your WordPress site (or any site you’re using for that matter) and right-click on the homepage and choose “view source” (this works in any browser).

Towards the very top of the page you should see a bunch of lines of codes. You’re looking for the line that starts with “link rel=”Shortcut Icon“, it will look very similar to this:
< link rel="Shortcut Icon" href="https://jamespoling.files.wordpress.com/2010/12/favicons1.gifwp-content/themes/child/images/favicon.ico" type="image/x-icon" />

That’s the URL we need to make the change to our Posterous site. If for some reason you see that line of code and it’s a relative URL and all you see is:
< link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />

Don’t worry, 9 out of 10 times your favicon lives in your root directory so all you need to do is add your domain to the beginning of it creating “http://yourdomain.com/favicon.ico“.

Great, now that we’ve the located your favicon it’s time to hook it up over on Posterous.

How to change Posterous’ default Favicon

1) Log into your Posterous dashboard and highlight the site you want add your custom favicon to.

2) Once you’ve selected your site click on the settings tab on the top right.

3) In the third section down, “Look and Feel”, click on the Edit Theme button on the top right of that section.

4) You should three links on the left, click “Advanced” and you will see new copy come up with a link that says, “Enable advanced theming”, click that as well.

5) Once you’ve enabled advanced theming a dialogue box will popup with the name of your theme followed by (copy). You can leave this as default or change it to whatever you’d like. It’s only purpose is for clarification from the original theme in case you should ever decide to go back to it. Click OK to save the new copy of your theme that you’ll be editing.

6) Now you should see a text area with your theme’s code inside of it, a very tiny text area at that. On the far right you’ll see a new link that says “expand”, click that link to expand the text area so we can find the line of code we’re looking to replace.

7) The line of code we’re looking for is 13 lines down and looks like this:
< link rel="icon" href="/images/favicon.png" type="image/x-png" >

The only thing we’re going to do is change the URL inside the href tag. Remember that favicon URL we found earlier from your original site? We’re going to take that and plug it in here so the new code will look like this:
< link rel="icon" href="http://yourdomain.com/favicon.ico" type="image/x-png" >

Make sure you use the full URL to your favicon since it’s hosted in a different place a relative URL will not work. Once you’ve plugged in the URL that points to the favicon you want to use click the huge “Save, I’m Done” button at the very bottom-right and that’s it.

Now you’re rocking your new, custom favicon on your Posterous site. Enjoy!

If you run into any snags or have any questions feel free to leave them in the comments and I’ll help if I can.

Advertisements

3 thoughts on “How to Replace Posterous' Default Favicon with Your Own Branded Version

  1. Pingback: Tweets that mention How to Replace Posterous’ Default Favicon with Your Own Branded Version — James Poling -- Topsy.com

  2. Do you know if this is possible with all Posterous themes? I’m using Light Matter, but I can’t find the favicon code and if I put it in it just displays it as text at the very top of the page…

    Reply

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s