Skip to main content Skip to main navigation

Favicons

Added

Updated

Zachary Winnie , Senior Interface Designer

Browser Support

At minimum, provide the following for the browsers that Mercury supports:

  • 32x32 PNG Icon
  • 180x180 PNG apple-touch-icon
  • macOS Safari safari-pinned-tab SVG
  • Android Chrome meta theme color, manifest.json, and android-chrome PNG icons
  • browserconfig.xml for Windows Metro and mstile PNG icons

Note: You don’t really need a .ico file anymore unless you need to support Internet Explorer versions older than IE11.

Creating Favicons

Use Real Favicon Generator to create your favicons: Real Favicon Generator. Suggested steps:

  1. Create a 260x260 pixel (minimum) image, export to PNG
  2. Upload to Real Favicon Generator
  3. Adjust settings for iOS
  4. Adjust settings for Android
    • A solid color background
  5. Adjust settings for Windows Metro
    • This looks best with the white silhouette option selected, with the brand color as the tile color
  6. Adjust settings for macOS Safari pinned tab svg icon
    • This icon is limited to one color, so a solid one color logo works best
  7. Adjust Generator Options
    • You can specify a path to your favicons
    • You can add compression to the favicon files (you can usually select the full compression)
    • Select a scaling algorithm (Lanczos is usually the best)
  8. Hit the generate button
  9. Download your icons and copy your code

Resources

Table Of Contents
Handbook Overview Culture Code Style Code Tools UX Design UI Design Front End Development Favicons Fonts JavaScript Frameworks Designs Systems Color Meta Accessibility Safari iOS HTML Internet Explorer Browser Support CSS Gulp React Images SVG Video Performance Sass Knockout.js Icon Fonts Back End Development .NET Reading Coding Practices CMS SharePoint SharePoint SPFX API Theming Native Mobile DevOps Testing Functional Tests Scum Client Relationships Job Descriptions Professional Development