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.
Create Your Logo
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 have 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.
Making the Address Bar Icon Compatible for Upload
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.
Putting the Address Bar Icon on Your Site
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.
Your New Address Bar Icon
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.
