Favicon in HTML

Question

IsaacMessi10 0 Junior Poster in Training

13 Years Ago

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.

html-css web-design

Edited 13 Years Ago by pritaeas because: Moved to HTML/CSS.

8 Contributors
25 Replies
278 Views
4 Days Discussion Span
Latest Post 12 Years Ago Latest Post by IsaacMessi10

Dani AI

Generated 9 Months Ago

Useful summary and practical fixes based on the thread: the HTML you posted was fine and the behavior you saw (favicon suddenly appearing later) fits a caching/fallback issue rather than a syntax bug. and were right to check paths and use an explicit link; prefer the standard rel="icon" (the legacy shortcut icon is historical and not required). (developer.mozilla.org)

Diagnosis checklist (fast):

Test over HTTP, not just file:// — many browsers won’t load favicons reliably from local files. Run a tiny local server (for example python3 -m http.server 8000) and open the page as to replicate real behavior.
```
python3 -m http.server 8000
```
Confirm the icon URL is reachable (visit /favicon.ico or the explicit href). Use DevTools → Network (disable cache) and reload to see the request, response code and Content-Type. Browsers also fall back to requesting /favicon.ico at the site root when no suitable link is found. (seomator.com)

Format, headers and cache:

Modern browsers accept PNG, ICO (and SVG in some cases), but older IE historically required ICO. Ensure the server serves a correct MIME type (image/x-icon or image/vnd.microsoft.icon); both are broadly supported though some old IE quirks exist. (stackoverflow.com)
Favicons are cached aggressively. To force an update use a renamed file (favicon-v2.ico) or a cache-busting query string, or clear the browser cache. (codestudy.net)

Short checklist to resolve the original issue: serve the page over HTTP, verify the icon URL in DevTools, confirm the MIME type, clear cache (or rename the file), and keep an explicit rel="icon" link in the head. The OP’s later success is consistent with a cached/refresh effect rather than bad markup.

All 25 Replies

silverice282 0 Newbie Poster

13 Years Ago

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" />

mmcdonald 28 Posting Pro

13 Years Ago

@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="" />

or:

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

JorgeM 958 Problem Solver

13 Years Ago

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="" />

<M/> 170 Why so serious?

12 Years Ago

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

<M/> 170 Why so serious?

12 Years Ago

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

http://www.convertico.com

Member #949455 commented: Nice Research! +12

Reply to this topic

Be a part of the DaniWeb community

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

IsaacMessi10 0 Junior Poster in Training · Answer 1 · 2013-09-15T21:04:32+00:00

Code is alright for sure. I've tried this image and it worked:

Could it be that my png / icon contains trasperency?

Member #949455 · Answer 2 · 2013-09-15T21:25:57+00:00

Could it be that my png / icon contains trasperency?

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

IsaacMessi10 0 Junior Poster in Training · Answer 3 · 2013-09-15T21:36:10+00:00

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 #949455 · Answer 4 · 2013-09-15T21:40:31+00:00

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

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.

IsaacMessi10 0 Junior Poster in Training · Answer 5 · 2013-09-15T21:48:21+00:00

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 #949455 · Answer 6 · 2013-09-15T21:49:14+00:00

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.

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

IsaacMessi10 0 Junior Poster in Training · Answer 7 · 2013-09-15T21:50:30+00:00

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

<M/> 170 Why so serious? Featured Poster · Answer 8 · 2013-09-15T23:51:40+00:00

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

mmcdonald 28 Posting Pro · Answer 9 · 2013-09-16T01:25:48+00:00

It is just fun to stand out :D

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

Nmalik1 6 Junior Poster in Training · Answer 10 · 2013-09-17T06:59:43+00:00

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

<M/> 170 Why so serious? Featured Poster · Answer 11 · 2013-09-17T07:11:07+00:00

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...).

IsaacMessi10 0 Junior Poster in Training · Answer 12 · 2013-09-17T08:49:02+00:00

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

IsaacMessi10 0 Junior Poster in Training · Answer 13 · 2013-09-17T14:12:56+00:00

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

<M/> 170 Why so serious? Featured Poster · Answer 14 · 2013-09-17T22:31:25+00:00

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?

mmcdonald 28 Posting Pro · Answer 15 · 2013-09-18T00:36:39+00:00

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.

IsaacMessi10 0 Junior Poster in Training · Answer 16 · 2013-09-18T10:15:15+00:00

IsaacMessi10 0 Junior Poster in Training

12 Years Ago

Dunno maybe it was a cache problem?

IsaacMessi10 0 Junior Poster in Training · Answer 17 · 2013-09-18T10:17:05+00:00

IsaacMessi10 0 Junior Poster in Training

12 Years Ago

Dunno maybe it was a cache problem?

stuvart20135 0 Newbie Poster · Answer 18 · 2013-09-19T07:03:12+00:00

stuvart20135 0 Newbie Poster

12 Years Ago

Favicon must having the size as 32x32

<M/> 170 Why so serious? Featured Poster · Answer 19 · 2013-09-19T14:07:05+00:00

<M/> 170 Why so serious?

12 Years Ago

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

Edited 12 Years Ago by <M/>

IsaacMessi10 0 Junior Poster in Training · Answer 20 · 2013-09-20T07:50:27+00:00

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

Favicon in HTML

Dani AI

Recommended Answers Collapse Answers

All 25 Replies

Recommended Answers