Favicon dimensions? [duplicate]

后端未结

关注

 10  1162

2020 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>

0 讨论(0)

攒了一身酷

2020-11-28 17:40

Wikipedia has this to say:

Additionally, such icon files can be either 16×16 or 32×32 pixels in size, and either 8-bit or 24-bit in color depth (note that GIF files have a limited, 256 color palette entries).

I think the best way is to use a 32x32 gif and test it with different browsers.

0 讨论(0)
发布评论:

提交评论
- 加载中...
囚心锁ツ

2020-11-28 17:43

Seems like your file should be .ico type.

Check this post about favicons:

http://www.html-kit.com/support/favicon/image-size/

0 讨论(0)
发布评论:

提交评论
- 加载中...

旧时难觅i

2020-11-28 17:44

favicon.ico is 16x16

<link rel="shortcut icon" href="favicon.ico"/>

And I use these ones to be beautiful in mobile and tablet:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="apple-touch-icon-precomposed" href="img/ico57.png">

It's important to use the name "favicon.ico" in the root because many browsers will try to find there first.

0 讨论(0)

遇见更好的自我

2020-11-28 17:46

16x16 pixels, *.ico format.

0 讨论(0)
发布评论:

提交评论
- 加载中...
后悔当初

2020-11-28 17:49
The simplest solution is to use one(!) PNG image (in 2020).

Simply add this to the head of your document:
```
<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">
```
The last link is for Apple (home screen), the second one for Android (home screen) and the first one for the rest.

Note that this solution does not support "tiles" in Windows 8/10. It does, however, support images in shortcuts, bookmarks and browser-tabs.

The size is exactly the size the Android home screen uses. The Apple home screen icon size is 60px (3x), so 180px and will be scaled down. Other platforms use the default shortcut icon, which will be scaled down too.
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页

热议问题