How to insert HTML code into your postach.io blog to display a favourites icon.
If you have a postach.io blog, you are probably already familiar with bits of the HTML (source) code. You may have wondered how to make the icon on the top of your browser tab your own, instead of postach.io's very nice green and yellow pistachio nut. It's actually very easy - it's just one small line of code.
But first you will need two things. You will need to have an icon of your own, and you'll need somewhere to store it. You should be able to overcome both these problems by following these instructions.
Choosing your icon.
There are three options open to find a nice icon. You can search the web for 'fav.ico' files. If you find one you like, be sure it's not owned by someone else before you steal it. Another option is to create one yourself. I found this handy resource for creating icons. If you want your branding to be unique, you should create your own artwork. Your third option is to simply steal mine. I don't mind. I created this icon before the turn of the century (I like saying that), and it's used on all web-pages we publish where we have control of it. I'd be pleased if I ever saw it pop up on someone else's blog. I still have the original, dated, artwork. The URL of my icon is http://home.iprimus.com.au/tyabblemons/fav.ico. If you put that address into your browser, it will download my icon, called 'fav.ico'.
In any case, at the end of this bit, you must have a file of your icon called 'fav.ico' - that is your raw icon ready to be hosted.
Hosting your icon.
I pondered this problem for a long time, and wondered how I could use image hosting services to just deal me out the raw icon with no strings attached. Then it dawned on me that my ISP also provides me with a small amount of personal web space. You've most likely got the same facilities with your account, along with your email and data allowance. This is the perfect place to stash your icon. Take a moment now to log into your ISP's account page and check out your personal web space. If they don't provide any, you might be able to negotiate for a small amount at minimal cost. You don't need to fork out for web hosting - that's why you have postach.io in the first place, isn't it?!
There is a section on your ISP's web-page for you to load files into your personal web space. Go and load your icon into the root directory. Now your icon will have a web address similar to mine - 'http://home.iprimus.com.au/tyabblemons/fav.ico', but of course with your address on it.
That's the hard part over with. If you get stuck here, leave a comment.
Changing your source code (HTML).
Don't look at me like that. You probably know more about HTML than I do. I just know small handful of neat tricks, and this is one of them. The fact that you are reading this leads me to believe that you are familiar with postach.io's source code anyway. But if you're not, don't be frightened.
The piece of code we are going to insert is just one short line. It will read:
Of course, you'll change [yourwebspace] to be the address of your personal webspace with the icon file in it. For example, to insert my icon, you will insert:
You can see here that your file, called 'fav.ico' is hosted at the address in the link. That's the important part. You can enter the address into your browser and be sure you see the right icon. (Your browser will try to download it.)
Depending on which theme you have chosen, your source code for postach.io will be different. But the head of your theme is probably much the same as mine is.
I've put a couple of important arrows on the above picture. The first arrow points to where I have inserted my line of code. Don't worry if it's not on line 66 like mine is - your code might vary. The important thing is that your line of code must be inserted before the closing
statement appears. It must be in the head of the HTML source code. With my theme, the author has left us plenty of room to modify code.
statement appears. It must be in the head of the HTML source code. With my theme, the author has left us plenty of room to modify code. To insert your line of code, copy it to the clipboard, and then put your cursor on the code and space down a couple of spaces to make room. Paste your code into the window where it should appear, and then hit 'Save', down the bottom.
You're done!
Your code should be changed immediately, so open your blog in a browser and see your handiwork. If it doesn't work, don't panic. Just go back over it until you find the glitch. I'm happy to help if you get really stuck - just leave me a comment on this post. I'm notified of comments and will respond as quickly as I can.
If the fertiliser hits the windmill, and you somehow make a mess of your code, you can reset it all to default by reloading your theme. Note that any other changes you have made to your code will also be lost.
Good luck!
If you found guide this helpful, please make my day and leave a comment. Thanks.
Brad Lemon
14th July, 2013.