You may have noticed that most professional websites have a little photo next to their name on the website’s tab. This address bar icon is called a favicon, and it adds professionalism and brand recognition to your page.
Favicons don’t just look cool and provide brand awareness, but they help users with multiple tabs open to know where to click. Your favicon can help them instantly find their way back to you.
It doesn’t take a lot of work to add the favicon, and you don’t need to be a Photoshop whiz or HTML master to add one. In fact, it can be done quickly, easily and simply.
Your company or site probably already has a logo that you want for your favicon. If not, you can use a logo maker to play around with colors and ideas. When you’ve got the perfect one, you can use it for your website’s branding materials.
Branding is very important for your site, and it’s important to create a recognizable logo before moving forward.
Although this article isn’t about logo creation, you can read about how to create a killer one for your brand here.
An address bar icon, or favicon, is perfectly square. they are usually 16×16, 32×32, 64×64 and 128×128. Many favicons also have transparent backgrounds, meaning the background is filtered out so that the icon is not the standard square and is devoid of extra white space.
You can create a favicon in most photo editing software suites. Simply transform your logo into a perfect square.
If you want your logo to be transparent, without a square white background, open a new transparent document in your photo editing software. Copy the logo without the background in your photo in your photo editing software and paste it into the transparent background.
Save the photo as and .png.
For those who may not be used to creating photos devoid of backgrounds, you may have to consult the user manual of your photo editing software. This is the only step that can get a bit tricky if you’re new to photo editing.
You can refer to the Internet and to websites that offer you step-by-step instructions on making a transparent logo.
Depending on your web host, there may be no additional steps for creating your address bar icon. Many web hosting sites will allow you to upload your favicon and will fill in the necessary HTML or CSS automatically.
If you are doing the HTML or CSS yourself, you will have to save your icon as a .ICO file. You can also use a Favicon Generator to morph your logo into a format ready to be integrated into your HTML or CSS.
As mentioned previously, if you are using a site or web host that automatically creates most of the HTML for you, you will likely be able to upload it directly to the website maker.
If you are doing your own code, upload your address bar icon photo to your server.
Then, after thetag on your HTML editor, insert the following code:
Place your address bar icon’s URL after the href=”. Make sure you don’t erase the end of the code, as it won’t work without the ” type=”image/x-icon” /> at the end.
Creating an address bar icon is really simple. You don’t need much expertise or know-how to fully complete your site’s branding.
You can visit us on our blog for more useful tips on web design and running a successful site.
Fraud is a real problem for online businesses, and it is getting trickier. From fake…
Quiet quitting is a growing concern that managers can't afford to ignore. It happens when…
Whether you're organizing a corporate summit, product launch, festival, or wedding, the difference between a…
Game developers often ask the same question when starting a new project: Which engine should…
By huge amounts, I mean thousands of pages. It may sound challenging, right? Even when…
Growing a business means dealing with more customers, managing more information, and attending more meetings,…