So, whenever you visit a website, you may notice this little icon in the browser tab. So, what is this Icon? Yes, this icon is known as favicon and in this video, we learn how to add favicon in your website. So, let’s start hello, guys you’re watching technical bench YouTube channel, and I am Kunal in this video. We learn how to add favicon in your website so before adding the favicon in our website. First, we need to know what favicon is and what is the purpose of adding the fab icon in your website.
So, favicon is the little icon which is show in the browser tab. When you open a website, it is also known as favorite icon, tab, icon, website, icon, URL, icon or bookmark icon, while it is, do not have any specific function in our website, but it is useful for your website.
Branding, usually the fav icon is the logo of the company. What is the benefit of adding favicon in your website, so it’s made your website more profession, looking it is show in the bookmark, and if someone opened many tabs, they only see this icon so that it is very useful to identify your website amongst other sites. So the favicon is mostly has a size of 16 by 16 or 32 by 32 pixels, but nowadays, website are not only visited by desktop, but in many devices, so it is recommended to add more than one size favicon, for example, if someone and your website as A shortcut icon on their desktop, if it size, is too small, then the image is pixelated, so favicon support different image formats, such as PNG, gif, ICO, etc.
Even you used a 16 by 16 favicon in your website. This just worked fine, but yes, if you do not compromise at all and you really need that your favicon is displaying all browser on different operating system or even different devices like tablet, smartphone, etc. So, you need to create favicon with different sizes. So, we learn. What is favicon and why we use favicon in our website, but the point is that how to add favicon in our website, so you can create your fav icon yourself in software like Photoshop or you can use some old line, favicon generator tools to generate favicon.
You just only need a image that you want to add as a favicon, so in this video we add favicon using online favicon generator tools, so there are many such tool available on the net, so we open our browser and search for favicon generator. So, you can use any favicon generator tool, but I use this one, so the website is realfavicongenerator.net so as they mention on the website, select your fav icon picture. So, you upload a picture having file format, PNG, jpg or SVG saw your picture must be At least 70 into 70. So, we select our favicon picture. So, I select this logo so as they specify the favicon generator favicon for the iOS. So, if you pin your site on the home screen, it is look like this.
You can also add a margin, and a plain backer found, by check this radio button and your Android device. Your favicon looks like this one, okay and you can also add a margin and a plain background and change the background color from here. Okay, so this is it look on the window device even change. The background on dark orange is good and in the Mac OS in Safari, the favicon looks like this so generate a fav icon. You click on this, generate your fav icon and HTML code. So you click on this button. Your favicon code is generated so first they say download your package, so they give you a zip file of your favicon, so we download this favicon package and extract this file.
So, as you can see, they generate fav icon in different sizes. Second extract the package.
Okay, we extract the package already and insert the following code in the head section of your pages, so we copy this code, ctrl C and open the favicon.html file and we paste the code inside the head tag. One thing note here is that in the href attribute, you need to specify the path of your favicon, because my fav icon is in the same folder in which this favicon Html file, my fav icon, is the same folder in which this favicon dot HTML files, so I only specify the name of the file.
Ok, so if your fare icon is in some other folder, so you need to specify your complete part in the as offense attribute. So now we save the file and open this file. So, as you can see, our favicon is displayed in the browser. So in this video we learn how to add fav icon in our website. If you have any query, write in the comment section and if you like this video click on the like button and do not forget to subscribe this channel, thank you very much.
The All-New Click Generator
https://warriorplus.com/o2/a/q5fcpbq/0
Accidental SEO | AI Magic Studio | EasyTrafficBot/a> |
|---|---|---|
Discover more from Éxito Online
Subscribe to get the latest posts sent to your email.
Jose
