Add adaptive SVG favicon and more SVG variants
See https://web.dev/building-an-adaptive-favicon/ Added more variant of the original Inkscape icon: - Text SVG - Vectorized text path SVG - Optimized SVG icon
This commit is contained in:
Frédéric Guillot
Frédéric Guillot
parent
224a15692c
commit
a88788f3fc
|
|
@ -30,6 +30,7 @@
|
|||
<?= $this->hook->asset('css', 'template:layout:css') ?>
|
||||
<?= $this->hook->asset('js', 'template:layout:js') ?>
|
||||
|
||||
<link rel="icon" href="<?= $this->url->dir() ?>assets/img/adaptive-favicon.svg" type="image/svg+xml">
|
||||
<link rel="icon" type="image/png" href="<?= $this->url->dir() ?>assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="<?= $this->url->dir() ?>assets/img/touch-icon-iphone.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="<?= $this->url->dir() ?>assets/img/touch-icon-ipad.png">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
Icons
|
||||
=====
|
||||
|
||||
- `adaptive-favicon.svg`: Icon with embedded CSS that can be served with a dark or light theme
|
||||
- `inkscape-text-icon.svg`: Original Inkscape file
|
||||
- `inkscape-path-icon.svg`: Inkscape file with the text converted to path (Inkscape: `Path -> Object to Path`)
|
||||
- `inkscape-optimized-icon.svg`: Inkscape export striped of unecessary elements (Inkscape: `Save as -> Save as Optimized SVG`)
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<svg version="1.1" viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#b {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<g transform="translate(0 -908.36)">
|
||||
<path id="k" transform="scale(.82874 1.2066)" d="m86.692 856.38h-27.513l-25.994-34.814-5.2572 6.367v28.447h-22.431v-86.977h22.431v39.37l31.076-39.37h25.994l-33.996 40.247z" fill="#d40000" stroke-width="1.0109" aria-label="K"/>
|
||||
<path id="b" transform="scale(.9009 1.11)" d="m154.53 901.82q0 7.0603-2.6715 12.467-2.6715 5.4065-7.1875 8.9049-5.3429 4.198-11.767 5.979-6.3606 1.781-16.22 1.781h-33.584v-94.71h28.05q10.368 0 15.52 0.76328 5.1521 0.76328 9.859 3.1803 5.2157 2.7351 7.5692 7.0603 2.3534 4.2616 2.3534 10.241 0 6.7423-3.4348 11.513-3.4348 4.7069-9.1593 7.5692v0.50885q9.6046 1.9718 15.138 8.4597 5.5338 6.4242 5.5338 16.283zm-21.181-42.68q0-3.4348-1.1449-5.7882-1.1449-2.3534-3.6892-3.8164-2.9895-1.7174-7.2511-2.099-4.2616-0.44525-10.559-0.44525h-15.011v27.351h16.283q5.9154 0 9.4138-0.57246 3.4984-0.63607 6.4879-2.5443 2.9895-1.9082 4.198-4.8977 1.2721-3.0531 1.2721-7.1875zm8.078 43.189q0-5.7246-1.7174-9.0957-1.7174-3.3711-6.2334-5.7246-3.0531-1.5902-7.442-2.0354-4.3252-0.50886-10.559-0.50886h-19.782v35.238h16.665q8.2688 0 13.548-0.82689 5.2793-0.89049 8.6505-3.1803 3.562-2.4806 5.2157-5.661 1.6538-3.1803 1.6538-8.2052z" fill="#2b0000" stroke-width="1.0012" aria-label="B"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,84 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="144"
|
||||
height="144"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.2 r9819"
|
||||
inkscape:export-filename="/Users/fred/Devel/websites/miniflux/favicon.png"
|
||||
inkscape:export-xdpi="40"
|
||||
inkscape:export-ydpi="40"
|
||||
sodipodi:docname="icon.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="1"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1"
|
||||
inkscape:cx="125.35606"
|
||||
inkscape:cy="101.67816"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1366"
|
||||
inkscape:window-height="720"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-908.36218)">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:32.87251282px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#d40000;fill-opacity:1;stroke:none;font-family:Sans"
|
||||
x="-0.76592249"
|
||||
y="865.71136"
|
||||
id="text3769"
|
||||
sodipodi:linespacing="125%"
|
||||
transform="scale(0.83777396,1.1936394)"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan3771"
|
||||
x="-0.76592249"
|
||||
y="865.71136"
|
||||
style="font-size:118.34104919px;font-weight:bold;fill:#d40000;-inkscape-font-specification:Sans Bold">K</tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:130.11079407px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#2b0000;fill-opacity:1;stroke:none;font-family:Sans"
|
||||
x="78.060204"
|
||||
y="932.96344"
|
||||
id="text3102"
|
||||
sodipodi:linespacing="125%"
|
||||
transform="scale(0.90196969,1.1086847)"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan3104"
|
||||
x="78.060204"
|
||||
y="932.96344">B</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.8 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
<svg version="1.1" viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(0 -908.36)">
|
||||
<path transform="scale(.82874 1.2066)" d="m86.692 856.38h-27.513l-25.994-34.814-5.2572 6.367v28.447h-22.431v-86.977h22.431v39.37l31.076-39.37h25.994l-33.996 40.247z" fill="#d40000" stroke-width="1.0109" aria-label="K"/>
|
||||
<path transform="scale(.9009 1.11)" d="m154.53 901.82q0 7.0603-2.6715 12.467-2.6715 5.4065-7.1875 8.9049-5.3429 4.198-11.767 5.979-6.3606 1.781-16.22 1.781h-33.584v-94.71h28.05q10.368 0 15.52 0.76328 5.1521 0.76328 9.859 3.1803 5.2157 2.7351 7.5692 7.0603 2.3534 4.2616 2.3534 10.241 0 6.7423-3.4348 11.513-3.4348 4.7069-9.1593 7.5692v0.50885q9.6046 1.9718 15.138 8.4597 5.5338 6.4242 5.5338 16.283zm-21.181-42.68q0-3.4348-1.1449-5.7882-1.1449-2.3534-3.6892-3.8164-2.9895-1.7174-7.2511-2.099-4.2616-0.44525-10.559-0.44525h-15.011v27.351h16.283q5.9154 0 9.4138-0.57246 3.4984-0.63607 6.4879-2.5443 2.9895-1.9082 4.198-4.8977 1.2721-3.0531 1.2721-7.1875zm8.078 43.189q0-5.7246-1.7174-9.0957-1.7174-3.3711-6.2334-5.7246-3.0531-1.5902-7.442-2.0354-4.3252-0.50886-10.559-0.50886h-19.782v35.238h16.665q8.2688 0 13.548-0.82689 5.2793-0.89049 8.6505-3.1803 3.562-2.4806 5.2157-5.661 1.6538-3.1803 1.6538-8.2052z" fill="#2b0000" stroke-width="1.0012" aria-label="B"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,90 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="144"
|
||||
height="144"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="1.3 (0e150ed, 2023-07-21)"
|
||||
inkscape:export-filename="/Users/fred/Devel/websites/miniflux/favicon.png"
|
||||
inkscape:export-xdpi="40"
|
||||
inkscape:export-ydpi="40"
|
||||
sodipodi:docname="inkscape-path-icon.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="1"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="4"
|
||||
inkscape:cx="83.125"
|
||||
inkscape:cy="95.125"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true"
|
||||
inkscape:window-width="1392"
|
||||
inkscape:window-height="1212"
|
||||
inkscape:window-x="828"
|
||||
inkscape:window-y="157"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1">
|
||||
<inkscape:grid
|
||||
id="grid1"
|
||||
units="px"
|
||||
originx="0"
|
||||
originy="0"
|
||||
spacingx="1"
|
||||
spacingy="1"
|
||||
empcolor="#0099e5"
|
||||
empopacity="0.30196078"
|
||||
color="#0099e5"
|
||||
opacity="0.14901961"
|
||||
empspacing="5"
|
||||
dotted="false"
|
||||
gridanglex="30"
|
||||
gridanglez="30"
|
||||
visible="true" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-908.36218)">
|
||||
<path
|
||||
style="font-weight:bold;font-size:119.63px;line-height:1.25;-inkscape-font-specification:'Sans Bold';letter-spacing:0px;word-spacing:0px;fill:#d40000;stroke-width:1.01089"
|
||||
d="M 86.691831,856.38123 H 59.179268 l -25.993822,-34.8142 -5.257178,6.36702 v 28.44718 H 5.4976436 V 769.40414 H 27.928268 v 39.37042 l 31.075761,-39.37042 h 25.993823 l -33.996416,40.24662 z"
|
||||
id="text3769"
|
||||
transform="scale(0.82874493,1.2066439)"
|
||||
aria-label="K" />
|
||||
<path
|
||||
style="font-size:130.266px;line-height:1.25;letter-spacing:0px;word-spacing:0px;fill:#2b0000;stroke-width:1.00119"
|
||||
d="m 154.53448,901.82082 q 0,7.06032 -2.67147,12.46687 -2.67147,5.40654 -7.18753,8.9049 -5.34294,4.19802 -11.76719,5.97901 -6.36065,1.78098 -16.21965,1.78098 H 83.104438 v -94.71001 h 28.050442 q 10.36785,0 15.51998,0.76328 5.15212,0.76328 9.85899,3.18032 5.21573,2.73508 7.56917,7.06032 2.35344,4.26163 2.35344,10.24064 0,6.74228 -3.43475,11.51276 -3.43475,4.70688 -9.15933,7.56917 v 0.50885 q 9.60458,1.9718 15.13834,8.45966 5.53376,6.42425 5.53376,16.28325 z M 133.35353,859.1409 q 0,-3.43475 -1.14491,-5.78819 -1.14492,-2.35344 -3.68918,-3.81639 -2.9895,-1.71737 -7.25113,-2.09901 -4.26164,-0.44525 -10.55867,-0.44525 H 95.698515 v 27.35078 h 16.283255 q 5.9154,0 9.41375,-0.57246 3.49835,-0.63607 6.48786,-2.54426 2.9895,-1.90819 4.19802,-4.8977 1.27213,-3.05311 1.27213,-7.18752 z m 8.07802,43.18877 q 0,-5.72458 -1.71737,-9.09572 -1.71738,-3.37114 -6.23343,-5.72458 -3.05311,-1.59016 -7.44196,-2.0354 -4.32524,-0.50886 -10.55867,-0.50886 H 95.698515 v 35.23798 H 112.3634 q 8.26884,0 13.54818,-0.82689 5.27933,-0.89049 8.65047,-3.18032 3.56197,-2.48065 5.21573,-5.66097 1.65377,-3.18033 1.65377,-8.20524 z"
|
||||
id="text3102"
|
||||
transform="scale(0.90089659,1.1100053)"
|
||||
aria-label="B" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,103 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="144"
|
||||
height="144"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="1.3 (0e150ed, 2023-07-21)"
|
||||
inkscape:export-filename="/Users/fred/Devel/websites/miniflux/favicon.png"
|
||||
inkscape:export-xdpi="40"
|
||||
inkscape:export-ydpi="40"
|
||||
sodipodi:docname="inkscape-text-icon.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="1"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="4"
|
||||
inkscape:cx="83.125"
|
||||
inkscape:cy="95.125"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true"
|
||||
inkscape:window-width="1392"
|
||||
inkscape:window-height="1212"
|
||||
inkscape:window-x="828"
|
||||
inkscape:window-y="157"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1">
|
||||
<inkscape:grid
|
||||
id="grid1"
|
||||
units="px"
|
||||
originx="0"
|
||||
originy="0"
|
||||
spacingx="1"
|
||||
spacingy="1"
|
||||
empcolor="#0099e5"
|
||||
empopacity="0.30196078"
|
||||
color="#0099e5"
|
||||
opacity="0.14901961"
|
||||
empspacing="5"
|
||||
dotted="false"
|
||||
gridanglex="30"
|
||||
gridanglez="30"
|
||||
visible="true" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-908.36218)">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:12.1307px;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#d40000;fill-opacity:1;stroke:none;stroke-width:1.01089"
|
||||
x="-5.6008425"
|
||||
y="856.38123"
|
||||
id="text3769"
|
||||
transform="scale(0.82874493,1.2066439)"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan3771"
|
||||
x="-5.6008425"
|
||||
y="856.38123"
|
||||
style="font-weight:bold;font-size:119.63px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'Sans Bold';fill:#d40000;stroke-width:1.01089">K</tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:12.0143px;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#2b0000;fill-opacity:1;stroke:none;stroke-width:1.00119"
|
||||
x="70.383148"
|
||||
y="930.95258"
|
||||
id="text3102"
|
||||
transform="scale(0.90089659,1.1100053)"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan3104"
|
||||
x="70.383148"
|
||||
y="930.95258"
|
||||
style="font-size:130.266px;line-height:1.25;font-family:sans-serif;stroke-width:1.00119">B</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
Loading…
Reference in New Issue