Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

What is currently the best way to get a favicon to display in all browsers that support Favicons? [duplicate]

Tags:

html

favicon

standards

What is currently the best way to get a favicon to display in all browsers that currently support it?

Please include:

  1. Which image formats are supported by which browsers.

  2. Which lines are needed in what places for the various browsers.

like image 257
Fred Avatar asked Aug 31 '08 20:08

Fred

People also ask

How do I get a favicon to show?

If you only want one favicon for your entire domain, simply save the favicon. ico file to the root folder of your site. When uploaded, it must be accessible from http://www.yourdomain.com/favicon.ico . As soon as you upload the file, your browser should start displaying the icon for all pages on your site.

Are favicons still used?

Today, favicon. ico still has widespread support across a variety of browsers. However, more contemporary websites tend to use favicon.

1 Answers

I go for a belt and braces approach here.

I create a 32x32 icon in both the .ico and .png formats called favicon.ico and favicon.png. The icon name doesn't really matter unless you are dealing with older browsers.

  1. Place favicon.ico at your site root to support the older browsers (optional and only relevant for older browsers.
  2. Place favicon.png in my images sub-directory (just to keep things tidy).
  3. Add the following HTML inside the <head> element.
<link rel="icon" href="/images/favicon.png" type="image/png" /> <link rel="shortcut icon" href="/favicon.ico" />

Please note that:

  • The MIME type for .ico files was registered as image/vnd.microsoft.icon by the IANA.
  • Internet Explorer will ignore the type attribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn't need to be supplied.

Reference

like image 176
Brian Matthews Avatar answered Sep 19 '22 15:09

Brian Matthews
Sign in to Comment

Related questions

Check if element is a div
HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?
How to add Drop-Down list (<select>) programmatically?
How can I change the Bootstrap default font family using font from Google?
Scroll / Jump to id without jQuery
Set date input field's max date to today
How to get on scroll events?
How to add and remove classes in Javascript without jQuery
Zoom Canvas to Mouse Cursor
:last-child not working as expected?
Equal width columns in CSS Grid
How do I print an HTML document from a web service?
Why doesn't triggering click() inside a click event listener cause an infinite loop?
Disable zoom on input focus in Android webpage
Get width in pixels from element with style set with %?
Pandas to_html() truncates string contents
Using HTML in jQuery UI autocomplete
A library to convert ANSI escapes (terminal formatting/color codes) to HTML [closed]
HTML5 Dynamically create Canvas
Position Fixed width 100%

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!