Favicon for static HTML page - html

I'm trying to upload a simple favicon to my HTML page. I've been browsing the web for answers and I'm being told to "upload the image to my server." My files are uploaded to GoDaddy, and I'm not exactly sure how to do this. Basically, how do I get my website to have the /favicon.ico extension?

You just create a favicon.ico with your logo or image and upload it to the folder where your index.html (or your default page).
You can easily create favicon (favicon.ico) from this online tools
http://tools.dynamicdrive.com/favicon/
I've used this to generate favicon for my website.
For eg: For my website (mansoor.in) I've uploaded favicon.ico here.

Related

How does the browser know from where to a open a another html page locally?

How does a browser know to open another html page inside the folder that our index.html is located?
We are opening only the file not all the folder right?
What i mean is how the browser fetches the files when we are not using a online url...

Blank page when uploading website files to web hoster

So I downloaded my own portfolio after making it through a portfolio maker and decided to download it, modify the html files to my liking and then wanted to upload them to a web hoster where I would use my own domain for it, however when I tried uploading my files to the main folder on my website's directory and check the website out it simply shows me a blank page, even though it actually displays my logo on the tab on top. When I open the index.html with Chrome from my local files it displays my website perfectly however when I upload it to my website and try view it that's when I get a problem. I have tried using 2 different web hosters and tried uploading my files through FTP and direct upload and still got the same blank page.
NOTE: I uploaded all the files in my site folder not just the index.html and if it works when I opened it with Chrome I don't see why it wouldn't work on my website.
It looks like you have forgotten to upload some files:
All the ones marked 404 are missing and need to be uploaded.

How to find out why Chrome displays an image as "favicon"?

I am currently working on a new website which I already uploaded to a webserver. Interestingly, Google chrome shows an icon as a "favicon" that has no relationship to the page. There is no favicon mentioned in the CSS, the (static) HTML code, and there is also no "favicon.ico" in the directory that Apache2 serves.
Is there any way to find out why Google Chrome uses the icon? There are other subdomains on the web server that use the same CSS style (and HTML template) for which Google Chrome does not use the icon.

HTML pages in the Dropbox Public folder

I dearly hope my first question here is 'acceptable', but I cannot find an answer anywhere - not even from an online Dropbox search.
As a web developer in training, I recently added an HTML file to my Public folder in Dropbox; it is meant as an example webpage for my 'portfolio'. The rendered page directly in Dropbox online links to a Dropbox CSS file successfully. Also, my local Dropbox images link and display successfully.
However, my link to a Dropbox audio file does not play - and neither does the video link to Youtube.
All 'src' and 'a href' links work fine when I render the page from my laptop Desktop Dropbox app; they link to external pages and audio and video files correctly. After researching, I had already changed the 'www' to 'dl' to my local Dropbox files, but that doesn't solve the issue of links working when rendered from the Dropbox server. The audio file works fine when accessing the file directly in Dropbox online using the player, so it's the HTML file that cannot 'find' the audio file from within the Dropbox server. Similarly, any hyperlinks to external sites, such as Youtube and my Linkedin account do not work by left-clicking or CTRL-click - the correct URL shows in the bottom-left corner but the link does not respond. Only right-clicking and 'open in another tab' works on links, thus 'escaping' the restriction of the Dropbox server.
I tried to provide as much detail here as possible so that you're fully aware of my situation. I hope someone knows how to 'free' these hyperlinks from the Dropbox server. I'll soon have my first website online, which will eliminate these issues - but I'm curious to solve this Dropbox problem. Thanks in advance.

Display favicon for PDF files

I am working on a Drupal site with some PDF files where I am opening a PDF file in a new window. The files are getting opened in the browser with the Acrobat Reader plugin but the favicon is not getting displayed. What should be done to show the favicon?
If you put a favicon.ico to the root of your site, then your PDFs opened on that site will actually have that favicon. You can generate transparent ICOs from PNGs with online favicon genereators.
For example, if your favicon is reachable in:
http://example.com/favicon.ico
Then your PDF will show this favicon in the Acrobat plugin tab:
http://example.com/something/something.pdf
If you show the PDF file in an iframe, the browser should show the site-wide favicon, but you're out of luck in an external applications. Acrobat Reader doesn't use Favicons.
UPDATE This is now possible by placing favicon.ico in the root directory of your website as per #s1m0n1stv4n answer below
In the Drupal root directory, edit the .htaccess file and add this:
RewriteRule ^favicon.ico sites/%{SERVER_NAME}/favicon.ico [NC,L]
Exactly as it is typed there, and right after the RewriteBase line near the bottom.
See caveats here:
http://drupal.org/node/174940#comment-852888
This assumes you have friendly URLs working in Drupal, or the RewriteRule will be useless.
In each sites/example.com/ directory, add the favicon.ico for that site.
Jump through hoops to clear your favicon cache in your browser / OS:
http://www.faviconblog.com/clear-the-browser-cache-to-display-your-favicon/
This MAY over-ride the HTML HEAD favicon that Drupal spits out when you upload one in some browsers, or not. Haven't tested. If it does, you'll have to have a favicon.ico for every sites/XYZ/
Note that just because uploaded HEAD favicon overrides the sites/XYZ/ in one browser, is no indication it will work in another, or vice versa.
Displaying the PDF from <iframe>, <object>, or maybe even <embed> tag inside of an HTML page should result in the favicon being used.