0

I have to set favicon for my website but icon always looks very bad in windows taskbar although I use icon 130x130

My html:

<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">

How it looks:

example

Amazon icon was taken just as example.

Icon was created by icon plugin for Paint.NET. Also i tried to create icon with 128x128 and 64x64, result was worse. Also i tried to use 256x256 result is better, but still is pixelated. But if i create link on this page on task bar icon will be fine.

Can someone help me?

Vartlok
  • 2,539
  • 3
  • 32
  • 46
  • You might want to look around a bit, to posts like these: http://stackoverflow.com/questions/2268204/favicon-dimensions. Also, 130x130 is not a standard icon size, meaning there will be no situation in which the icon can be used. It will always have to be resized by the browser. – gpgekko Jul 07 '14 at 11:32

4 Answers4

3

Microsoft recommends to put three pictures in the favicon.ico file: 16x16, 32x32 and 48x48. IE is able to pick the suitable one. Chrome and Firefox use a PNG icon, declared with:

<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">

This favicon generator produces such favicon.ico and PNG icons. The end result is fine. When adding an icon to the task bar, IE uses the 32x32 picture, Chrome the 196x196 PNG picture and Firefox the 32x32 PNG picture. Full disclosure: I'm the author of this site.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • 1
    Thank for you reply, great site. But chrome still shows pixelated icon, so i guess problem not in favicon.ico. I guess problem in Chrome. – Vartlok Jul 08 '14 at 13:07
  • Oops! You are totally right :( I edited the answer to take Chrome and FF into account. – philippe_b Jul 08 '14 at 13:14
1

A single link like this isn't enough, browsers won't just automatically resize and use the favicon appropriately. Try following this nice favicon cheat sheet.

silvenon
  • 2,068
  • 15
  • 29
0

Standard icon size is 16X16 px. or 32X32 px. so use this size. favicon (due CSS3) needn't be in .ico file. Just try to use .png file

Mego
  • 154
  • 1
  • 3
  • 10
-1

Use favicon as .svg (vector) file instead of .png it will definitely work and not pixealated.

Yumna Arshad
  • 1
  • 2