What are Favicons and How to Use Them

What is your favorite Favicon?


A favicon is a small individual graphic of a website that is displayed next to the address bar. Depending on the browser, it also appears in the bookmarks / bookmarks in the bookmark toolbar and table bar or as a desktop shortcut. The name Favicon is a combination of the English words “favorite” and “icon”, which can be translated as “favorite symbol”. Microsoft introduced this innovation with Internet Explorer 4. Nowadays all browsers support favicons

Although the current browsers can also use the common graphic formats such as GIF and JPEG as favicon, David Parker, a web designer at paper help service, recommends to use the ICO format. This rather unknown format can hold a collection of graphics in different resolutions. The browser selects the size that it currently needs.

There is a large number of ready-made favicons on the Internet for your own website. If you want to create an individual favicon, you can use any favicon generator, which creates a favicon from every picture with just a few clicks and gives tips on how to integrate it. A nice favicon is part of a good web design.

After integrating the favicon, you can use any favicon validator to check the favicon you have integrated for errors. Both errors in the source text and errors in the path specification are recognized. In the next section you will find answers to frequently asked questions in connection with content management systems.

Introducing Favicons
Often users of content management systems (CMS) such as WordPress, Joomla or Drupal ask themselves how to integrate an individual favicon. In most cases, there is already a demo favicon that you just have to replace. Nevertheless, there are many questions that we will try to solve in the following text.



Paste Favicon in WordPress
WordPress is one of the systems that already have its own favicon in the software’s root directory. After the installation there is a favicon.ico file. This must be replaced by the new, individualized favicon.ico file. It often happens that the browser does not immediately replace the icon because icons are stored in the browser’s cache. A restart or clearing the cache of the browser will help in this case. If you use your own WordPress theme, it can happen that the code for integrating the favicon is not available in the source text. In this case, you have to copy the code for integrating the favicon into the area in the header.php file


HTML code
There are three different ways to include a favicon on your website. The reason why there are different possibilities is the different functionality of the web browser (e.g. Firefox, Internet Explorer, etc.).

HTML <link> icon
This variant is the official HTML standard of the W3C. It is possible to use different graphic formats (.ico, .png, .gif, .jpg, .svg). The corresponding MIME type and the address of the graphic must be specified. The different mime types are listed below.

<link rel="icon" type="image/png" href="icon.png" />

HTML <link> shortcut icon
However, a different variant must be used for Internet Explorer. Since the following type of integration is compatible with most browsers, it is recommended to use it.

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="icon.ico" />

favicon.ico in the Root Directory
With this variant, no HTML code is necessary, since the browser automatically searches for the “favicon.ico” file in the root directory, but no formats other than the ico format can be used. Since not all browsers support this technique, it is advisable to insert one of the above HTML codes into the source text. The root directory also called the main directory, base directory or “root” is the top level of the domain.


Mime Types

image / vnd.microsoft.icon
image / jpeg
image / gif
image / png
image / svg + xml


Insert Favicon in Joomla
Joomla also already has a demo favicon in the root directory that needs to be replaced. However, it should also be noted here that the favicon depends on the template and may also be located in the subdirectory of the template used. As a rule, no additional code has to be written in the source text, only the favicon has to be uploaded to the folder of the template


Insert Favicon in Drupal
Drupal has a little peculiarity when it comes to favicons. Most of the time, the favicon is not in the root directory of the CMS as usual, but in the main folder of the template. But it just has to be replaced here too.


Find the Path of the Favicon
Of course, every software and every website is different and can differ from the proposed solutions. Therefore, the favicon file may not be found immediately, although a favicon is displayed by the browser. In that case you can also use any validator to find the path of the favicon.


About the author
Hannah Butler works as a web developer and designer. Besides, she likes sharing her experience in the form of articles. In this case, she has her own section on writemypaper4me.co website. In the future she is going to start writing a blog in order to describe her working methods to others

Related Posts

© 2024 Online Computer Tips
Website by Anvil Zephyr