How to Upload Your Own Browser Tab Icon
Mar 04, 2022
Linas Fifty.
2min Read
How to Add together a Favicon to Your Website
Yous might come beyond the term favicon when it comes to website creation and development. Just what is it exactly? Well, in this article, we'll be answering your question and showing you how to add together a favicon to your website. Permit's go started!
Download eBook: Build Your First Website in 9 Piece of cake Steps
What is a Favicon, and Why is Information technology Important?
Simply put, a favicon is your website logo that appears next to the meta title on your browser tab. In other words, instead of showing a blank document icon on the browser, your website will display your official website icon.
Most websites usually use their logo as a favicon. If your website doesn't have a logo, you can simply create ane with the gratuitous logo maker. This way, your visitors will easily notice your website when they're opening a lot of tabs in a single browser window. Plus, your site will look much more professional.
How to Add a Favicon to Your Website?
Pick one of two means below to add together a favicon to your website!
Allow Browsers Automatically Generate the Icon
The easiest manner to add an icon to your site is by uploading it equally a .png or .ico file from your hosting's File Manager. Follow these steps to do and then:
- Prepare a foursquare dimensioned image in .png or .ico format for your website logo.
If y'all already have a .png file, use it. Withal, convert the image to .ico format using ConvertICo.com if y'all ever need to.
- Rename the .png or .ico image to favicon.
Most browsers automatically detect favicon.png and favicon.ico file located in your website directory as your website's icon. So, you lot'll need no coding.
- Admission yourpublic_html folder by heading over to your hPanel, so File Managing director -> Go To File Manager.
- Upload thefavicon.png or.ico file into yourpublic_html binder. Reload your website, and you'll run into the favicon.
Upload a Regular Image and Edit Your Theme's header.php File
Alternatively, if you have an epitome other than .png or .ico format (jpg, BMP, gif, etc.), you can use it as your website's icon as well. However, yous need to change the header.php file on your currently used theme folder. To practice so, perform these steps on your hPanel.
- One time yous've got a square dimensioned image as your logo, head over to File Director -> Go To File Director -> public_html.
- Upload the prototype into your public_html folder.
Y'all may both keep the original proper name of the image or rename it to favicon. It'southward recommended to rename the icon to distinguish it from other images.
- Go to thewp-content -> themes folder. Then, access the theme folder you're currently using.
- Open up theheader.php file and paste this post-obit syntax just earlier the end of the<head></head> tag:
<link rel="shortcut icon" type="epitome/jpg" href="/favicon.jpg"/>
Change the /jpg and /favicon.jpg parts according to the format and the proper noun of the prototype you're about to employ.
- In one case you've saved your changes, the image should now display as your website's icon.
If you tin can't see the new favicon, clear your browser cache and restart your browser.
Conclusion
As yous can see, having a favicon on your website is crucial. Not only does it make your site distinguishable on browser tabs, but it too gives a professional await to your website.
You can add it automatically by uploading a .png or .ico image named favicon to your public_html folder. Alternatively, you can upload a regular paradigm (jpg, BMP, gif, etc.) and change the header.php file within your currently used theme folder.
Was this tutorial helpful? Leave a comment below!
Linas started as a customer success amanuensis and is now a full-stack spider web developer and Technical Team Atomic number 82 at Hostinger. He is passionate almost presenting people with tiptop-notch technical solutions, only every bit much as he enjoys coding, he secretly dreams of condign a stone star.
Source: https://www.hostinger.com/tutorials/how-to-add-favicon-to-website
0 Response to "How to Upload Your Own Browser Tab Icon"
Post a Comment