Images must be square :)
HTML
Place the Following in the <head></head> of your HTML
<!-- generics -->
<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">
<link rel="icon" href="/path/to/favicon-57.png" sizes="57x57">
<link rel="icon" href="/path/to/favicon-76.png" sizes="76x76">
<link rel="icon" href="/path/to/favicon-96.png" sizes="96x96">
<link rel="icon" href="/path/to/favicon-128.png" sizes="128x128">
<link rel="icon" href="/path/to/favicon-192.png" sizes="192x192">
<link rel="icon" href="/path/to/favicon-228.png" sizes="228x228">
<!-- Android -->
<link rel="shortcut icon" sizes="196x196" href=“/path/to/favicon-196.png">
<!-- iOS -->
<link rel="apple-touch-icon" href="/path/to/favicon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="path/to/favicon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="path/to/favicon-180.png" sizes="180x180">
<!-- Windows 8 IE 10-->
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">
<!— Windows 8.1 + IE11 and above —>
<meta name="msapplication-config" content="/path/to/browserconfig.xml" />
browserconfig.xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src=“favicon-76.png”/>
<square150x150logo src="favicon-228.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>
Favicons
Windows tile preview
A favicon is a small image that is displayed next to the page title in the browser tab. It is a great way to add visual interest to your website and make it easier for visitors to identify your website in their bookmarks or browser tabs.
Favicon HTML Browser XML Generator
Creating a favicon can be difficult, however, as the optimal size is only 16x16 pixels and you need to create a specific type of file called a .ico file. The Favicon HTML Browser XML Generator simplifies the process by allowing you to upload any .png, .jpg, or .gif image and automatically generate the .ico file and all of the HTML needed for adding a favicon to your website.
The generator also helps you configure other features of your favicon, such as the Windows tile background color, and provides an easy-to-use drag and drop interface for making adjustments. When you’re done, the Favicon HTML Browser XML Generator will provide you with all of the HTML code that you need to add your favicon to your webpages.
Favicon HTML
The generator is easy to use and makes it simple for anyone to create a beautiful, customized favicon for their website. With just a few clicks, you can have your new favicon up and running in no time!
If you want to know more about how to make a favicon and which size is best for your website, then check out the extensive help section included in the Favicon Generator. This section covers everything from understanding how a favicon works to creating one for free. The instructions are easy to understand and follow and the results are definitely worth the effort. So go ahead and try out the Favicon Generator today and make sure that your website stands out from the rest.
Comments
Post a Comment