When putting a favicon on your site, you can apparently use an animated gif, just by changing the gif file’s extension to .ico.
http://www.k-director.com/blog/how-to-add-an-animated-faviconico/
Have you encountered any problems doing this? (Aside from users being driven mad by some stupid little blinking favicon.)
Have you seen a browser get confused by a gif file with a .ico extension?
Older browser probably will have an issue with it. And as always remember that animations tend to annoy some people. Yes, favicons are small and in the address bar but some people used to turn off JavaScript just because of scrolling status bar messages. Just because you can do it doesn't mean you should.
Related
I'm using Font Awesome 5 Free via a kit. On desktop, the icons work perfectly. But on mobile (iOS chrome (normal and incognito), iOS firefox focus, iOS safari), they behave like Schrödinger's cats...
On first page load, the icons appear. Tap reload and they disappear and are replaced by small squares. Tap reload again and they reappear. Every other tap of reload shows or hides the icons.
I notice the same behavior if I toggle back and forth between "request desktop site" and "request mobile site". (I'm not sure what's really going on under the hood there since the page renders the same either way.)
Since they do appear correctly, at least part of the time, I don't think it's a cross-origin problem or a caching problem.
An example page is here: https://onlinesafetyzone.com/learn/learning-zone.php
I've read many posts, here and on GitHub and none of the solutions has worked. Anyone have a clue what's going on?
It seems you have somekind of a XSS issue. I would try to download the fontawsome resources and deploy them with the application. Can be that they have a CDN problem, every second time the fonts break :| so maybe one of the nodes is flipping.
What has happened with code that now SOME right side up images are displaying online upside down even when the code is exactly the same for all images?
I have been a web designer for a million years and I have never had this happen before. I've got it on 2 websites with different code. 1 is just an img tag and the other is an animated gallery. In both cases SOME photos are displaying upside down while others are not, and they are all right side up in real life on the computer.
The upside down thing is happening in Chrome and Safari but not on the iPhone.
Here's code:
Could not possibly get any simpler.
<body class="loading">
<div class="page">
<img src="images/Ralphs-sons.jpg" alt="family portrait painting of kids" border="0">
Is there a code to lock the orientation so it cannot be flipped by whatever insanity the gurus who break the wheel have done now?
I saw a post about orientation but it didn't make sense for this since I am not doing anything special here and that code was supposed to be to fix a problem in only one web browser, not lock it for all browsers...
I solved the problem with a workaround. I opened the image in Photoshop and saved it from Photoshop so that it is no longer merely recognized by browsers as a photo saved from a camera.
I have the damndest problem. A fairly simple webpage with an embedded png won't load on one particular device I've tested with. It's a Blackberry Curve 8520 running 4.6.1. The browser settings are all using the standard Blackbery Browser, e.g. not pointing to Firefox or IE identity.
I've tested it with a really simple cut down html page:
<html>
<head>
</head>
<body>
<img src="bblogo.png"/>
</body>
</html>
I know the above is technically html5, but that's not the problem it's just short hand included as an example.
The webpage is displayed with a red x for missing image. Yet the image will view fine if accessed directly, e.g. placing cursor over missing image and selecting Full Image from the blackberry menu.
This is the only device it happens on, other blackberries, iphones and 'droids have been fine. If I replace the image with a jpg it's fine. Other png formats are also broken (128 color 8bit png, 24bit no transparency, 24bit with transparency).
So what's going on here and is there a solution? Is it configuration on the local device or something the BES could be doing to the image when it's embedded in a page but not when it's served directly?
I'm trying to avoid jpgs due to color dithering issues on older mobile phones.
Any advice gratefully received, I'm a complete blackberry newbie so know very very little about the devices or their configuration. However from what I've read png support should be pretty solid.
On my site - http://appliedcodingtech.com/site/factory_automation_photos, an image towards the bottom does not show up in IE8, but it shows up just fine in FF and Chrome. What is wrong?
The broken image is a CMYK .jpg, which IE8 does not support.
It looks like it's an issue with the image (corrupt or whatnot). Just opening the image in a new tab doesn't even work. My advice is take a screen cap of it and save that as Twin_belt_transport.jpg and re-upload it.
I think it is a corrupt image - I used Paint.Net to open the image and re-saved it, and now IE will display it.
Apparently the image is corrupted (applications may handle this in different ways) or is stored in a way that is not supported by IE. Try saving the image again using an image editor.
The problem lies in the image itself. IE cannot open it from disk either. It is indeed a jpg image (it has the 'exif' header), although I don't have the tools at hand to study exactly what's wrong with it.
Good question.
It seems that the image file is corrupted. Re-uploading it would definitely fix it!
But also some pointers
Thumbnails are too big. Use different images for thumbnails and for
view purposes. It loads slow and doesn't look professional at all :(
Your using .jpg and .JPG file extensions. For a more beautiful code,
use only lowercase .jpg!
There are spaces in the filenames. Use _ or -
I used this method: CSS Throwdown - Preload Images without JavaScript
By Jeff Starr - http://perishablepress.com/press/2007/07/22/css-throwdown-preload-images-without-javascript/
It works fine when I view it in web browser, however on mobile, it doesn't seem to have any effect, .png icons still takes too long to load.
Preloading doesn't make everything magically faster - it just means that requests are sometimes issued before the data is required. Is the preloading happening at all? Perhaps things are just slow because the mobile connection isn't great.
That method of preloading images looks to me like it'll work fine on mobile browsers - I highly doubt mobile browsers "optimise" by not fetching images are not visible.
If the mobile browser doesn't support javascript (or support javascript well enough) then preloading that way may not work.
I expect it's also unlikley that preloading with javascript would work on any browser or proxy which uses transcoding or pre-rending on the server.
Have you tried the old school (90's) approach to preloading which was to include the image on the homepage (or even each page) but sized to 1px by 1px (could also maybe try 0x0).
This could mean that the user is paying to download more content than they need. Which is an issue to consider.
First thing to do is: make sure you really need the image; make it as small as possible (physical size & image encoding compression); and [gzip] compress the file as it's sent over HTTP. Also make sure that you're doing everything you can to allow the user/client browser to correctly cache the images.
If your site is going to be aimed at mobiles, and not just the one you are testing with, you might have difficulty in finding a universal solution that works across all mobile browsers. If you want to improve the download time of the image, maybe you could consider adjusting the compression of the image to reduce the size?