Favicon – What It is, How To Create & Add To Website

Favicon Create Add

A Definitive Guide To Favicon. Find out what it is and how you can create a favicon. Steps to add it to your website or blog are also given. In case, you did not get enough time to read the full article, here are the quick steps to create and add a favicon to your site.

  1. Create and design a Square Icon using any software or tool.
  2. Convert it into a supported file format. (Preferably .ico)
  3. Upload it to your website root directory with the filename as favicon.ico
  4. Add the link tag in the head section to define the favicon. Example, <link rel="shortcut icon" href="favicon.ico">
  5. Refresh your site page & you’re ready to show your new site icon!

What is a Favicon?

Favicon Example

Favicon is a tiny or short icon that appears in mostly left to the Post Title area near to the URL bar of the web browser. It is also known simply as the website icon and can also be identified by several other names such as Bookmark Icon, URL Icon, Tab Icon, etc.

Most of the popular web browsers support favicon to appear and the widely supported formats for favicon are ICO, PNG & GIF. Favicons are also used to save the webpage shortlinks as icons for the shortcut files.

Favicons first appeared in 1999 with the release of Microsoft’s Internet Explorer Version 5. Originally, these icons were used to save different websites in bookmarks with icons for better and easy identification. It was later on standardized by W3C.

Now, the favicons are widely used and different websites show up them in different places. The following screenshot is taken from Wikipedia and it tells about the most popular web browsers and how they use the favicon for different purposes.

Popular Browsers With Favicon Support

Further, the use of Favicons is very extensible. One great example is Macbook Pro Touch Bar using it for recognizing the different opened tabs in the Opera Web Browser.

Favicon Macbook Touch Bar
Image Source

Format, Size & Dimensions

Favicons are square icons and can be of different sizes such as 16×16, 32×32, 48×48, 64×64 or even 512×512. Similarly, the color-depth may vary, it could be 8-bit, 16-bit or 32-bit. Further, it depends on the file format you’re using. The following table, again taken from Wikipedia, show up the different formats and the supported web browsers.

Browsers & Supported Favicon Formats

Now, the question is what size of Favicon is ideal or what size you should use. Well, these days, there are so many different devices that make use of Favicons such as Smar TVs for displaying icons. So, it’s usually said that the bigger the better. Even while uploading Favicon to WordPress websites, it says the recommended size is 512×512.

WordPress Siteicon

How To Create A Favicon

Now, let’s find out how you can create a favicon for your website or blog. It’s really easy. You just have to design an image, more a logo kind of thing, keeping the fact in mind that it should be a square in size. Make sure the image is instantly recognizable and is good to go to represent your website or blog.

You can use any image editing software such as Adobe Photoshop (In case, you know well to use it) or you can simply use simple yet powerful software like Powerpoint to quickly create an icon for you. Wonder, how to create icons with powerpoint, here’s a tutorial. You can also use a website like Pixabay to find readymade icons. There are also a number of websites like Iconsflow to quickly create icons.

Best Practices

If you found an icon or ended up creating one which is not completely square, you can make it square using a resizing or image cropping tool, just makes sure it looks well. Try to keep the background of your favicon either transparent or simply white. The reason being you don’t actually know over what background color of web browser, the favicon may be displayed.

Most commonly, the chances are it will be displayed on a white background, but still, the user might have a dark theme of the browser or the interface may have several other colors. That’s why it is always recommended to use a transparent favicon. Some of the tips to create a favicon are highlighted below.

  • You can make use of already designed beautiful vectors & icons that are free to use.
  • Keep it unique and simple as it should represent your website.
  • Keep it matching to your actual site logo. (Think of it as a short logo of your site)
  • Favicon Generators like this one can be used.

How To Add Favicon To Your Website

Once you created a favicon, you can now proceed to add it to your website. Here I’ve divided the section into two parts. In the first part, I’ve given the generic steps to add the favicon to any generally-developed website and in the second part, I’ve given the guide to add the favicon to your WordPress website.

Steps To Add Favicon To Any Website

The steps to follow are given below.

  1. Preferably rename the icon file to favicon (Example, favicon.ico, favicon.png, etc.) But you can actually use any name, it is just a good practice because some legacy and old browsers could not find a favicon if it is not named as favicon.

Rename To Favicon

  1. Upload it to the root directory of your website.

Upload In Root Directory

Although, you can upload it in any directory yet same for the legacy reasons and different browsers support, preferably upload in the root directory.

  1. Add a link tag in the head section of the HTML of your site. This can be done in a number of ways as given below.
  • <link rel="shortcut icon" href="https://your-website.com/favicon.ico">
  • <link rel="icon" type="image/x-icon" href="https://your-website.com/image.ico">
  • <link rel="icon" type="image/svg+xml" href="https://example.com/image.svg">

Different Sizes Of Site Icons

In the above screenshot, you can see, there are different link tags for the same favicon but the sizes are different. There’s a cool reason behind it. The first icon is the normal one, which will be used by most of the web browsers, while the second one of the larger size of 192×192 will be used wherever a large icon will be required and the third one is a special icon for the Apple iOS devices such as for the iPhone Webpage Shortcuts.

Actually, this website is on WordPress, so it automatically generates all of these icon specific link tags. But if you’ve custom developed your site, you can add all of these in the head section of your site’s HTML. Make sure you add it to every single page of your site.

  1. Refresh to see your new favicon added to your site!

Adding Favicon in WordPress

The process of adding favicon in WordPress is made easy using Customizer and the steps for it are mentioned below.

  1. Log into your WordPress Dashboard and Go To Appearance and then Customize.

WordPress Customize Menu

2. Go to the Header option from the left sidebar options list and further go to Logo & Site Identity option. These options and their names may vary depending on the theme that you’ve installed.

3. Here, scroll down to the bottom and you’ll find the Site Icon option.

WordPress Upload Favicon

Simply click on the Select site icon area to upload your created favicon.

4. Once, the image will be upload, save the Customizer Settings by clicking on the Publish button and you’re ready to see your new favicon on each and every page of your WordPress website.

I hope you found this guide useful. If so do share it with others on social media and don’t forget to subscribe to WTMatter. If you’ve any questions feel free to ask in the comments section below.

Leave a Reply

Your email address will not be published. Required fields are marked *