Before we begin
Technical Requirements: In this guide you will be editing the HTML code of a website! You will need to have some knowledge of HTML to do it.
Optional Requirements: If you want to edit your icon color or style, you will need to have some working knowledge of Graphic Editing - this isn’t required if you are happy with your icon style and color.
Introduction
In this guide, we will use our website Favicon Converter tool to guide you how to implement favicons to your website. It may be differ with other tools.
Step 1: Prepare your icon
You must have your icon image (be sure the size is at least 60x60) and go to our tool at Favicon Converter
Step 2: Upload and choose your convert option
At the converter tool, click on upload button and select your icon image. After that, select convert option to fit your needed. Then click Convert
Step 3: Download and upload the favicons
The tool will generate a package (.zip) favicon, you need to download it and unzip all of content to your root folder of your website.
Step 4: Insert html code to your website
At the below of download button, there is a html code needed to be inserted to html. Be sure insert it to your <head></head> html.
<meta name="msapplication-TileColor" content="#FFF" />
<meta name="theme-color" content="#FFF" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/android-icon-36x36.png" sizes="36x36" />
<link rel="icon" type="image/png" href="/android-icon-48x48.png" sizes="48x48" />
<link rel="icon" type="image/png" href="/android-icon-72x72.png" sizes="72x72" />
<link rel="icon" type="image/png" href="/android-icon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/android-icon-144x144.png" sizes="144x144" />
<link rel="icon" type="image/png" href="/android-icon-192x192.png" sizes="192x192" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="msapplication-square70x70logo" content="/ms-icon-70x70.png" />
<meta name="msapplication-square150x150logo" content="/ms-icon-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/ms-icon-310x150.png" />
<meta name="msapplication-square310x310logo" content="/ms-icon-310x310.png" />
<link href="/apple-startup-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image" />
<link href="/apple-startup-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/apple-startup-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/apple-startup-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) and (orientation: landscape)" rel="apple-touch-startup-image" />
<link href="/apple-startup-750x1024.png" media="" rel="apple-touch-startup-image" />
<link href="/apple-startup-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/apple-startup-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="/apple-startup-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
<link href="/apple-startup-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="/apple-startup-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
<link href="/apple-startup-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link rel="manifest" href="/manifest.json" />