CODEWITHSUNDEEP
htmlcss
NodeReact020
NodeReact020

Reputation: 506

Changing favicon size in HTML

In my project, I add a favicon as shown here:

<link rel="shortcut icon" type="image/png" href="{% static 'favicon.png' %}"/>

In my image editor, I change the size of this graphic, which I want to use as my favicon, to 225x225px from the original size (172x158px).

However, when I try to use the updated graphic as my favicon, (the one which the dimensions are 225x225), it stays at its original size.

Does anybody know how to resolve this issue so I can use a bigger graphic for my favicon? Thank you.

Upvotes: 2

Views: 9662

Answers (1)

b4dc0de
b4dc0de

Reputation: 105

Actually, the favicons are supposed to be 16x16, 32x32 and 48x48 pictures in ICO format. (According to Microsoft)

You could try to simply add the size of your icon to the tag and also check, if that size is supported by your browser and purpose. For example:

<link rel="icon" type="image/png" sizes="196x196" href="{% static 'favicon.png' %}"/>

Not every size (neither the .png format) is actually supported by every browser! I would recommend, to add all sizes you would like to support.

If you want to support all the formats for the most common browsers, here is a nice favicon generator: http://faviconit.com/en

Here is the code of what faviconit would give you (next to the images):

<!-- ****** faviconit.com favicons ****** -->
<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">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- ****** faviconit.com favicons ****** -->

Upvotes: 4

Related Questions