Commit ec97de83 authored by Gabriel Engel's avatar Gabriel Engel Committed by GitHub

Merge pull request #5233 from RocketChat/favicon-sizes

fix favicons, tiles and touchicons
parents 9a6794c2 17598aee
......@@ -18,7 +18,7 @@ assets =
width: undefined
height: undefined
'favicon_ico':
label: 'favicon.ico'
label: 'favicon (ico)'
defaultUrl: 'favicon.ico'
constraints:
type: 'image'
......@@ -26,53 +26,101 @@ assets =
width: undefined
height: undefined
'favicon':
label: 'favicon.svg'
label: 'favicon (svg)'
defaultUrl: 'images/logo/icon.svg'
constraints:
type: 'image'
extensions: ['svg']
width: undefined
height: undefined
'favicon_64':
label: 'favicon.png (64x64)'
defaultUrl: 'images/logo/favicon-64x64.png'
'favicon_16':
label: 'favicon 16x16 (png)'
defaultUrl: 'images/logo/favicon-16x16.png'
constraints:
type: 'image'
extensions: ['png']
width: 64
height: 64
'favicon_96':
label: 'favicon.png (96x96)'
defaultUrl: 'images/logo/favicon-96x96.png'
width: 16
height: 16
'favicon_32':
label: 'favicon 32x32 (png)'
defaultUrl: 'images/logo/favicon-32x32.png'
constraints:
type: 'image'
extensions: ['png']
width: 96
height: 96
'favicon_128':
label: 'favicon.png (128x128)'
defaultUrl: 'images/logo/favicon-128x128.png'
constraints:
type: 'image'
extensions: ['png']
width: 128
height: 128
width: 32
height: 32
'favicon_192':
label: 'favicon.png (192x192)'
label: 'android-chrome 192x192 (png)'
defaultUrl: 'images/logo/android-chrome-192x192.png'
constraints:
type: 'image'
extensions: ['png']
width: 192
height: 192
'favicon_256':
label: 'favicon.png (256x256)'
defaultUrl: 'images/logo/favicon-256x256.png'
'favicon_512':
label: 'android-chrome 512x512 (png)'
defaultUrl: 'images/logo/512x512.png'
constraints:
type: 'image'
extensions: ['png']
width: 512
height: 512
'touchicon_180':
label: 'apple-touch-icon 180x180 (png)'
defaultUrl: 'images/logo/apple-touch-icon.png'
constraints:
type: 'image'
extensions: ['png']
width: 180
height: 180
'touchicon_180_pre':
label: 'apple-touch-icon-precomposed 180x180 (png)'
defaultUrl: 'images/logo/apple-touch-icon-precomposed.png'
constraints:
type: 'image'
extensions: ['png']
width: 180
height: 180
'tile_144':
label: 'mstile 144x144 (png)'
defaultUrl: 'images/logo/mstile-144x144.png'
constraints:
type: 'image'
extensions: ['png']
width: 144
height: 144
'tile_150':
label: 'mstile 150x150 (png)'
defaultUrl: 'images/logo/mstile-150x150.png'
constraints:
type: 'image'
extensions: ['png']
width: 256
height: 256
width: 150
height: 150
'tile_310_square':
label: 'mstile 310x310 (png)'
defaultUrl: 'images/logo/mstile-310x310.png'
constraints:
type: 'image'
extensions: ['png']
width: 310
height: 310
'tile_310_wide':
label: 'mstile 310x150 (png)'
defaultUrl: 'images/logo/mstile-310x150.png'
constraints:
type: 'image'
extensions: ['png']
width: 310
height: 150
'safari_pinned':
label: 'safari pinneed tab (svg)'
defaultUrl: 'images/logo/safari-pinned-tab.svg'
constraints:
type: 'image'
extensions: ['svg']
width: undefined
height: undefined
RocketChat.Assets = new class
......
......@@ -96,12 +96,13 @@
}
_opt.type = (type['' + _opt.type]) ? _opt.type : _def.type;
_orig = link.getIcon();
_orig = link.getIcons();
//create temp canvas
_canvas = document.createElement('canvas');
//create temp image
_img = document.createElement('img');
if (_orig.hasAttribute('href')) {
var lastIcon = _orig[_orig.length - 1];
if (lastIcon.hasAttribute('href')) {
_img.setAttribute('crossOrigin', 'anonymous');
//get width/height
_img.onload = function() {
......@@ -112,7 +113,7 @@
_context = _canvas.getContext('2d');
icon.ready();
};
_img.setAttribute('src', _orig.getAttribute('href'));
_img.setAttribute('src', lastIcon.getAttribute('href'));
} else {
_img.onload = function() {
_h = 32;
......@@ -461,37 +462,40 @@
var link = {};
/**
* Get icon from HEAD tag or create a new <link> element
* Get icons from HEAD tag or create a new <link> element
*/
link.getIcon = function() {
var elm = false;
link.getIcons = function() {
var elms = [];
//get link element
var getLink = function() {
var link = _doc.getElementsByTagName('head')[0].getElementsByTagName('link');
for (var l = link.length, i = (l - 1); i >= 0; i--) {
if ((/(^|\s)icon(\s|$)/i).test(link[i].getAttribute('rel'))) {
return link[i];
var getLinks = function() {
var icons = [];
var links = _doc.getElementsByTagName('head')[0].getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
if ((/(^|\s)icon(\s|$)/i).test(links[i].getAttribute('rel'))) {
icons.push(links[i]);
}
}
return false;
return icons;
};
if (_opt.element) {
elm = _opt.element;
elms = [_opt.element];
} else if (_opt.elementId) {
//if img element identified by elementId
elm = _doc.getElementById(_opt.elementId);
elm.setAttribute('href', elm.getAttribute('src'));
elms = [_doc.getElementById(_opt.elementId)];
elms[0].setAttribute('href', elms[0].getAttribute('src'));
} else {
//if link element
elm = getLink();
if (elm === false) {
elm = _doc.createElement('link');
elm.setAttribute('rel', 'icon');
_doc.getElementsByTagName('head')[0].appendChild(elm);
elms = getLinks();
if (elms.length === 0) {
elms = [_doc.createElement('link')];
elms[0].setAttribute('rel', 'icon');
_doc.getElementsByTagName('head')[0].appendChild(elms[0]);
}
}
elm.setAttribute('type', 'image/png');
return elm;
elms.forEach(function(item) {
item.setAttribute('type', 'image/png');
});
return elms;
};
link.setIcon = function(canvas) {
var url = canvas.toDataURL('image/png');
......@@ -512,21 +516,24 @@
if (_browser.ff || _browser.opera) {
//for FF we need to "recreate" element, atach to dom and remove old <link>
//var originalType = _orig.getAttribute('rel');
var old = _orig;
_orig = _doc.createElement('link');
var old = _orig[_orig.length - 1];
var newIcon = _doc.createElement('link');
_orig = [newIcon];
//_orig.setAttribute('rel', originalType);
if (_browser.opera) {
_orig.setAttribute('rel', 'icon');
newIcon.setAttribute('rel', 'icon');
}
_orig.setAttribute('rel', 'icon');
_orig.setAttribute('type', 'image/png');
_doc.getElementsByTagName('head')[0].appendChild(_orig);
_orig.setAttribute('href', url);
newIcon.setAttribute('rel', 'icon');
newIcon.setAttribute('type', 'image/png');
_doc.getElementsByTagName('head')[0].appendChild(newIcon);
newIcon.setAttribute('href', url);
if (old.parentNode) {
old.parentNode.removeChild(old);
}
} else {
_orig.setAttribute('href', url);
_orig.forEach(function(icon) {
icon.setAttribute('href', url);
});
}
}
};
......
......@@ -14,25 +14,9 @@
<link rel="manifest" href="images/logo/manifest.json?v=3" />
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nocfbnnmjnndkbipkabodnheejiegccf" />
<link rel="icon" sizes="any" type="image/svg+xml" href="assets/favicon.svg?v=3" />
<link rel="icon" sizes="256x256" type="image/png" href="assets/favicon_256.png?v=3" />
<link rel="icon" sizes="192x192" type="image/png" href="assets/favicon_192.png?v=3" />
<link rel="icon" sizes="128x128" type="image/png" href="assets/favicon_128.png?v=3" />
<link rel="icon" sizes="96x96" type="image/png" href="assets/favicon_96.png?v=3" />
<link rel="icon" sizes="64x64" type="image/png" href="assets/favicon_64.png?v=3" />
<!--
<link rel="icon" sizes="48x48" type="image/png" href="/images/logo/favicon-48x48.png?v=3" />
<link rel="icon" sizes="32x32" type="image/png" href="/images/logo/favicon-32x32.png?v=3" />
<link rel="icon" sizes="16x16" type="image/png" href="/images/logo/favicon-16x16.png?v=3" />
-->
<link rel="shortcut icon" sizes="16x16 32x32 48x48" type="image/x-icon" href="assets/favicon_ico.ico?v=3" />
<link rel="apple-touch-icon" sizes="57x57" href="images/logo/apple-touch-icon-57x57.png?v=3" />
<link rel="apple-touch-icon" sizes="60x60" href="images/logo/apple-touch-icon-60x60.png?v=3" />
<link rel="apple-touch-icon" sizes="72x72" href="images/logo/apple-touch-icon-72x72.png?v=3" />
<link rel="apple-touch-icon" sizes="76x76" href="images/logo/apple-touch-icon-76x76.png?v=3" />
<link rel="apple-touch-icon" sizes="114x114" href="images/logo/apple-touch-icon-114x114.png?v=3" />
<link rel="apple-touch-icon" sizes="120x120" href="images/logo/apple-touch-icon-120x120.png?v=3" />
<link rel="apple-touch-icon" sizes="144x144" href="images/logo/apple-touch-icon-144x144.png?v=3" />
<link rel="apple-touch-icon" sizes="152x152" href="images/logo/apple-touch-icon-152x152.png?v=3" />
<link rel="mask-icon" href="/images/logo/safari-pinned-tab.svg" color="#04436a">
<link rel="apple-touch-icon" sizes="180x180" href="images/logo/apple-touch-icon-180x180.png?v=3" />
</head>
......
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/images/logo/mstile-70x70.png?v=3"/>
<square150x150logo src="/images/logo/mstile-150x150.png?v=3"/>
<square310x310logo src="/images/logo/mstile-310x310.png?v=3"/>
<wide310x150logo src="/images/logo/mstile-310x150.png?v=3"/>
<TileColor>#04436a</TileColor>
</tile>
</msapplication>
<msapplication>
<tile>
<square150x150logo src="/images/logo/mstile-150x150.png?v=3"/>
<square310x310logo src="/images/logo/mstile-310x310.png?v=3"/>
<wide310x150logo src="/images/logo/mstile-310x150.png?v=3"/>
<TileColor>#04436a</TileColor>
</tile>
</msapplication>
</browserconfig>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg class="rocket-loader" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<path class="outer" fill="#C1282D" d="M185.094,100.547c0-8.516-2.547-16.683-7.574-24.274c-4.513-6.815-10.835-12.848-18.792-17.93
c-15.359-9.812-35.55-15.216-56.846-15.216c-7.114,0-14.125,0.601-20.926,1.792c-4.22-3.949-9.159-7.502-14.385-10.312
c-27.923-13.532-51.079-0.318-51.079-0.318S37.021,51.974,33.52,67.478c-9.632,9.554-14.852,21.075-14.852,33.07
c0,0.038,0.002,0.076,0.002,0.115c0,0.038-0.002,0.076-0.002,0.114c0,11.995,5.22,23.516,14.852,33.071
c3.501,15.503-18.028,33.188-18.028,33.188s23.156,13.214,51.079-0.317c5.227-2.811,10.166-6.364,14.385-10.313
c6.801,1.19,13.812,1.792,20.925,1.792c21.297,0,41.486-5.404,56.847-15.216c7.956-5.083,14.278-11.115,18.792-17.931
c5.027-7.592,7.574-15.758,7.574-24.274c0-0.038-0.002-0.076-0.002-0.114C185.092,100.624,185.094,100.586,185.094,100.547z"/>
<path class="inner" fill="#FFFFFF" d="M101.882,55.167c39.433,0,71.401,20.419,71.401,45.609c0,25.188-31.968,45.609-71.401,45.609
c-8.781,0-17.189-1.016-24.958-2.866c-7.896,9.498-25.265,22.704-42.138,18.435c5.489-5.896,13.62-15.856,11.879-32.262
c-10.113-7.87-16.185-17.94-16.185-28.916C30.479,75.587,62.448,55.167,101.882,55.167"/>
<g>
<circle fill="#C1282D" cx="101.882" cy="102.245" r="9.484"/>
<circle fill="#C1282D" cx="134.86" cy="102.245" r="9.484"/>
<circle fill="#C1282D" cx="68.902" cy="102.245" r="9.484"/>
</g>
<g>
<path fill="#CDCCCC" d="M101.882,140.385c-8.781,0-17.189-0.88-24.958-2.484c-6.972,7.269-21.331,17.04-36.212,16.681
c-1.959,2.972-4.09,5.401-5.926,7.374c16.873,4.269,34.243-8.937,42.138-18.436c7.769,1.852,16.178,2.867,24.958,2.867
c39.117,0,70.882-20.096,71.39-45.006C172.764,122.97,140.999,140.385,101.882,140.385z"/>
</g>
</svg>
{
"name": "Rocket.Chat",
"icons": [
{
"src": "\/images\/logo\/android-chrome-36x36.png?v=3",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/images\/logo\/android-chrome-48x48.png?v=3",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/images\/logo\/android-chrome-72x72.png?v=3",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/images\/logo\/android-chrome-96x96.png?v=3",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/images\/logo\/android-chrome-144x144.png?v=3",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/images\/logo\/android-chrome-192x192.png?v=3",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
"type": "image\/png"
},
{
"src": "\/images\/logo\/512x512.png?v=3",
"sizes": "512x512",
"type": "image\/png"
}
],
"start_url": "https:\/\/rocket.chat\/home",
......
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M758 4695 c-2 -1 -43 -5 -93 -8 -91 -6 -217 -26 -297 -47 -23 -7 -50
-14 -58 -15 -44 -10 -223 -79 -257 -100 -1 -1 55 -60 126 -131 284 -288 418
-537 413 -768 -2 -77 1 -72 -96 -182 -166 -192 -292 -437 -331 -649 -20 -109
-25 -288 -12 -405 28 -241 151 -503 334 -714 111 -128 104 -115 105 -213 0
-49 -5 -99 -10 -113 -5 -14 -10 -29 -11 -35 -1 -5 -8 -32 -17 -60 -54 -165
-199 -371 -400 -569 l-105 -103 61 -27 c118 -53 233 -87 405 -120 134 -26 387
-26 545 -1 200 32 441 115 575 199 122 76 286 197 337 248 13 13 28 18 46 14
66 -12 133 -21 242 -32 41 -3 89 -8 105 -10 37 -5 433 -4 495 0 41 3 69 6 210
22 25 3 81 11 125 19 44 8 94 16 110 19 17 3 62 12 100 21 39 9 80 18 91 21
35 7 345 110 389 129 187 81 401 199 525 291 122 90 302 258 348 326 9 13 19
25 23 28 22 17 130 190 170 275 89 189 122 337 122 545 0 212 -36 376 -124
556 -209 431 -652 781 -1241 980 -103 35 -302 88 -368 99 -19 3 -42 8 -50 10
-16 4 -30 7 -145 25 -303 48 -822 48 -1068 -1 -73 -14 -89 -11 -128 24 -71 62
-92 79 -172 136 -206 145 -406 232 -651 281 -87 18 -101 19 -221 25 -60 4
-118 8 -127 9 -9 2 -18 3 -20 1z"/>
</g>
</svg>
......@@ -3,7 +3,7 @@
"description": "The Ultimate Open Source WebChat Platform",
"launch_path": "/",
"icons": {
"128": "/images/logo/favicon-128x128.png",
"192": "/images/logo/android-chrome-192x192.png",
"512": "/images/logo/512x512.png"
},
"developer": {
......
RocketChat.Migrations.add({
version: 74,
up: function() {
if (RocketChat && RocketChat.models && RocketChat.models.Settings) {
RocketChat.models.Settings.remove({_id: 'Assets_favicon_64'});
RocketChat.models.Settings.remove({_id: 'Assets_favicon_96'});
RocketChat.models.Settings.remove({_id: 'Assets_favicon_128'});
RocketChat.models.Settings.remove({_id: 'Assets_favicon_256'});
RocketChat.models.Settings.update({_id: 'Assets_favicon_192'}, {
$set: {
i18nLabel: 'android-chrome 192x192 (png)'
}
});
}
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment