• News

Create And Use Favicons For Your Website


A favicon (/fv.kn/; short for favorite icon) is a file containing one or more tiny icons connected with a certain website or web page. It is also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon.

A web designer can build such an icon and upload it to a website (or web page) in a variety of ways, after which graphical web browsers will utilize it. A page's favicon is normally shown in the browser's address bar (and occasionally in the history) and next to the page's name in a list of bookmarks in browsers that support favicons. A page's favicon is generally shown next to the page's title on a tabbed document interface, and site-specific browsers utilize the favicon as a desktop icon.

What Is Favicon Used For

A favicon is a visual image (icon) that is connected with a certain Web page or site. In the address bar or in tabs, several contemporary user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the Web site identification.

How To Add Favicon To Your Website

You'll need a picture and a way to declare that the image is to be used as a favicon to add a favicon to your website.

The rel property value "icon" is used to indicate a favicon, and the value is defined via a profile; profiles are covered in greater depth below. The favicon in this HTML 4.01 example is recognised as a favicon by the URI http://example.com/myicon.png.

A second approach for defining a favicon relies on the picture being identified by a preset URI: "/favicon," which is relative to the server root. Because some browsers have been designed to check for favicons using that URI, this approach works.

Nine popular favicons of websites like google, youtube, instagram, facebook, and yahoo etc.
Nine popular favicons of websites like google, youtube, instagram, facebook, and yahoo etc.

How To Create A Favicon

A favicon image can be created with an image editor such as Fireworks, Photoshop, Corel Paint, or a free, open-source alternative such as GIMP. Many organisations just utilise their corporate logo to maintain a consistent brand identity.

Start with a 64 by 64 pixel square to make it easier to edit, and then scale it down to 16 x 16 pixels afterwards. After that, save the file as a.jpg,.png,.gif,.bmp, or.tif.

Once you're satisfied with the picture, save it as favicon.ico. Most web browsers accept this format as the preferred one.

You may need to utilise an internet application like iconifier.net, prodraw.net, or faviconer.com to convert your file to the.ico format.

There are several options accessible. You may then download your fresh new.ico file after uploading your image and selecting the icon size. The.ico file should be placed in your website's root directory. When you navigate to www.yoursite.co.uk/favicon.ico, the picture should appear.

What Is The Best Size For Favicon

The most typical size for a favicon is 16x16 pixels, which is the most suitable size for making one. They can, however, arise in bigger sizes on occasion (such as 32x32 pixels).

Making a favicon for your company is a quick and easy approach to strengthen your online identity. It may improve the user experience and the image of your firm for little or no additional expense.

Share: Twitter|Facebook|Linkedin

Featured Articles

Recent Articles