Skip to content
This repository was archived by the owner on Jul 10, 2024. It is now read-only.

Commit b9252c8

Browse files
xf-xf-
committed
[TASK] Add favicon generator (incl. app tiles) and logo
1 parent 78b6157 commit b9252c8

25 files changed

+395
-19
lines changed

‎assets/favicon/android-chrome-192x192.png

3.75 KB
Loading

‎assets/favicon/android-chrome-512x512.png

9.22 KB
Loading

‎assets/favicon/apple-touch-icon.png

2.76 KB
Loading

‎assets/favicon/browserconfig.xml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<browserconfig>
3+
<msapplication>
4+
<tile>
5+
<square70x70logo src="./mstile-70x70.png"/>
6+
<square150x150logo src="./mstile-150x150.png"/>
7+
<square310x310logo src="./mstile-310x310.png"/>
8+
<wide310x150logo src="./mstile-310x150.png"/>
9+
<TileColor>#dc0067</TileColor>
10+
</tile>
11+
</msapplication>
12+
</browserconfig>

‎assets/favicon/favicon-16x16.png

624 Bytes
Loading

‎assets/favicon/favicon-32x32.png

1 KB
Loading

‎assets/favicon/favicon.ico

14.7 KB
Binary file not shown.

‎assets/favicon/manifest.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "Meshviewer",
3+
"icons": [
4+
{
5+
"src": "./android-chrome-192x192.png",
6+
"sizes": "192x192",
7+
"type": "image/png"
8+
},
9+
{
10+
"src": "./android-chrome-512x512.png",
11+
"sizes": "512x512",
12+
"type": "image/png"
13+
}
14+
],
15+
"theme_color": "#dc0067",
16+
"background_color": "#dc0067",
17+
"display": "standalone"
18+
}

‎assets/favicon/mstile-144x144.png

2.95 KB
Loading

‎assets/favicon/mstile-150x150.png

2.59 KB
Loading

‎assets/favicon/mstile-310x150.png

2.63 KB
Loading

‎assets/favicon/mstile-310x310.png

4.87 KB
Loading

‎assets/favicon/mstile-70x70.png

2.13 KB
Loading

‎assets/favicon/safari-pinned-tab.svg

+134
Loading

