Here is a short quiz for you:
The most recognizable part of your website is…
– Your website’s logo (dah, people always notice these huge letters in red when they open my website)
– Your website’s URL (of course, people remember that simple gotomywebsitepleasecauseitsuseful.com)
– Your website’s content (well, people look specifically for my website in Google and they certainly remember everything I’m writing about)
– Your website’s favicon (don’t know why; seems to be the easiest answer).
Let’s go step by step.
Your website’s logo is crucial for people’s recognition. You’re right when you think that those large letters are the first thing that draws people’s attention when they open your website. However, to actually see those letters, symbols, or pictures that make your logo, people need to actually go to your website.
Your website’s URL gets remembered only when people visit your website very often. For example, I visit designcontest.com so many times per day this URL pops up on every gadget I use. Still, I cannot say the same about the pizza delivery website I like or online clothes outlet I sometimes visit – I don’t know those URLs by heart.
Your website’s content is, probably, the toughest problem. It’s what keeps your website on the better positions in search engines, lures clients and explains what your company is all about. Nevertheless, your visitors need to look through your website to get to know what it is all about.
Finally, your website’s favicon. Surprisingly, it really is the most recognizable part of your website. Its main strength is that it’s always visible. Even if the website’s tab is open but a user is checking another website, a colorful sign at the corner of the tab doesn’t vanish anywhere. It can still attract people’s attention. Yet, there are some requirements your favicon design should meet. Let’s figure out, how to make your website icon even better.
Favicon or logo – what’s the catch
In general, your website’s favicon design doesn’t necessarily have to differ from your company’s logo. Still, you can have it changed a bit. For example, if your company’s logo contains the whole name of your business, you might want to shorten it for your favicon leaving only capital letters. If your company’s logo design contains a character, you may want to place only the character’s face on your favicon just to save the space and make the favicon clear and understandable.
Requirements to favicon design
Favicon Design Size
In most cases, favicon design sizes depend on your final purpose. As a rule, there are several favicon design sizes that can be used. However, there is only one size that matches any purpose.
16px favicon designs can be used in all browsers, address bars, tabs, or bookmark views. That’s why, if you’re thinking of a favicon design size, 16px is always a winning choice.
32px favicons should be supported as well when it comes to taskbar shortcut icons.
96px is suitable for desktop shortcut icons.
If you think that your website is going to be checked by iOS owners, keep in mind that 120px is displayed on iPhone Retina iOS 7, 180px  – iPhone 6 Plus iOS 8+, 152px – iPad Retina iOS 7, 167px – iPad Pro iOS 8+.
Remember, non-square pictures aren’t supported as well – you need to change the image if your logo is a round or an oval one.
Favicon Design Format
Your favicon design is going to be suitable for different browser tabs. In some cases, these tabs could be white, gray, or even black. Which is why you should consider making those favicon designs transparent. In this case, your favicon design needs to be in PNG format. If you use JPG, SVG, or GIF, you might fail in getting this icon reflected correctly in different web browsers.
How to use your favicon?
If you’ve already succeeded in getting the favicon designed for you, the only thing left to do would be to actually use it. That can be achieved in two easy steps. You’ll only need to have an access to your website root folder.
Firstly, upload your favicon file to your server. In order to do that, specify your browser address bar to your FFT server:Â ftp://[email protected]
Secondly, edit your HTML page and let other browsers find your favicon design. From your FTP server, download the “index.html†or “header.php†file. For plain HTML websites, insert the following code in the head of your index.html file: <link rel=”shortcut icon” type=”image/x-icon” href=”http://yourwebsite.com/favicon.ico“>
For WordPress website, insert another code:Â <link rel=”shortcut icon” type=”image/x-icon” href=”<?php bloginfo(‘url’) ?>/favicon.ico”>
Congrats! Your favicon design and installation are finished. Stay with DesignContest to find out more useful and interesting things. We have compiled this article based on our knowledge as well as WordPress Favicon guide.
