The Mystery of Favicons, SOLVED!

Learning to Make Favicons

Part of my mission to learn graphic design and web design is to create my own icons and logos for the websites I make (for fun).
One thing has been puzzling me for days — why my favorite favicon generator (Dan’s Tool’s, which generates all the icons you’ll ever need, for Web, Android, Microsoft, and iPhone and iPad Apps) puts a white background to icons where I have deliberately left the background transparent. And yesterday I finally found the answer.
IOS creates a black background for Icons that have transparent backgrounds.
True enough, I checked all my sites that had transparent favicons and they were black.
Favicons Generate with Black Backgrounds
There’s a great discussion on Stack Overflow on the relative benefits of PNG vso ICO and how you can use both.
So what I do now is to:
  1. Use Dan’s Tools to generate them and and Favicon.co.uk to create one with a transparent background for the web.
  2. Leave the favicon.ico with the white background in the root plus all the Apple and Android icons, and a <link> tag with the transparent favicon.png.
I KNEW there had to be a reason why my transparent icons were being turned into white.

WHICH IS WHY I DECIDED TO GOOGLE IT TO FIND OUT.

Onto my next mission: Animate my favicons with favico.js!!!

Leave a Reply