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 is favicon 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 its make your website more
profession looking it is show in the bookmark and if someone opened many tab
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 ol 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 in the
website select your fav icon picture so you upload a picture having file format
PNG jpg or SVG saw your picture must be Atleast 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 backgr ound by check this radio
button and your Android device your favicon look 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 look
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




Không có nhận xét nào:
Đăng nhận xét