I'm working on a web application that will run on a device that uses Midori browser in "app mode". The application runs just fine, but I notice that the favicon (a PNG file) does not display -- just a white box as if the favicon was missing completely.
I can find no documentation about what I should expect here. The application (and the favicon) display just fine when I run it in Chrome.
I did see a few older forum posts:
When in app or private mode, the Midori window uses the page favicon as the window icon. source
the website's favicon is set as the window icon source
Other than that, I've seen the list of bugs that include "favicon" -- but nothing seems to shed any light on this for me. Help?
When Midori is started from the command line with --app http://test01-v0-16-attempt-1.test.realfavicongenerator.net/, it uses a 32x32 PNG icon declared with:
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
This page is the test page of RealFaviconGenerator, which means that, when the page contains the package generated by RFG, its 32x32 icon is used (which is a sensible choice for a desktop browser by the way).
So you can:
Generate your favicon with RFG
Create a single 32x32 PNG icon manually and declare it.
If this fails, it might be interesting to check your server logs to see if Midori at least try to load your icon.
Full disclosure: I'm the author of RFG.
Related
I put favicon.ico in my app's root. I do not have any <link> tags in my html regarding favicon. My understanding is that by default, browsers (I'm using Chrome) will load and show favicon.ico if it is in the default folder. No luck.
I have also tried <link> tags in my html. I tried generating several files for multiple browser/device support, with <link> tags, as instructed here: https://realfavicongenerator.net/ (I put the <link> tags in my layout view.) No luck.
What am I missing?
Things you might want to check:
Browse your site with Chrome or Firefox and check the dev console: do you see 404 errors? (eg. your images are not in the right directory).
Browse your site with a browser you normally don't use. Favicon caching issue is a classic: your regular browser might not reload your new favicon immediately.
Run the checker. It might give you additional information (note : I'm the author of RealFaviconGenerator).
i am using favicon this code.
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
But favicon is automatically downloading in browser.
Please help us how can we resolve this issue..
My advice:
In the HTML declaration, use an absolute path (ie. /images/favicon.ico), to avoid any relative path issue.
Download the file manually (eg. download http://yourwebsite.com/images/favicon.ico) and open it with an image editor. This is to make sure that your web server really returns your favicon.ico file and not something else. When a file does not exist, some web servers are configured to return some content, such as a "Oops!" web page, instead of a plain 404 error. This can trick the browser.
When opening your page, enable your favorite web debuging tool (Firefox+Firebug, Chrome console...), select the Network tab to look at the HTTP exchanges and spot the access to favicon.ico. Check the Mime type: it should be image/x-icon (or maybe something similar). If you see something really suspicious, such as application/octet-stream, there must be something wrong on the server side.
I need to put favicon.ico outside the root of the web site.
Can i place it in another path or it may penalize some old browser?
If you put favicon.ico in another directory and declare it in the HTML (eg. <link rel="shortcut icon" href="/icon/favicon.ico">), the favicon will work, including on IE5, the first browser to support favicons. However, you will encounter the following (minor) drawbacks:
IE (and maybe some others) will look for /favicon.ico no matter what. Expect some 404 errors in your HTTP server logs.
Some browsers, like Chrome, will use favicon.ico even if you also declare high resolution PNG favicon pictures. Of course, if you only use favicon.ico as the favicon picture, this is not a concern.
In general, this is a good practice to put all favicon-related file in the root directory of the web site. See http://realfavicongenerator.net/faq#why_icons_in_root for more information (full disclosure: I am the author of this page).
Some browsers will always check for favicon.ico in the root folder. Won't break anything if absent, though.
I keep seeing favicon warnings in my apache log. How do I get rid of those? Do I have to have a favicon for my site?
/favicon.ico is one of the artifacts of the Browser Dark Ages (cca 2000). While there is no way to prevent the browser requests, creating a 0-byte file named favicon.ico ends the flow of 404 errors (as the file exists), but no favicon will be shown by the browsers for your site.
Johan Petersson provides a good answer to preventing file not found errors without using a favicon at http://www.trilithium.com/johan/2005/02/no-favicon/
Placing the following code in the Virtual Host section of httpd.conf (or wherever you define your site environment), should stop the errors appearing in the Apache error log:
# Don't bother looking for favicon.ico
Redirect 404 /favicon.ico
# Don't bother sending the custom error page for favicon.ico
<Location /favicon.ico>
ErrorDocument 404 "No favicon
</Location>
Alternatively, you can create a blank file and name it favicon.ico, placing it in the root directory of the site.
You don't need to, no, but some browsers will request /favicon.ico automatically, so the errors are pretty much unavoidable.
You don't really need it, but as others have said, some browsers will ask for it even if it's not specified in <link rel="shortcut icon" />.
I'm not an expert, but I played with mod_rewrite a bit, and here's what you can do:
# turn on the mod_rewrite module
RewriteEngine On
# if requested file is not an existing file
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
# and it's name is favicon.ico, send an empty 410 GONE response to the browser
RewriteRule .*favicon\.ico$ - [G]
I only tried this on my localhost: first request resulted in 410, but for all following ones, browser does not ask for that file, because it remembers it's gone.
I'm not sure this is how you're supposed to use 410 GONE status, nor that it will work 100%.
Webbrowsers use this to display the image you see in your favorites as well as the icon of your tab. e.g. when you go to stackoverflow the cool icon you see in the tab as shown : is automatically fetched by my browser (chrome) using the url : https://stackoverflow.com/favicon.ico . Its pretty standard so in case you don't want it in your log you should put some icon and rename it as favicon.ico in the httpdocs.
Looking at your logs, you will probably see such 404 errors:
favicon.ico: Internet Explorer, Chrome...
apple-touch-icon.png: iOS devices, Android, maybe some other devices
apple-touch-icon-precomposed.png: iOS devices, Android, maybe some other devices
apple-touch-icon-76x76.png: iOS, maybe some other devices
apple-touch-icon-120x120.png: iOS, maybe some other devices
apple-touch-icon-152x152.png: iOS, maybe some other devices
If you absolutely don't want to add a favicon to your site, you can apply one the the solution described in the other answers:
mod_rewrite
Force 404
Empty picture
However, favicon are so common nowadays that you probably want to add one to your site. This favicon generator creates all these files at once. Full disclosure: I am the creator of this site.
Not really need it.
However it is used on your site (the warnings).
Check the source of your website to see if it contains:
<link rel="shortcut icon" href="favicon.ico">
In the head section of the page.
Remove that line or add the favicon to prevent erros in your log.
How do I go about allowing my webapp to be installed as an icon on a user's homescreen? Is the data cached locally, so that the webapp can be run when the user is outside of 3G?
I did a quick google, but my search terms were lacking. I noticed that Google Buzz allowed me to install locally, and I'm wondering what the process is for creating web apps, and if they get special treatment (full caching/running offline).
This behaviour is done with a meta tag titled apple-mobile-web-app-capable.
Details (and other meta tags useful for iPhone web apps): https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
<meta name="apple-mobile-web-app-capable" content="yes">
To set a nice icon for your app, you can specify a URL for your icon:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
<link rel="apple-touch-icon" href="/custom_icon.png" />
and a startup screen:
<link rel="apple-touch-startup-image" href="/startup.png" />
Data can be locally cached. You can store data using the various HTML5 JavaScript APIs and cache manifest.
See ceejayoz's answer for the various iPhone-specific stuff (icon, fullscreen mode), but in order to store the entire app locally (and run offline), you'll need to look at what's called a "cache manifest". This file, linked to in the opening html tag on your page, lists every resource the app needs to store locally.
Additionally, in order to store user data, if need be, you'll need to look into the client-side database. I don't know as much about that, so I won't try to explain it. :P
Apple has a decent page here: https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007256-CH1-SW1
that talks about both the cache manifest and local database storage. This should help explain what you need to do in order to make your application run offline.
Here's another example of what you are trying to do, may be helpful: http://mrgan.tumblr.com/post/257187093/pie-guy