CODEWITHSUNDEEP
html
user1174762
user1174762

Reputation: 593

Using a favicon.png

I cannot get my facvicon to work. What am I doing wrong? I tried favicon.ico first. No luck. Now I am trying a png.

<head>
<link rel="icon" href="favicon.png"/>
</head>!

my favicon

Upvotes: 2

Views: 520

Answers (2)

Blieque
Blieque

Reputation: 675

Browsers will simply look for favicon.ico in the site root directory and will use this. For older browsers like IE6 it has to be 16x16px but IE6 support is officially dis-continued, so nevermind.

.ico supports full alpha and has the 16 million colour palette, so there's not much point in using PNGs. For my site, I made a bunch of icons, all in different sizes (16px, 32px, 48px, 64px, 128px), and then I used the command line utility ICOBundle to compress them into one, multi-resolution icon file.

Apple also has documentation on how to set up iOS compatible icons for adding websites to the home screen. To finish, the rel of a favicon should preferably be "shortcut icon".

Upvotes: 1

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

Well, the "best way" is to make an icon in .ico format, call it favicon.ico and place it at your document root (i.e. so it can be accessed by www.example.com/favicon.ico).

If you really don't want to use favicon.ico, you can use:

<link rel="shortcut icon" href="http://example.com/custom/file/anything.ico" />

Not that IE for some reason used 'shortcut icon' as the attribute, even though it has a space in it!

If this doesn't work, your browser has likely cached things, so do that, then clear your browser cache, and try again.

A good site for making a small .ico file is http://www.favicon.cc/ .

If you don't want to do that, then you can use a png, but it won't work in Internet Explorer. You'll have to use:

<link rel="icon" type="image/png" href="http://example.com/image.png" />

for that to work.

But don't, just use an .ico!

Upvotes: 1

Related Questions