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.
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:
- Use Dan’s Tools to generate them and and Favicon.co.uk to create one with a transparent background for the web.
- 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!!!