+91 9422537131 | info@adhvik.online |
Sports Sagaa | Simplicity Global Services Register
03 Oct 19 by Administrator 176

2019 standards thanks to faviconit

I use faviconit.com for the best browser and device support possible. You upload an image and this site gives you the code, the converted images and a browserconfig file.


We could simply upload a favicon manually to our website of 16x16 and it will probably show up in almost any browser.

But when you will mark it as one of your favorites on your smartphone or tablet, we will need larger images (60x60 to 144x144).

And lets say one of our users creates a shortcut on their desktop. In that case a 196x196 looks better!


Example code of what faviconit would give you, next to all the converted images:

<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">

Since Windows 8

But that is not all. Since windows 8 we are able to create shortcuts to websites with tiles!

<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

Browserconfig.xml

Upload a file named browserconfig.xml (to enable the tiles in windows >8)

<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/favicon-70.png"/>
            <square150x150logo src="/favicon-150.png"/>
            <square310x310logo src="/favicon-310.png"/>
            <TileColor>#FFFFFF</TileColor>
        </tile>
    </msapplication>
</browserconfig>
Tags:
Share Post
02 Dec 19 by Administrator 132
Classes This is an example of how html is rendered. With the following options you can change almost every class the way you want <div class="owl-carousel owl-theme owl-loaded"> <div c
by 251
all as previous commands replace 3 with 4s
29 Aug 19 by Administrator 164
use following code in web.config <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add na
15 Jul 19 by Administrator 210
Face book best practice and image details are as follows https://developers.facebook.com/docs/sharing/best-practices
03 Jan 20 by Administrator 79
ALTER TABLE Item ADD ILink varchar(3500)ALTER TABLE Item ADD IDImages varchar(7000) ALTER TABLE generalsettings ADD GLink varchar(3500) GO ALTER VIEW [dbo].[vItem]ASSELECT i1.ILink,i1.CompanyId, i1
12590

We are simpliy creative. We create stunning identities for our clients that people recommand.

Login
×
Remember me
Forgot password?