Website Favicon Guide: Recommended Sizes, Formats & iOS Requirements

Adding Favicons to the Website

Favicons are one of the most common web page elements used in web development. Implementing them is easy and essential for websites. This article provides insights into adding favicons, helping beginners in web design.



A favicon is a graphic image that acts as an identity for a website. It can appear in various places such as the website's title bar, address bar, desktop shortcuts, history, and bookmarks. Once your site is added to favorites or the home screen, favicons are displayed as representations of your site.

The image used for favicons can typically be a square, with common sizes being 16x16 pixels. Other sizes, such as 32x32, 48x48, or 64x64 pixels, are also supported.

Favicons in Websites

The file format for favicons can be .png, .gif, .ico, and the following code can be added to the header of your page (or all pages on your website) for proper implementation.

iOS Safari Favicon Requirements

iOS Safari searches for icons with the prefix:

  • apple-touch-icon
  • apple-touch-icon-precomposed

The appropriate size for iOS devices is 57x57 pixels, and the directory should list icons as follows:

  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-57x57.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png

Browser Favicon Compatibility

If both PNG and ICO favicons are available, browsers select the format and size according to the following rules:

  • Firefox and Safari will use the favicon that comes last in the list.
  • Chrome for Mac will use the ICO format favicon, or the 32x32 favicon if ICO is unavailable.
  • Chrome for Mac will scale down the 32x32 favicon to 16x16 on non-retina devices.
  • Chrome for Windows will use the first available favicon, prioritizing the 16x16 ICO favicon.
  • Opera will randomly select from any available icon.

Comments

Post a Comment

Popular posts from this blog

The Ultimate Guide to AI/ML Hosting and Choosing the Best Platform

Image
The Ultimate Guide to AI/ML Hosting: GPUs, VRAM, and Choosing the Best Platform (AWS vs. Google vs. HuggingFace) The Ultimate Guide to AI/ML Hosting: GPUs, VRAM, and Choosing the Best Platform (AWS vs. Google vs. HuggingFace) You can read our previous article of the blog How to Implement Favicons for Better Branding and User Experience Hosting is one of the most important decisions when building AI/ML applications. Unlike normal websites, AI workloads involve running large models, serving real-time predictions, processing huge datasets, or even training LLMs. Most production-level AI apps—like those running on large language models (LLMs) or agentic AI—demand security, high performance, and scalability. This requires heavy computation, high-performance GPUs, fast storage, and enterprise-grade scalability and security. As a beginner, while exploring hosting options for AI applications, there are a few key parameters that stand out as essential: ...
Read more >>

Best AI Tools for Women in 2025

Image
Artificial intelligence is no longer a jargon reserved only for tech professionals. AI algorithms and tools have seamlessly become a part of people’s everyday lives. Women across the globe can adopt new smart AI tools to enhance productivity and make their lives easier. Table of contents AI for Financial Independence AI for Women’s Health & Well-Being AI Fitness & Mental Wellness Apps AI for Personal Safety & Security AI for Parenting & Child Safety AI for Fashion & Wardrobe Management AI for Housekeeping & Smart Home AI for Cooking & Meal Planning Smart Energy Savings with AI AI for financial independence Many women still think that they are not good at numbers. They let someone else handle their taxes and money decisions. What if AI is empowering you to make finance decisions! Did you know, Jennifer Allan from the United States used Chat-GPT to manage her financial expenditures and spending patterns and let it prompt...
Read more >>

Datatables.net - Plugin options

Image
DataTables jQuery Plugin Options – Complete Guide In Part I of this series, we introduced the basics of the DataTables.net jQuery plugin . The DataTables jQuery plugin provides a rich set of configuration options for sorting, paging, search, and responsive layouts. Let’s see how you can utilize these options efficiently. CDN Links for DataTables Add the following CSS and JS files to your project using CDN links: Stylesheet References 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 Script References 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 Disable All Options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” dropdown at the bottom of the data table $('.promo-prici...
Read more >>