Favicons

Creating and Implementing Favicons

Favicons

by John Vincent

Posted on June 10, 2018

This stuff ends up sprayed everywhere, so let's create a reference document.

Favicons

RealFaviconGenerator

or

Websiteplanet Favicon Generator

Creates Favicons for all browsers and all platforms.

Check your Favicon

Download SVG

To download a SVG, as a separate SVG from Flaticon

  • select an icon, for example
  • select SVG
  • customize your icon
    • choose your color
    • for Feediator, used the primary app color #2d3e50
  • download

Create your Favicons

Start with an icon. Either create one or download one.

Submit a picture (PNG, JPG, SVG...), at least 70x70. Your picture should be 260x260 or more for optimal results.

In practice, I have found it works well to use an icon

  • Dimensions: 48 x 48
  • Color space: RGB
  • Approx 16KB.

Go to RealFaviconGenerator

  • Select your Favicon picture button (mid right)
  • Select your icon file

The generator discusses various options for the various environments.

For example, for Feediator

Primary color is #2d3e50

Favicon for iOS - Web Clip

Add a solid, plain background to fill the transparent regions.
Background color: #ffffff

Favicon for Android Chrome

Add a solid, plain background to fill the transparent regions.
Background color: #ffffff

App name: Feediator
Theme color: #ffffff

Windows Metro

Settings:
Use this color: #ffffff
Use the original favicon as is.

macOS Safari

Use a silhouette of the original image. Works well with pictures with significant transparent regions.
Theme color: #2d3e50

Favicon Generator Options

I will place favicon files (favicon.ico, apple-touch-icon.png, etc.) at the root of my web site

Take defaults for everything else

Generate Favicons

To generate your Favicons

  • Select the Generate your Favicons and HTML code button (at the bottom)

It takes a few moments for the Install your Favicon section to complete.

  • Select Download Favicon package

The favicon package file is downloaded as a zip file. This file contains all Favicons for all browsers.

  • unzip
  • Copy the files to website root directory (or wherever you need them).

Insert code into <head> as instructed.

For example, added code to head.hbs

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2d3e50">
<meta name="theme-color" content="#ffffff">

Manifest Changes

The manifest file manifest.json will probably need more changes.

See About Web App Manifests for details.

browserconfig.xml Changes

Check file favicons/browserconfig.xml, should look something like

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="/favicons/mstile-150x150.png"/>
      <TileColor>#2b5797</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Make sure the path is correct.

Check Icons

Favicon checker

  • Enter the URL

Using Websiteplanet Favicon Generator

Websiteplanet Favicon Generator

Select Settings

  • All sizes

Select 'Drop your image here'

Notice the limitations

  • jpg, png, gif
  • max size 5Mb

Download, which downloads a zip file. This file contains all Favicons for all browsers.

  • unzip
  • Copy the files to website root directory (or wherever you need them).

Insert code into <head> as instructed.

For example

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
About Web App ManifestsStyling Material-UI components using Styled-Components