Do you ever find yourself scrolling through the internet, just waiting for that one little icon to catch your eye? You can’t help it. It’s what you’re conditioned to do as a human being. We are drawn in by color, shape, and movement — anything that stands out from the rest of the content on your screen.
That is why icons are so important for businesses trying to make an impact online — they have the power to be seen at first glance.
Icons can take up a lot of space on a website, which is why many designers have taken it upon themselves to create custom featured icons for their websites. Let’s jump into the process of how to create a featured icon for your website.
To learn more about website personalization, visit Viafoura.
Decide what you want your feature icon to symbolize
Good icons are simple. They should be easy to understand and easily recognizable at a small size, as well as a large size. The first step is deciding what you want your icon to symbolize.
If you’re not sure, it’s helpful to do some basic brainstorming with yourself or your team members about how users might navigate your site. What would they expect from each section? Do they need help finding something on the website?
Are there certain pages that are more important than others? This will give you an idea of which sections may require a featured icon to make them stand out from other areas of your design.
The second step is deciding what the icon should look like. The visual style of your icons will depend on many factors, such as:
- Your brand’s personality and overall design aesthetic
- How you want users to feel when they visit your site
- The type of website you have (eCommerce, creative portfolio, blog, etc.)
Once you’ve decided these things, it becomes easier to narrow down a style for your new feature icon.
Choose a color scheme and an image that is the appropriate size for the task
The next step is deciding what colors to use for your icon. If the color scheme of your design has already been decided, then pick an accent color or include both your brand’s main colors together. If there are no specific restrictions on the type of image that should be used in a featured icon, it’s best to choose something simple and unique.
The most important thing about any good website is its content, so make sure the image you choose will not distract from this area of focus. To add to this, keep in mind that the image you choose should be something easily relatable to your site’s focus or theme.
When choosing an image, it is also important to consider what file format will work best for your website and blog post content. For example, if you use HTML code on a web page, then .png files would be the most compatible choice because they support transparency, while GIFs do not.
Create a simple shape
Once you have decided what file format to use, the next step is creating a simple shape in Photoshop or Illustrator so it can be easily resized.
Open your main image editing software of choice and create an appropriate-sized circle, square, triangle, etc., with some text inside. For this example, we will go ahead and choose the most popular option for featured icons among website designers: .png files that are transparent squares with white text.
With our background now set up on one layer of the workspace (the same size as our chosen icon), let’s switch over to another blank layer, where we’ll place each feature individually using Photoshop or illustrative tools, like brushes or custom shapes. Please make sure not to overlap any features (one feature per layer) and that each feature is on its separate layer.
Add transparency so that it blends into whatever background you put it on
For each feature, make sure to add transparent background to blend into any background you place it on. In Photoshop or Illustrator, this is easy: just right-click the layer and select “Layer from Background.”
There may be an option under the Layer menu for converting a normal layer into a “Transparent Layer,” which would achieve similar results in other image editing software.
With all of your layers complete, now go ahead save your icon as either a .png or SVG file, then move on to uploading it.
Moreover, adding transparency will let you place it over any background color, so if the time comes to redesign your website or blog with a new color scheme, you can use your icons without having to modify them.
Make sure the icon theme matches your company
In addition, make sure that the theme of your icon matches the content on your website or blog. For example, if you have a business about selling cars and one day decide to include information about motorcycles as well, it would be best to change your icons accordingly, so people do not get confused when they see an unfamiliar image by mistake.
Suppose someone expects to read information about car sales and come across pictures of motorcycles instead; in that case, this could reflect poorly on their perception of both yourself and your company’s products.
So pick icons that match what you put out there today and tomorrow for maximum effect. To achieve this, simply find icons with similar themes to what you’re looking for, and then add them. Again, you can quickly change the color scheme of your icons to match whatever content you’re writing about.
Whether writing about email marketing or web hosting, make sure your website looks consistent by using the same color scheme and content icons. Choose an icon theme that matches what you’re posting today and tomorrow for maximum effect! Featured icons can be tricky, so make sure you get what is best for your business.