Code 01:

<head>

    <title> My Web Page </title>

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

</head>

Code 02:

<head>

    <title> My Web Page </title>

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

</head>

I've tried all these in .ico and .png but neither seem to work, at least on Chrome and IE10.

I have a 256 x 256 icon. I've also reduced the size to 16 x 16.

Plus I've tried using the full path to the file.

Recommended Answers

There is something wrong with your website directory:

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

This kinds of tag should be written like that:

<link rel = "icon" href = "/favicon.ico" />
Jump to Post

@silverrice I don't think that's the case at all... I've never done such a thing and even with the forward slash you're still reading from the same directory?

I usualy use:

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

or:

       
Jump to Post

I've had challenges over the years with this, but this syntax seems to work best a cross all browsers.

 <link rel="shortcut icon"   href="http://example.com/myicon.ico" />
Jump to Post

if you want a little more info, read this by w3c: http://www.w3.org/2005/10/howto-favicon

Jump to Post

How about something like this to convert your png's into ico's:

http://www.convertico.com

Jump to Post

All 25 Replies

There is something wrong with your website directory:

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

This kinds of tag should be written like that:

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

@silverrice I don't think that's the case at all... I've never done such a thing and even with the forward slash you're still reading from the same directory?

I usualy use:

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

or:

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

I've had challenges over the years with this, but this syntax seems to work best a cross all browsers.

 <link rel="shortcut icon"   href="http://example.com/myicon.ico" />
Member Avatar

Could it be that my png / icon contains trasperency?

@IsaacMessi10

I think IE browser doesn't work well .png extension. I would just used .ico extension.

So on photoshop you need a plugin to do that. But other software you can save it as .ico extension.

To link it well I think I agree with everyone on this thread

Off topic: Do you know any good and safe sites to upload my favicon to?
HTML file is saved locally.

I've tried Google Drive but that doesn't seem to work, most probabbly because it doesn't end with "favcon.ico".

Member Avatar

Off topic: Do you know any good and safe sites to upload my favicon to?

@IsaacMessi10

What do you mean by that?

You want to upload the favicon to a website to see how it looks?

I don't have any recommendation for that.

How about something like this to convert your png's into ico's:

http://www.convertico.com

commented: Nice Research! +12

I don't own a website, I just created an html file locally on my HDD in a folder with all resources necessary. Somehow I can only see images that are uploaded online as a favicon. Therefore I might as well upload my favicon online to a website which offers cloud storage and stores the file name within the URL eg. www.example.net/favicon.png .

Member Avatar

How about something like this to convert your png's into ico's:

@<Micheal>

You know it really beat the purpose of creating from scratch but it's a nice link and very useful.

@IsaacMessi10

I assume you are talking about what <Micheal> just mention

actually I'm explaining the whole thing
thanks Michael but I already used that website to convert my png to ico

You know it really beat the purpose of creating from scratch but it's a nice link and very useful.

It is just fun to stand out :D

It is just fun to stand out :D

Have I missed something...? O.o haha

You have to take helpf from the stackoverflow.com. You will found more information regarding your coding errors.

You have to take helpf from the stackoverflow.com. You will found more information regarding your coding errors.

Why are you redirecting the op to stackoverflow? You do realize he is asking this on the forum and his question is technically answered. Also, stackoverflow competes with daniweb... so please never bring up stackoverflow as if you want the op to ditch this site and go them (their site sucks fyi...).

Yeah <M/> is right. Apart from that my code is correct as verified on forums such as stackoverflow.

hey guys for some reason my favicon decided to show up on both web browsers today :)

hey guys for some reason my favicon decided to show up on both web browsers today :)

I don't think it just randomly appeared... but anyways, do you understand why it worked and if you did, did we help answer your question?

I'll be damned if we didn't, he got every answer about favicon under the sun haha, and I agree with <M/>... it was most likely cached.

Dunno maybe it was a cache problem?

Dunno maybe it was a cache problem?

Favicon must having the size as 32x32

@stuvart, or it can 16x16 (i believe)...

Favicon can have any size
I've tried it in various squarish sizes such as 16x16, 64x64 and 256x256.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.