How to Create a Favicon

Stack Overflow Answer
This Stack Overflow answer does a good job of telling you how to create favicons for websites and apps, using .png files.

Procedure to Add a Favicon to Your Website

Use your normal graphics program, e.g. Adobe Illustrator, to create a 16x16 .png image for the design you want.

Go to microsoft.com, and search for .ico using their site search. You should find a free .ico converter in the Microsoft Store. We found:

https://www.microsoft.com/en-gb/p/ico-converter/9phqg1bb4r8s?activetab=pivot:overviewtab

Use the .ico converter to convert your .png file to a .ico file.

Upload the .ico file to the root folder of your website.

Browsers such as Chrome will automatically detect the .ico file in your root folder, and should display it on the browser tab for every page of your website.

Other Background Info

A favicon, short for "favourite icon", is an icon for your website that appears next to your website's title on a browser tab.

The favicon was a feature of early Internet Explorer, and the favicon was displayed next to the website's name in the Favourites list.

File extension can be .ico (older format developed by Microsoft) or .png. I use .png because it can be prepared using standard graphics software.

Need a square image, size 16px x 16px.

Save it into your website's root folder as favicon.png.

Add a link into the head section of your web page:

HTML5 syntax for displaying favicons:

You can use .png for Favicons.

Important Sizes:

16x16: browser favicon
32x32: taskbar shortcut icon
96x96: desktop shortcut icon (and Google TV)

For browsers, create a 16x16 .png.

Such icon files can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.

Rough Notes

Create a .ico image 16x16 or 32x32 pixels.

In head element put:

favicon.cc to convert your image.

One Favicon For Entire Domain

If you only want one favicon for your entire domain, simply save the favicon.ico file to the root folder of your site. When uploaded, it must be accessible from http://www.yourdomain.com/favicon.ico . As soon as you upload the file, your browser should start displaying the icon for all pages on your site. If not, clear your browser cache and reload the page.

References

What is a Favicon

Everything You Need to Know About Favicons 2017

http://www.dwuser.com/education/content/quick-tip-adding-a-favicon-to-your-website/

To generate a .ico file, you can either use an online favicon generator, or there is a plugin for Photoshop.

Visit LowPrices.co.uk for Your UK Shopping

Compare Prices
at LowPrices.co.uk

Home / Site Map | Contact