Creating Memorable Icons, Logos and Favicons

The importance of good branding can’t be overstated. Something as simple as your company logo can make the difference between being forgotten, turned down for a more recognizable competitor or ultimately accepted.

There are many ways to give your company more identity, like using a catchy jingle or slogan. But some of the most important aspects of branding are the visual ones: your logos, favicons, and icons – the graphics that appear on your website.

Logo used in social media.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

How to Design Unforgettable Icons

The #1 rule for designing website graphics is simplicity. Geometric shapes are common. This rule can occasionally be broken, but generally, you want something so simple a child could draw it.

Bright and flat colors, with no more than cartoon shading or a gradient, are optimal. That’s if you use colors at all; many logos are simply black and white. In any case, avoid using more than three, and have a distinguishable silhouette.

Use a program like Photoshop or GIMP, and never forget the transparent background! There’s nothing more unprofessional-looking than a favicon with a white background.

Logo

Your logo is the face of your company, the piece of art that represents your organization. It will be on your website, advertisements, videos and even social media avatars.

There are many kinds of logos and ways to present them. Image-only logos, or wordmarks made entirely of text, are popular. You could combine the two, or create an icon with a short tagline. Whether you go for some or all of these ideas remember the tips we previously mentioned: bright colors and simple shapes are best.

Match your logo to your site’s theme. If you have a minimalist white website, striking colors like red contrast well, while purple backgrounds will look best with an orange logo. Reinforce your palette by using its colors on buttons, bars and anywhere else that’s fitting.

Logo Collage

Icon

Icons are small-to-medium sized images commonly used by software developers or as a logo variation.

Desktop and app icons are often more complex, using pictures of mascots, objects, or emblems from the application. Using only simple letters or shapes is uncommon, so you may need to create something new, even if it’s just a shaded version of your logo.

However, similar rules apply. Don’t make the icon too complex or it will be hard to see. It should stand out clearly against even the busiest of wallpapers. Cartoon shading is still best; bright, flat colors contrast well against varying backgrounds.

If you’re using an icon as a button or smaller alternative to your logo, follow similar steps to creating the original. The two should be linked together. Google’s icon, a “G” using the colors of the main logo, is a great example.

Icons

Favicon

The tiny image in the corner of your browser tab is a favicon – used to identify a website. They’re the easiest to create, being small and frequently a recycled design. But don’t be lazy! If you downsize your logo, you’ll have a blurry mess. Recreate it from scratch, or at least make sure it’s the right shape with no artifacts.

There’s generally only room for a letter or two in your favicon. If you just have a wordmark, use an image or only the first few letters. Remember, in a bookmarked list, your favicon should clearly convey which website is yours.

Instagram on a mobile phone

Capture Visitors with a Striking Logo

By now, you should understand the importance of branding and have a better idea of how to design timeless graphics. Since logos and icons are often small and simple, even non-artists and individuals shouldn’t have trouble making their own.

But if you do struggle, consider hiring a professional. It might be pricey, but it’s better than nothing at all. Otherwise, there are many logo and favicon generators out there. If you’re not sure where to begin, these tools can get you started.