Habitually Good

Here’s a trick that doesn’t always work (but has worked for me many a times). Not sure how useful it will be for you, since its a stupid trick at best (sometimes stupid works). Often times I find myself trying to get the logo of a company or a blog. I may need it for a blog post, or for a presentation, or any other reason. Typically, this would be available on their webpage somewhere.

There are many ways to go about doing this:

• I can simply try to right-click the logo on the webpage and try to save the file or copy the image from my browser. If this works, then we are done (but it doesn’t work a lot of times, see below for why).
• If the above doesn’t work, I could try and take a screenshot of the webpage and try to get the logo that way. This is a problem is the logo is on a colored background (or worse a shaded background). Because then you get the color in the screenshot as well, and you need some skill with Photoshop to resolve this situation – in any case this is too time consuming.

So, how do we do this?

Well, first let me explain why you are not able to right-click and save the logo. The reason is that a lot of websites embed the logo into the webpage through a CSS attribute instead of a direct image tag.

To be able to find the logo, you need to be able to read the CSS of the website. This can be quite tricky at times. The long method is:

• View the HTML source of the page – decipher it so that you can locate the element where the logo is being displayed.
• Then locate the CSS class which has been applied to that element.
• Now locate the URL to the CSS file in the html page.
• Download the CSS file, and locate the CSS class to find the URL to the logo.

Good luck doing all that. Luckily, you don’t have to. Most modern browsers have features which can ease your task. Let me show you how you can do the above in Chrome (the browser that I use).

For an example, we will take my blog (which has the same problem – you can’t easily download the logo).

Step 1: Right click the logo image and choose the Inspect Element menu option (as shown below):

This launches the Inspector window in Chrome which shows you the HTML structure of the page (and automatically highlights the element that you right-clicked on in the HTML pane. Further more, for the highlighted element it shows you the CSS styles which have been applied on that element. Yup, we got it.

Here’s what it looks like (click the image to enlarge):

As you can see in the image, there is a background attribute applied on the element which contains the URL of the logo.

Step 2: Copy URL and paste it in the browser window and press enter

That’s it, you are done! As I said, its a stupid trick, but sometimes it works.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.