How to Find and Save Logos From Websites

Posted on Jun 5, 2011 in Web Design | 0 comments

Overview of Using Images From Other Sites

Perhaps you want to highlight a media appearance and want to use the source’s logo when you link to the article on their website. Or maybe you want to recommend another company and send them some business. One way or another, you would like to show their logo.

Why not just link to the existing image, instead of saving it and uploading it to your site? Because then you’re using their server’s bandwidth for your site. It’s considered to be very rude. In addition, they might change or delete the file on their servers, causing the image to no longer appear properly on your site. Make sure to save and upload the images you use.

Make sure to save and use image files from other websites ethically. Get permission when appropriate and never, ever, ever let people think an artist’s or designer’s artwork was your own.

Simple Image Save

This is the most straightforward. Right-click the image you want and click “Save Image As…” or click the image and drag it to your desktop or Windows Explorer to save it.

Google Image Search

Sometimes it can be a struggle to find the logo, or a good version of the logo. I frequently go to Google Image Search and search for the company–sometimes trying the search with the word “logo” and sometimes without. Often you’ll find a logo with better image quality or more suitable colors that you can save and use.

Examine the CSS

Sometimes you can see the image on a website, but can’t save it. Often this is when CSS is used to set the image as a background image for part of the page.
screenshot: using google chrome css inspector
You can view the HTML source of the page and try looking for the URL there, but it’s much easier if you use some tool to inspect the CSS. FireFox has Firebug; Google Chrome’s tool is built in. If you’re using Chrome, just right-click where you see the image and click “Inspect Element.” Then a new window will open, showing the HTML source code on the left, and all applicable CSS rules for that element on the right. Explore a little and you may notice that the element you’re looking at, or one near it, has a URL to an image in the CSS section… and when you click that link, you may jnust have found what you’re looking for.

Screenshot

Sometimes there is no easy way to get the actual image file. When all else fails, simply take a screenshot (on a PC, it’s as easy as pressing the “print screen”/”prtsc” key), paste it into your favorite image editor, and crop to the image you want to see.

The background isn’t conducive to what you want? It’s a black logo on a website with a black background, or there’s a gradient background that will be difficult to edit out? Use the Google Chrome “Inspect Element” tool to change the background color of the webpage, then take the screenshot. This way you can make sure the logo has the proper background color, or change it to a color that will be easy to select and replace with transparency in a graphic editor like GIMP.

Submit a Comment

Manage your comment subscriptions