You are here:Home»KB»Media»My RealFaviconGenerator Notes
Monday, 29 January 2018 14:42

My RealFaviconGenerator Notes

Written by

These are the settings and notes I made whilst using the RealFaviconGenerator service to generate my Favicon pack. This is an excellent service and I would recommend making a donation, it is well worth it.

Why is the favicon.ico not enough

Because of the use of apps, the multitude of operating systems and how they handle websites, bookmarks and other features you need many different versions of your logo icon files along with the favicon.ico to allow for the smooth operation of bookmarking and other things. This also helps keep your branding consistent.

Some icons require being declared in the html, some have default locations and usually these default locations can be changed by using declared HTML.

This is where RealFaviconGenerator comes in handy the website will generate all of icons in the formats you need along with the relevant code whilst giving you the ability to configure the process with various options.

My Starting Point.

  • I have used ‘Quantum Warp’ instead of ‘QuantumWarp’ for titles because the single word was to long to be on one line on my android phone causing the word to split into ‘QuantumWar’ on the first liine and 'p' was on a line on its own which did not look good.
  • I used my Square Logo SVG file. SVG are scalable without loss and it is my source file.

SVG

  • if you use a SVG and you have used any fonts, these will be be substituted, so either change them into proper objects or export you logo as a (512x512) PNG and use this as the source to prevent your logo deforming. The viewbox on my SVG was set to (512x512). This should not make any difference but it is a good starting point because my logo exports easily as (512x512).

Optimal Size

  • (512x512) is a nice standard size icon size.
  • The Google Play store requires you to supply them with a (512x512) icon file so they can downscale it as required.
  • When using a SVG as a source the largest Android Chrome icon created is (512x512). If you use a (512x512) PNG then the same Android Chrome (512x512) icon will be created, but if the supplied PNG is smaller then the largest Android Chrome icon created will be the largest Android Chrome icon size that can fit into the PNG resolution.

What this means is that is is prefered that you supply either a SVG or a PNG (512x512) to get the best results.

Notes

  • I recommend you read RealFaviconGenerator FAQ
  • Issues can be reported at GitHub showing the project is still very much alive.
  • The favicon.ico generated at RFG is in True Colour
  • The favicon includes (16x16, 32x32, 48x48) this seems to be the industry standard

RFG Links

There is more than a favicon generator at this site.

Settings I used - RealFaviconGenerator

After reading the FAQ I used these settings. Some of the options not used are there for exotic applications or scenarios which are not needed by me so unless you know about them don’t bother.

Favicon for iOS - Web Clip

Settings

  • Add a solid, plain background to fill the transparent regions
    • Background colour - #ffffff
    • Margin size - Leave as is (4px)

Assets

Why is apple-touch-icon.png a 180x180 picture? (From FAQ)
apple-touch-icon.png is sometimes designed as a 57x57 picture (non-retina iPhone on iOS6). It is actually safer to design as a 180x180 picture (iPhone 6 Plus with iOS8) and let the platform resize it as needed. This is how Apple is doing it for his own web site (credits: Mathias Bynens). – this means only this 1 high qualiy icons is needed

Why do you generate a precomposed favicon for iOS? (From FAQ)
The precomposed icons (eg. apple-touch-icon-precomposed.png as opposed to apple-touch-icon.png) are deprecated since the release of iOS7 and older versions can perfectly cope with their absence. They just take the non-precomposed icon and apply the necessary effect(s). – this means the precomosed icons are only needed for old systems

  • iOS 7 and Later
    • Leave off
  • iOS 6 and Prior
    • Leave off
  • Miscellaneous
    • In the HTML, declare only the icon with the highest resolution – Leave on
    • Generate the corresponding precomposed icons – leave off

Dedicated picture

  • Leave as is

Favicon for Android Chrome

Main settings

  • Add a solid, plain background to fill the transparent regions.
    • Background Colour: #ffffff
    • Margin size (for a 96x96 icon) = leave as is (8px)
  • App name = Quantum Warp
  • Theme color = #ffffff

