As I’d imagine you already appreciate, all websites have a logo of some sort to give them an identity. This image status can be further enhanced if you give your website or blog a favicon. But exactly “what is a favicon image”, and why do you need one? Simply, a favicon will separate your website from all the other open tabs in a web browser and give your site a uniqueness all of its own. When multiple windows are open, each website can be identified by a small image icon that is in similar nature to your logo design. It’s to give your readers an easily identifiable brand to alert them to your site.
How Large Should a Favicon Be?
Typically, a favicon image size is 16px x 16px, which you’ll note is very small. It’s also advisable to upload a 32px x 32px and a 48px x 48px version which will be substituted when using various devices or alternate programs. The largest favicon you’ll require is 64px x 64px which will probably only be used for a reading list in Safari browsers. If you only upload a 16px x 16px favicon, you may have some visitors, where their browser is attempting to show a 32px x 32px favicon and will scale the 16px to make it larger. This is not favorable as your visitors will see a stretched favicon that will be pixelated, and not look as sharp as it should be.
Internet search browsers are starting to use favicons in various ways such as the following:
- Links Bar
- Address Bar
- Desktop Icon
For this reason, it’s advisable to have your favicon at least 64px x 64px and the the browsers scale the image down when necessary. More modern retina displays will require more preciseness for the sharpness of the favicon to appear as expected. Just another reason for the use of larger sizes.
Which Image Type Should a Favicon Be
Well, this is debatable, but most bloggers would probably be using a JPG or PNG file. However, it is possible to use a Microsoft ICO file which can store more than the one file size. Although the downside to the ICO files type, is that it doesn’t support transparency. Another option is a GIF file which will also work well. SVG files are another file type that can be used but it’s not supported in all browsers. My suggestion is a simple JPG file will do the trick nicely. Unless you want a transparent background on the image, then you’ll need to use a PNG. You can read about the difference in file types in this article, regarding where to find background images.
Where Can You Get a Favicon
I’d suggest you first need a logo which you can manipulate into a favicon. Logo’s can be created for you rather cheaply at Fiverr (and some contractors will make a favicon as part a set with a logo) or alternatively, make your own. There are many online websites that also allow you to make your own logo such as the following:
The problem I’ve found with many (not all) of these online logo websites is they mention that logos are free to create. Sure, they are free to create, but they cost to download! And you can’t just right click>save either, as they watermark the background. Another alternative is Canva which is free, and they have a range of logo templates. I’ve used Canva many times to create a logo. It’s simple to change text, colors and add elements to your logo. Once done you can easily download it, for free! Whilst you’re in Canva, make a copy of the logo and remove any text. You don’t want your favicon to be to busy or detailed. Keep in mind that the favicon is usually going to be viewed small, so you won’t see too much detail. The exception to this, is if your main branding is a letter, such as a ‘W’ for Wikipedia, ‘F’ for Facebook or ‘M’ for McDonalds. Otherwise, remove the text. Make sure the dimensions are square, then download it. Canva may not allow you to change the size of the image. If this is the case, take a screenshot of your logo and square in up in Windows Paint program. Then reduce the size to what I recommended earlier. Save all 3 sizes (or just the large size) and upload to your website. If you’d like to go down the ICO file route, you can create and upload your favicon sizes at X-icon Editor.
How to Get a Favicon Appear Correctly
There are several ways to have your favicon displayed in the search browsers. Many website themes will have an upload location in their Settings. So, this is simply browsing to the correct image in your Media library. Alternately, you could add this code to the <head> section of your HTML. <link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” /> You may find that some browsers may find your favicon if you store the image in the root directory. This isn’t really good practice though as all your media should be stored in the one location. As many new bloggers won’t know how to add this code, using a great theme like Divi will make things so much easier for you. Divi theme has an upload setting for a Logo and a separate upload setting for a favicon or site icon. Here’s a video showing how to add your logo and favicon if you have the Divi theme installed. If you don’t have the Divi theme and would like to see what it’s all about, click on the button under the video.
Tired of seeing Scams or endless fraud sites?
Promotion and marketing of your website and brand is critical in today’s ever-increasing online space. You require a brand that is going to not only be memorable but will resonate with your readers. Providing a favicon is only going to help with your online identity. Any website worth their weight will include a favicon image. Without one, your readers will be unable to quickly find your site among all the windows they have open. Not only this, your website will show more credibility should you make the effort to create a favicon. Favicons are easy to make, easy to upload and enhance your brand creation. Don’t leave home without one.
Like many people, I struggled in my early attempts to make money online. It's really frustrating when you try product after product, searching for that elusive opportunity that is really genuine.
Eventually though, I learned how to achieve success in the online world with my own website. This website was created to show others how to do it. I direct people away from the poor opportunities and advise the good ones.
But the simplest and least complicated is [Learn more...]
Disclosure: Links in this post may be to our affiliates; sales through affiliate links will not cost you any more. More info at my disclaimer page
The opinions in this article are solely mine, are are not intended to offend or discriminate. All information in this review has been researched on the public domain of the internet.