Favicons in website

Adding Favicons to the Website


Favicons are one of the common web page elements used in web page development. Using it in web sites are easy and common. The following article gives the insights about the element. It might help the beginners who are into web site designing.


A favicon is a graphic image which is an identity for a website. Favicons can be used for a web pag
or the websites. Favicon can be simply called as shortcut icon or bookmark icon. It is installed in the website by several means. Favicon are usually displayed in title bar of the website, address bar, drag to desktop, history and bookmarks. When your site has been added to favorites or home screen, favicons are displayed as representation.





The image may be a square of size 16 X 16 pixels. Also, such icon files can be 32×32, 48×48, or 64×64 pixels in size.

favicons in websites

The file format for the favicon image may be .png, .gif, .ico. The following code can be added to the header of the page or all the pages of the website

iOS ‘s Safari will search for icons which carry the prefix

a) apple-touch-icon
b) apple-touch-icon-precomposed
The appropriate sixe for iOs device is 57X57 pixels, so our directory should list icons of order
a) apple-touch-icon-57x57-precomposed.png
b) apple-touch-icon-57x57.png
c) apple-touch-icon-precomposed.png
d) apple-touch-icon.png

Bootstrap 4 menu using flex

If links for both PNG and ICO favicons are present, PNG-favicon-compatible browsers select which format and size to use as follows.


a) Firefox and Safari will use the favicon that comes last.
b) Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32×32 favicon.
c) Chrome for Mac will ignore the 16×16 favicon and use the 32×32 version if only to scale it back down to 16×16 on non-retina devices
d) Chrome for Windows will use the favicon that comes first if it is 16×16, otherwise the ICO.
e) If none of the aforementioned options are available, both Chromes will use whichever favicon comes first, exactly the opposite of Firefox and Safari.
f) Opera will choose from any of the available icons completely at random.
Follow our FB page @CreativeTechnocrayts
Subscribe to Creative Technocrayts and be a part of growing community.<

Comments

Post a Comment

Popular posts from this blog

What are some mistakes people make when they start learning HTML, CSS and JavaScript?

Image
Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu
Read more >>

How to initialize Datatable plugin?

Image
How to initialize Datatable plugin? Datatables.net is a sophisticated plug in built on Jquery, JavaScript library which provides more functionality to normal HTML tables. The plug in offers search, pagination and sorting functionalities. The assets file can be downloaded From the website, CDN From website: https://datatables.net/download/index CDN Links: https://cdn.datatables.net/ Basic Implementation of Datatable Write the basic markup of the table with data Add a class name to the table Include all the assets As Datatables.net is built on Jquery, make sure that Jquery is downloaded before data tables Sites Followers Rank Country SitePoint 11456 5 Canada Learnable 123449 3 USA Flippa 143567 1 Brazil $(function(){ $("#example").dataTable(); }) You may continue th
Read more >>

Datatables.net - Plugin options

Image
Datatables jquery plugin options In PART i of this series we have discussed the basics of datatables.net plugin Datatables.net has a wide set of options which gives extensive interface support and browser compatibility. The following article clearly explains how to utilize the options provided by the plugin. The datatables.net CDN links for style sheet reference https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css The datatables.net CDN links for script reference https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css To disable all options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” at the bottom of the data table $('.promo-pricing-table').dataTable({ "dom": 'frtlip' }); }) To display “Show entries” at the
Read more >>