How to add favicon to website: page have guide to create, add and change website favicon icon step by step process for different platform sites.
Using this information, you can easily create and add favicon to your blog or site.
Let’s check guide points one by one, first start with favicon definition and purpose, then after will check for online create and add favicon to site process.
Table of Contents
What is website favicon icon?
Full name of favicon is favorite icon. favicon also known as bookmark icon, tab icon, website icon and home screen icon. Its image or .ico file, Image given in website as link tag source and supported browser shown with page tab title. Site favicon provide identity in bookmark list and browser shortcut list. favicon can be set with different size images and related image used based on device and feature.
What is the purpose of favicon icon?
Following are list of purpose for favicon in website.
- Web site identity in the address bar or in tabs.
- Unique identity in bookmarked page list.
- Identiry in browser shortcut page list
- Work as app icon with Add to Home Screen option
How to create favicon for website?
favicon is simple image or .ico file. So, process to create it is same as like other normal image creation process. favicon can be create manually by system image tools, or it can be create using online favicon creator tools.
favicon used for different purposes, so, based on that, need to create different sizes image files. Also, its size can be varies on multiple platforms and devices.
Some platform as like WordPress theme gives option to favicon. You just need to create 512×512 image file and upload as Site icon. In some platform, if all useful favicon meta not available, then user need to create related files for that.
Following are steps to create favicon online.
- Decide your favicon image, it can be your logo or some text or other visual grafics that gives identity to your site.
- Create minimum 512×512 image.
- Go to any online favicon generator tool. (suggested: favicon tool).
- Upload your image and generate.
- Download images and add required image and tag to your site.
What are minimum suggested favicon tags and images?
Following are four suggested favicon tag entries and related different size images detail.
<link rel="icon" href="32x32.png" sizes="32x32" />
<link rel="icon" href="192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="180x180.png" />
<meta name="msapplication-TileImage" content="270x270.png" />
Quick overview for different size icon and tag rel attributes value.
icon 32×32: Display near browser tab title.
icon 192×192: Image and tag for android devices.
apple-touch-icon 182×182: Image and tag for iOS(iPhone, iPad) devices.
msapplication-TileImage 270×270: Tag entry for Microsoft applications.
Steps to add favicon to different platform sites
Once favicon different size images created, add image and html tag in page head process is simple. Following are step by step process for different platforms. For example WordPress, Blogger, Shopify.
Add favicon to WordPress blog or site
- Create 512×512 image for favicon.
- Login to WordPress admin.
- Go to Appearance > Customize > Site Identiry.
- Upload image to Site Icon option and Published.
Add favicon to Blogger blog
- Create 512×512 image(less than 100KB) for favicon.
- Login to Blogger
- Open Configure Favicon page from Settings > Basic > Favicon.
- Upload image and save.
Add favicon to Shopify store site
- Login to Shopify admin.
- Go to Online Store > Themes (For mobile: Sales channels > Online Store > Manage themes).
- Click Customize.
- Open Theme settings tab in theme editor toolbar.
- Click Favicon.
- Click Select image in Favicon image area.
- Select existing or upload new image.
- Click Save.
Add favicon to website: normal HTML or CMS page
- Create 512×512 image for favicon.
- Create favicon online for website.
- Add all tags in header or add minimum suggested tags.
- Upload related size images based on tags.
- Update tags href value with related working image url.
That’s it. Given are simple step by step guide for how to create and add favicon to website. If you have any queries or suggestion regarding favicon, you can submit via your valuable comment.
