Favicon format

[ZuluPro]

SITE_FAVICON setting allows only .ICO file. Following this cheatsheet, there are plenty of ways to do favicons, for iOS, Android, Chrome, IE, Firefox, etc...

I propose to use this project: django-super-favicon.

Maybe it requires some adaption, but we'll have something like this:

<link rel="apple-touch-icon-precomposed" href="/static/favicon-152.png">

<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/static/favicon-144.png">

<meta name="application-name" content="Name">
<meta name="msapplication-tooltip" content="Tooltip">
<meta name="msapplication-config" content="/static/ieconfig.xml">

<link rel="icon" href="/static/favicon-32.png" sizes="32x32">
<link rel="icon" href="/static/favicon-57.png" sizes="57x57">
<link rel="icon" href="/static/favicon-76.png" sizes="76x76">
<link rel="icon" href="/static/favicon-96.png" sizes="96x96">
<link rel="icon" href="/static/favicon-120.png" sizes="120x120">
<link rel="icon" href="/static/favicon-128.png" sizes="128x128">
<link rel="icon" href="/static/favicon-144.png" sizes="144x144">
<link rel="icon" href="/static/favicon-152.png" sizes="152x152">
<link rel="icon" href="/static/favicon-180.png" sizes="180x180">
<link rel="icon" href="/static/favicon-195.png" sizes="195x195">
<link rel="icon" href="/static/favicon-228.png" sizes="228x228">
<link rel="icon" href="/static/smalltile.png" sizes="128x128">
<link rel="icon" href="/static/mediumtile.png" sizes="270x270">
<link rel="icon" href="/static/widetile.png" sizes="558x270">
<link rel="icon" href="/static/largetile.png" sizes="558x558">
<link rel="shortcut icon" sizes="196x196" href="/static/favicon-196.png">

[evgenyfadeev]

@ZuluPro, sounds interesting. Could you answer some questions please?

• will all images download on page load?
• looked around and saw that it might be possible to put multiple images into one .ico file
  is that a good method?
• "sizes" is a html5 only attribute - does that mean we should make sure that templates
  must be html5-ized properly first? <- would be a great thing too!

[ZuluPro]

@evgenyfadeev

will all images download on page load?

With Chrome on Mac OSX, it loads only what it needs: PNGs between 57 and 195

looked around and saw that it might be possible to put multiple images into one .ico file is that a good method?

I really dislike .ICO, but this app create ICO in the following sizes: [(16, 16), (32, 32), (48, 48), (64, 64)]
https://github.com/ZuluPro/django-super-favicon/blob/master/favicon/utils.py#L7

"sizes" is a html5 only attribute - does that mean we should make sure that templates must be html5-ized properly first? <- would be a great thing too!

I think in the Web mess, all robots/browsers don't care about XHTML/HTML/HTML5 compliance 😄 They just parse and find what they want. It's a good thing to be HTML5 compliant but not an emergency.