The biggest mistake a website can make is not having that favicon.
Great content, professional design, smooth navigation, but a website without a favicon feels so incomplete. If you don’t want this to happen to your site then create a favicon now.
In this post, I am going to tell you everything about a favicon and how you can create a professional looking favicon for your website easily.
What is a Favicon?
A favicon is a 16 x 16-pixel icon appearing at the top of a web browser. Having a favicon on your site makes it easier for visitors to locate the webpage when multiple tabs are open. Also, it is great to brand your website.
Since favicon has a small size, so it works great as simple images or 1-3 characters of text. A favicon is a vital component of a website interface and plays a crucial role in all kinds of web applications.
History of Favicons:
Favicons are shortcut icons that appeared in the Internet Explorer 5. Here, including a favicon .ico icon in the root of a site would result in a 16-pixel square image to display next to URLs in the address bar as well as bookmark list without needing HTML.
On the initial basis, it served the advantage of measuring how many times your website is bookmarked. This can be done by counting the request for the favicon. But now, it is no more reliable as browsers have started supporting favicon for other advanced functionality too.
What is the Difference between Application Icons and Favicons?
Some people get confused between favicons and application icons. But there is a huge difference between the two!
Favicons are not meant to summarize any action or combat language barriers. Rather, their aim is to exhibit websites as signposts and enhance their branding on the browser. For this reason, favicons are always smaller versions of a website’s logo.
The good thing is that it is quite easy to create a favicon.
But before we move ahead to know the steps to create a favicon, first we must focus on some of the important aspects related to a favicon.
Let’s check them below.
What is the Importance of a Favicon?
The most important thing for you to understand is, a favicon does not affect the functionality of your website. It actually offers your website a more polished and professional look.
A website without a favicon appears unprofessional. And if you use a broken favicon then your site would appear broken.
Moreover, a favicon makes it much easier to bookmark the page your users need. It is because it is easier to search for a familiar favicon rather than searching all of it again. Hence, a favicon helps to enhance the user experience. For this reason, it has become a popular component of all kinds of browsers and modern websites in their browsing tabs.
Companies across the world have recognizable icons that help them stand out from their competitors. It is a highly useful tool for websites of all types and can help your target audience to find your website easily and faster.
Furthermore, a favicon can appear in different kinds of backgrounds. Hence, it can be displayed on Mac OS X UI, Windows Aero glass, or other browser themes.
What are the Desired Sizes for Favicon?
A favicon can be created for different uses, and hence, the sizes to create would depend on the functionality to serve.
16 pixels:
This is the standard size for a favicon and ideal for use in general browsers. A favicon of this size can be displayed easily in the tabs, address bar, and bookmark views.
24 pixels:
Such favicons are ideal to pin website in Internet Explorer 9
32 pixels:
Favicon of this size is ideal for new tab page in the Internet Explorer, Safari’s sidebar, and taskbar button in Windows 7+
57 pixels:
This size is ideal to create favicons for the standard iOS home screen, iPhone first generation to 3G, and iPod Touch
72 pixels:
Favicons of this size are ideal for iPad home screen icon
96 pixels:
This favicon size is used by the platform of Google TV
114 pixels:
It is double the size for retina display and is used for iPhone 4+ home screen
128 pixels:
It is used for Chrome Web Store
195 pixels:
This size is ideal for Opera Speed Dial
Based on the context, you can use a specific size to create a favicon. For example, a website for iOS and Mac Software Company will get benefit from numerous iPhone and iPad specific icons. On the other hand, an intranet website displayed on the Internet Explorer will get better results with a multi-resolution ICO format. An application created for the web and designed to be viewed on desktop and mobile would benefit from spending the time to create favicons of all such sizes.
What are the Desired Formats for Favicons?
In the initial times, the Windows ICO format was the only kind of file supported. And there were little timesaving tricks available on which we could depend. Earlier the hack of saving a favicon as 16 x 16 GIF and renaming it with a .ico file extension used to work well.
But presently, this trick does not work well and hence this method must not be used to create an ICO file. Hence, the other two formats support for favicon use are as follows:
- The ICO file format is still most extensively supported. This format can include multiple resolutions and bit-depths. This makes it highly useful on Windows. The format and size for favicon may vary for the Internet Explorer. The ICO format can offer this ease and is the only format that is identified without utilizing an element.
- The other convenient format is PNG. It is because it does not need any special tools to create this format. It supports alpha transparency and offers us the smallest file size. The limitation of this format is that it does not support Internet Explorer.
- The other format is animated GIF and GIF. The only benefit of this format is that it supports very old browsers.
- The JPG format is the best even if the image is a photo. It does not have such crispness as offered by the PNG format but it blends well at a small size.
- The SVG format is an excellent choice if you want to use your favicon on Opera.
- Also, there is APNG or animated PNG format available that is supported by Opera and Firefox. But its utility is questionable.
Tips to Consider While Designing a Favicon:
1. Design a Favicon as Per Look of Your Website:
Your favicon design must have a close resemblance to look of the website. The design must adhere to your business’s brand image and it must be easily memorable and recognizable to the crowd. It is because the favicon would be the first thing people will see when they first see tabs in a browser.
2. Go for a Transparent Background:
If you are unable to decide any background then fill it white. The transparent background takes the color of the user’s browser and looks more professional. Alternatively, you can go for a colored background that makes space for graphics or letters.
3. Your Favicon Must be Easy to Read:
Since a favicon is very small in size, so it is essential that you can stand out your brand with it without resulting in any confusion. For this purpose, your favicon must be easy to read. It must not create concerns in the visitor’s mind about the quality of the work you offer. Complex or overlapping favicons don’t look good.
4. Design an Aesthetically Pleasing Structure:
Your favicon structure is known as the form. Favicon can be of different forms like a square or circle. Make sure your favicon design fits well in one of these forms. In addition to this, it must have a well-balanced design that is attention-grabbing, easy to read, and aesthetically pleasing.
5. Use Colors Associated to the Brand:
Your favicon must have a size that is supported by most of the modern browsers. In addition to this, it must have a color that is cohesive to your website or brand. If the colors of your favicon do not sync well to the colors of your website, applications or logo, then people will find it difficult to relate to your brand and remember.
Steps to Create a Favicon:
Here are the simple steps to create a favicon:
1. Create a Favicon Using a Photo Editing Software:
It is best to use a photo editing software like Illustrator or Adobe Photoshop to create your favicon’s image. Using such software applications provide options to resize as well as export any image in a correct format.
There is some software available, which allow you to create favicon by hands. You can even check for special editing programs available to edit favicon design. Make sure you design your favicon in a size that is supported by most of the browsers.
2. Resize Your Favicon:
The 16 x 16 size is the ideal favicon size for most of the browsers. Once you create own favicon in a bigger size, the next steps are to reduce it to an appropriate size, which is the size people will see on their browsers. If the design is readable and pleasing then it is good to go, otherwise, you have to repeat step 1.
Consider all the platforms and browsers your website is likely going to use and create favicon to cover the bases.
3. Convert the File Extension to .ico file:
Now use a .ico converter and change the format of OWA(Outlook Web App) favicon in the desired format. Once the format is changed, save it. This will ensure that your favicon appears good across different platforms. You can use free of cost converters available online for this purpose.
Implementing / Exporting Your Favicon:
Once you have created your favicon, the last step is to export it to the desired browser.
1. Upload the Favicon if You Have Used a Website Editor:
Most of the website editors have a built-in form. This allows users to upload their favicon to their website automatically. Here, you need to look for alternatives like ‘add favicon’ or ‘upload favicon’ in the settings menu of your website.
2. Upload Your File to Your Website’s Root Directory:
This is useful for websites that support FTP or File Transfer Protocol. This can be used to upload a new favicon file to your index or root directory. If this option is unavailable, then you have to check upload image manually on web hosts page.
3. Add File to the Header:
Locate a suitable place where it is possible to access the CSS and PHP files for your website. Visit the site’s header.php file, edit the same. In the tag type,
/favicon.ico/>.
This must connect your website to the favicon. Since you use PHP, it implies that any websites that use the header file now have a similar favicon.
4. Refresh the Browser:
Once you have uploaded the favicon, it is time to refresh the browser to see the new image next to address bar. To visit an image of the type and updated favicon. ‘http://www.yourdomain.com/favicon.ico.’ If the favicon does not appear then you need to reset the browser cache. In order to clear the cache, check the browser’s settings, delete the Temporary Internet Files, History, and Cookies.
Conclusion:
The favicon is an important component of a website and your online business. Hence, it must be created in a similar style as that of a website. The more your favicon and website have in common, the better it is. Just remember, your favicon must be associated with the website so that your users are able to understand and associate it with your site.
If you truly want to create a personal brand, then take the approach of creating a favicon seriously!