0

It works perfectly fine on Firefox, it even moves as it's supposed to, seeing it's a gif and I added the appropriate coding. I've been at this for three hours and I couldn't find a fix.

The only thing that I've managed to do is make it stop showing my old favicon ( from the last time that I changed my tumblr theme, cause it got stuck on that for some reason, even if I had completely removed any trace of the 'icon' code ). I deleted the 'favicons' file and forced a favicon refresh, but now it's just showing me this.

https://i.stack.imgur.com/A8hpG.png

I don't remember ever having this problem before, at least not this badly. I always managed to change it, it never gave me so much trouble. At least it works in other browsers, I guess, but it's bugging me to no end.

Any tips? I'm new to coding, and I did NOT make my tumblr theme, I just added a few tweaks to implement some things that I liked, favicon included.

This is the link to my tumblr page: http://prickgraysonx.tumblr.com/

Cris Winchester
  • 1
  • 3

2 Answers2

0

In chrome while you are on your web page press [F12] to open development tools and then with your mouse pointer press left click (action click) down on REFRESH button on chrome for 2 seconds then you will see three options click on the third one --> 'Empty Cache and Hard Reload'. Then you will see the change happening.

enter image description here

If this works it is due to the caching system that chrome offers to cache images and icons and ... in order to browse faster and not to download repeated resources.

If not please see this post: Solution

You can also do this:

The Gif icon:

<link rel="icon" type="image/gif" href="data:image/gif;base64,R0lGODlhFAAUAOMAAIQCBASCBISChMTCxKRSLPSChPzu1PwCBGyOJNy6hPz+/P7+/gAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJZAAMACwAAAAAFAAUAAAEenDJSaulIut9ZTZgCGZXNpxiSGJD6o7sOSgG7QrYpu8VkPzA4A9g8QmPxJ5iqUAEAgimIkkxJpw/KJA6sQaC3+EFAAoYEAiD2cCt/rAJbaLdJdidUDuBe1j0yS8gfAd9C4AuAAUFC4p+XUdDipI9kHOMjUUAmptUiwsRACH5BAlkAAwALAAAAAAUABQAg4QCBASCBISChMTCxPxiRPSChPzu1KQqLGyOJNy6hPz+/P7+/gAAAAAAAAAAAAAAAAR4cEkpqr0zU2G675W2DeRnKEqYCYPpgitZKq8hrFeua0Di/0AfQNQLGoc8FAoRCCCUCmSmmGD6nD/phBoAdoWiBaATMDTNHe3UZ01gE+rtYc50zg9xybhmGBIWf1M1SASFBQULh1RBUn+Hj4tAcY96AJaXeYlhmxIRADs=" />

The Png icon:

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAIAAACkFJBSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADPSURBVDhPzdDNCoJAFAXgec7WRS/gomW2aiNE+/7N0sqyLBCKLLNeq5lGpuEOjXFnUZeDoN75OEqCx8E8f65UlGl12mAHhPj3PXhEj4Hbar2mh5gCIFUZJIEeIvM8BpCq0Kse+kqRR34l8lYE9GmVRqcA6HfKLNsBCKvcGGSkeNeIKwLCKNNLBOogFS/bynUwyuQcFnUkRTPgPE+h0Doc4h8FlkpDhselDCGVfuKPTys3XYsfhFG6ix6FRq9GbrphUB6DpdKQpmU1HNsojv0En5X5p/+vZ6gAAAAASUVORK5CYII=" />

The .ico file:

<link rel="shortcut icon" href="http://www.iconarchive.com/download/i94886/martin-berube/people/lady.ico" type="image/x-icon" />
Community
  • 1
  • 1
Hirad Nikoo
  • 1,599
  • 16
  • 26
  • Thanks for the tip! Unfortunately, didn't work. Tried it a few times to make sure. :( – Cris Winchester Apr 24 '16 at 18:21
  • You're welcome ;) Please recheck my answer I added a solution at the end which someone else has provided it might help you ;) – Hirad Nikoo Apr 24 '16 at 18:31
  • As I mentioned, this is not my domain/webpage, therefore I do not have access to the root folder of this webpage, and I am unable to do anything involving a favicon.ico file. I am already using the tag in my code. – Cris Winchester Apr 24 '16 at 18:33
  • Please try the last item that I added to my post try the – Hirad Nikoo Apr 24 '16 at 18:42
  • I'm already using that, it's how I added my favicon in the first place. – Cris Winchester Apr 24 '16 at 18:45
  • You are not paying attention. The href attribute is filled with base64 data not the url. I checked your tumblr page but it is not like this. Unless you are not adding these html tags into the online page you have provided in your questions I'm not seeing the changes that I suggested to you. – Hirad Nikoo Apr 24 '16 at 18:47
  • In my code, I did fill in with the url. Here it is. http://i63.tinypic.com/2vryfb7.png – Cris Winchester Apr 24 '16 at 18:50
  • I tried the tags you suggested, but with no results. – Cris Winchester Apr 24 '16 at 18:51
  • After trying that did you refresh your browser in the way that I mentioned earlier? – Hirad Nikoo Apr 24 '16 at 18:52
  • I'm sorry I failed you on this. I don't have any other solutions. But I will continue searching for options and if I found one I will share it with you. – Hirad Nikoo Apr 24 '16 at 18:54
  • Yeah, I tried. :( Still not showing up. No worries, thank you so much! – Cris Winchester Apr 24 '16 at 18:56
  • You're welcome. Sorry again. But maybe .ico files will work. I continue on searching. ;) – Hirad Nikoo Apr 24 '16 at 18:57
  • Could you also try this for me. At least if it works we'll know that it works with .ico files. The last item that I added to my post. – Hirad Nikoo Apr 24 '16 at 19:03
  • The issue is definitely with Chrome, somewhere, but I cannot figure it out. I tried snooping around the code with the dev tools after pressing f12, but I'm too inexperienced to notice anything out of order... – Cris Winchester Apr 24 '16 at 19:03
  • The url was malformed as I see. Corrected the url. – Hirad Nikoo Apr 24 '16 at 19:08
  • WOW. I don't know what to say. Chrome really is having her way on this. I've never been frustrated with chrome like this. ever – Hirad Nikoo Apr 24 '16 at 19:09
  • I guess that this is because the .ico file is provided by iconarchive.com in a Content-Disposition: attachment header. That is why it can't show the .ico file. But either way you want your nice gif/png file not the .ico file. – Hirad Nikoo Apr 24 '16 at 19:14
  • Yeah, I tried the corrected url as well, no luck. Yeah, I replaced it back with the original url. :( – Cris Winchester Apr 24 '16 at 19:23
0

This because you have body-only markups in your head. Look for this snipet at the top of your head:

<div id="bartop"></div>
<div id="barbottom"></div>
<div id="barleft"></div>
<div id="barright"></div>

Simply remove these unnecessary div (or move them to the body where they belong).

Unlike Firefox and others, Chrome considers the head to be closed as soon as it encounters a div, span or whatever other body-related markup. And since the link markups appear after, Chrome supposes they are in the body, where they are not supposed to be. So it ignores them.

philippe_b
  • 38,730
  • 7
  • 57
  • 59