How to Create a Favicon
Stack Overflow Answer
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:
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:
<link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-96x96.png" sizes="96x96">
You can use .png for Favicons.
16x16: browser favicon
For browsers, create a 16x16 .png.
Create a .ico image 16x16 or 32x32 pixels.
In head element put:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
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.
To generate a .ico file, you can either use an online favicon generator, or there is a plugin for Photoshop.
All Content ©2020 WebRef.eu