Options

Standalone option loads your website, after displaying a splash screen but without the navigation bars. This gives the illusion of an application. This is run in android like a separate application and not through your browser. It is all controlled througha manifest.json file which has to be declared in your header. The splash screen shows your logo and site description.

Assets

  • Modern versions
    • Create only recommended, high resolution icons
  • Legacy versions
    • Declare the icon in the HTML code = Leave off

Dedicated picture

  • Leave as is

Windows Metro

Settings

  • Colour #00aba9 (Teal) / #4db2b3
  • Use a white silhouette version of the favicon.

Assets

RFG used to generate 5 tile icons for Windows. Now there is only one. Why?
…..When they add your site to their homescreen, your visitors are presented all the available icons, letting them pick the one that fit their device best. Although this is a nice feature, the Metro interface is probably not widespread enough to justify the systematic creation of 4 icons. A single one is a good default. – what this means is that you only need the one icon ‘Medium, square icon’,  the rest are nice but not used enough.

  • Windows 8.0 / IE 10
    • Medium, square icon, declared with two HTML markups – Leave off
  • Windows 8.1 and 10 / IE 11 and Edge
    • Small, square icon = off
    • Medium, square icon = on
    • Big, square icon = off
    • Rectangular icon = off

Dedicated picture

  • Leave as is

macOS Safari

settings

  • Use a silhouette of the original image.
  • Theme Colour: #4db2b3 (my normal green)

Dedicated picture

  • Leave as is

Favicon Generator Options

Path

I don’t have that many assets to put in the root. If I generated all of them I might consider putting them in a folder on their own but there has been a reduction in assets required

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

Version/Refresh

  • This is a new web site, nobody visited it yet. So there is no "old" favicon and no caching issue.

Compression

  • Very high quality, very low compression factor = about 64%

Scaling algorithm (not present on SVG, so for SVG assume Mitchell)

Mitchell and Lanczos are very similiar (not much in it). Lanczos seems to be the preferred scaler on the internet because it provides sharper images where as Mitchell blurs images to make them look better. If you are using pixelart then ‘nearest neighbour’ is better.

  • Lanczos

App name

This despite its name controls the shortcut name. Either it is got from the page title (which in Android Chrome add you can edit before adding to your desktop) or you can manually set it.

  • Specific app name, override the page title. = Quantum Warp

Additional files

  • Generate README.md = on
  • Generate html_code.html = on

Now Generate Your Icons

Click on the generate button icon and you will be taken to the download page where the following types of packages are available

  • HTML5 (Default)
  • XHTML
  • Jade
  • Grunt
  • Gulp
  • Node CLI
  • RoR
  • NET Core
  • Google Web Starter Kit
  • RFG API

I am not sure what the difference is, possibly the code snippets created or different files supplied with the icons.

Follow the onscreen instructions (Example shown below) and you should also make a copy of the generated HTML code because it is not within the package.

Bug Warning: Currently when you use an SVG for the source file all versions of the mstile icon are generated. You should delete all but mstile-150x150.png, unless you have selected to generate all of the mstiles.

Example HTML Code

  • Download your package: (compression rate: 64%)
  • Extract this package in the root of your web site. If your site is http://www.example.com, you should be able to access a file named http://www.example.com/favicon.ico.
  • Insert the following code in the <head> section of your pages: 
    <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="#4db2b3">
<meta name="apple-mobile-web-app-title" content="Quantum Warp">
<meta name="application-name" content="Quantum Warp">
<meta name="theme-color" content="#ffffff">
  • Optional - Once your web site is deployed, check your favicon.

Done !!!

Rounded Corners for Android Chrome

Currently there is no rounded corners option for the Android Chrome icons in RFG but the developer is aware of it and here are some links to the reported issue:

Read 1842 times Last modified on Thursday, 01 February 2018 17:43
Published in Media
back to top