‎assets/faviconData.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/favicons.zip","files_urls":["https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/browserconfig.xml","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/favicon.ico","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/manifest.json","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/package_files/safari-pinned-tab.svg"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"./apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" href=\"./favicon-32x32.png\" sizes=\"32x32\">\n<link rel=\"icon\" type=\"image/png\" href=\"./favicon-16x16.png\" sizes=\"16x16\">\n<link rel=\"manifest\" href=\"./manifest.json\">\n<link rel=\"mask-icon\" href=\"./safari-pinned-tab.svg\" color=\"#dc0067\">\n<link rel=\"shortcut icon\" href=\"./favicon.ico\">\n<meta name=\"apple-mobile-web-app-title\" content=\"Meshviewer\">\n<meta name=\"application-name\" content=\"Meshviewer\">\n<meta name=\"msapplication-TileColor\" content=\"#dc0067\">\n<meta name=\"msapplication-TileImage\" content=\"./mstile-144x144.png\">\n<meta name=\"msapplication-config\" content=\"./browserconfig.xml\">\n<meta name=\"theme-color\" content=\"#dc0067\">","compression":"true","overlapping_markups":["link[rel=\"apple-touch-icon\"]","meta[name=\"apple-mobile-web-app-title\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-TileImage\"]","meta[name=\"msapplication-config\"]","meta[name=\"application-name\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"."},"preview_picture_url":"https://realfavicongenerator.net/files/03dc81277d21a8ed4bb836b4c05ada2ee75b9e3c/favicon_preview.png","version":"0.14"}

‎assets/logo.svg

+7
Loading

‎gulp/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ module.exports = function () {
33

44
return {
55
build: build,
6+
faviconData: 'assets/faviconData.json',
67
src: {
78
sass: 'scss/**/*.scss',
89
javascript: ['app.js', 'lib/**/*.js'],

‎gulp/tasks/copy.js

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ module.exports = function (gulp, plugins, config) {
22
return function copy() {
33
gulp.src(['html/*.html', 'assets/favicon/*'])
44
.pipe(gulp.dest(config.build));
5+
gulp.src(['assets/logo.svg'])
6+
.pipe(gulp.dest(config.build));
57
gulp.src('node_modules/promise-polyfill/promise.js')
68
.pipe(gulp.dest(config.build + '/vendor'));
79
return gulp.src(['assets/fonts/*', 'assets/icons/fonts/*'])

‎gulp/tasks/favicon.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
module.exports = function (gulp, plugins, config) {
2+
return function javascript(cb) {
3+
plugins.realFavicon.generateFavicon({
4+
masterPicture: 'assets/logo.svg',
5+
dest: 'assets/favicon',
6+
iconsPath: '.',
7+
design: {
8+
ios: {
9+
pictureAspect: 'backgroundAndMargin',
10+
backgroundColor: '#000000',
11+
margin: '14%',
12+
assets: {
13+
ios6AndPriorIcons: false,
14+
ios7AndLaterIcons: false,
15+
precomposedIcons: false,
16+
declareOnlyDefaultIcon: true
17+
},
18+
appName: 'Meshviewer'
19+
},
20+
desktopBrowser: {},
21+
windows: {
22+
pictureAspect: 'noChange',
23+
backgroundColor: '#dc0067',
24+
onConflict: 'override',
25+
assets: {
26+
windows80Ie10Tile: false,
27+
windows10Ie11EdgeTiles: {
28+
small: true,
29+
medium: true,
30+
big: true,
31+
rectangle: false
32+
}
33+
},
34+
appName: 'Meshviewer'
35+
},
36+
androidChrome: {
37+
// pictureAspect: 'shadow',
38+
themeColor: '#dc0067',
39+
manifest: {
40+
name: 'Meshviewer',
41+
display: 'standalone',
42+
orientation: 'notSet',
43+
onConflict: 'override',
44+
declared: true
45+
},
46+
assets: {
47+
legacyIcon: false,
48+
lowResolutionIcons: false
49+
}
50+
},
51+
safariPinnedTab: {
52+
pictureAspect: 'silhouette',
53+
themeColor: '#dc0067'
54+
}
55+
},
56+
settings: {
57+
compression: 2,
58+
scalingAlgorithm: 'Mitchell',
59+
errorOnImageTooSmall: false
60+
},
61+
markupFile: config.faviconData
62+
});
63+
return cb();
64+
};
65+
};

‎gulp/tasks/html.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
const fs = require('fs');
12
module.exports = function (gulp, plugins, config, env) {
23
return function html() {
34
return gulp.src(env.production() ? config.build + '/*.html' : 'html/*.html')
@@ -13,6 +14,7 @@ module.exports = function (gulp, plugins, config, env) {
1314
}
1415
}))
1516
.pipe(env.production(plugins.kyhInlineSource({ compress: false })))
17+
.pipe(plugins.realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(config.faviconData)).favicon.html_code))
1618
.pipe(plugins.cacheBust({
1719
type: 'timestamp'
1820
}))

‎gulpfile.js

+4
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ function getTask(task) {
1414
return require('./gulp/tasks/' + task)(gulp, plugins, config, env);
1515
}
1616

17+
gulp.task('generate-favicon',
18+
getTask('favicon')
19+
);
20+
1721
require('./gulp/serve')(gulp, plugins, config, env);
1822
gulp.task('serve',
1923
gulp.series(

‎html/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
<div class="loader">
1616
<p>
1717
Lade<br />
18-
<span class="spinner"></span><br />
18+
<img inline src="logo.svg" class="spinner" />
19+
<br />
1920
Karten &amp; Knoten...
2021
</p>
2122
<noscript>

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"gulp-jsonminify": "^1.0.0",
2626
"gulp-kyh-inline-source": "^3.0.2",
2727
"gulp-load-plugins": "^1.5.0",
28+
"gulp-real-favicon": "^0.2.2",
2829
"gulp-requirejs-optimize": "^1.2.0",
2930
"gulp-sass": "^3.1.0",
3031
"gulp-sass-lint": "^1.3.2",

0 commit comments

Comments
 (0)