{"id":125532,"date":"2020-08-01T01:45:02","date_gmt":"2020-08-01T01:45:02","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/svg-favicon\/"},"modified":"2025-07-05T01:45:07","modified_gmt":"2025-07-05T01:45:07","slug":"svg-favicon","status":"closed","type":"plugin","link":"https:\/\/he.wordpress.org\/plugins\/svg-favicon\/","author":18131993,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.5.5","stable_tag":"1.5.5","tested":"6.8.5","requires":"5.1","requires_php":"7.4.30","requires_plugins":null,"header_name":"SVG Favicon","header_author":"a 415 Production","header_description":"Quickly upload a SVG favicon to your site","assets_banners_color":"5d5e61","last_updated":"2025-07-05 01:45:07","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/www.paypal.com\/cgi-bin\/webscr?cmd=_s-xclick&hosted_button_id=DBMA4K32F6BAY&source=url","header_plugin_uri":"https:\/\/a415production.com\/products\/plugins\/svg-plugin","header_author_uri":"https:\/\/a415production.com","rating":4,"author_block_rating":0,"active_installs":1000,"downloads":18508,"num_ratings":6,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0":{"tag":"1.0","author":"a415production","date":"2020-08-01 01:44:54"},"1.3":{"tag":"1.3","author":"a415production","date":"2025-07-05 01:45:07"},"1.5.2":{"tag":"1.5.2","author":"a415production","date":"2024-05-30 06:49:43"},"1.5.5":{"tag":"1.5.5","author":"a415production","date":"2025-07-05 01:45:07"}},"upgrade_notice":{"1.2":"<p>Now with dark mode support. Adding a site icon via the customizer to enable SVG Favicon is no longer required (WP 5.9)<\/p>"},"ratings":{"1":0,"2":1,"3":1,"4":1,"5":3},"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":2350150,"resolution":"256x256","location":"assets","locale":""},"icon.svg":{"filename":"icon.svg","revision":2350150,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":2687234,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":2687234,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0","1.3","1.5.2","1.5.5"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":2350150,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":2350150,"resolution":"2","location":"assets","locale":""}},"screenshots":{"1":"Upload SVG Favicon","2":"Upload Pinned Tab Icon for Safari"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[173231,3841,48652,2904,208160],"plugin_category":[50],"plugin_contributors":[189075],"plugin_business_model":[],"class_list":["post-125532","plugin","type-plugin","status-closed","hentry","plugin_tags-dark-mode","plugin_tags-favicon","plugin_tags-favicon-ico","plugin_tags-svg","plugin_tags-svg-favicon","plugin_category-media","plugin_contributors-a415production","plugin_committers-a415production"],"banners":[],"icons":{"svg":"https:\/\/ps.w.org\/svg-favicon\/assets\/icon.svg?rev=2350150","icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/svg-favicon_5d5e61.svg","icon_2x":false,"generated":true},"screenshots":[{"src":"https:\/\/ps.w.org\/svg-favicon\/assets\/screenshot-1.png?rev=2350150","caption":"Upload SVG Favicon"},{"src":"https:\/\/ps.w.org\/svg-favicon\/assets\/screenshot-2.png?rev=2350150","caption":"Upload Pinned Tab Icon for Safari"}],"raw_content":"<!--section=description-->\n<p><strong>NOW WITH DARK MODE!<\/strong>  Safely add an SVG favicon to your site! Don\u2019t limit your site favicon to the .ico\/png\/jpg formats! Upload cool vector art from your favorite vector app in seconds! Support is common for SVG favicons in modern browsers. Favicon meta generated by the customizer will not be over-written, giving older browsers a fallback in the event they lack support SVG favicons.<\/p>\n\n<h3>Usage<\/h3>\n\n<p>Before uploading your SVG favicon, make sure the aspect ratio is 1:1. For Safari, create a copy of your SVG and do the following:<\/p>\n\n<ul>\n<li>Drop it to a single color (preferably black)<\/li>\n<li>Merge art onto a single layer<\/li>\n<li>Place it on a transparent background<\/li>\n<li><strong>viewBox<\/strong> attribute must be set to \"0 0 16 16\"<\/li>\n<\/ul>\n\n<p><strong>Uploading<\/strong>: Under the SVG Favicon tab, click the \u201cUpload SVG Favicon\u201d field and upload your SVG favicon<\/p>\n\n<p><strong>Manifest<\/strong>: After uploading your SVG favicon, you can fill out the corresponding manifest. This step is optional. If you already have your site manifest, leave \u201cUse this site manifest\u201d unchecked.<\/p>\n\n<p><strong>Safari<\/strong>: The upload process for a pinned tab icon is the same as above. Please note that pinned tab icons should be 100% black with a transparent background. The mask icon color will determine the color of the pinned tab icon.<\/p>\n\n<p><strong>Dark Mode (NEW)<\/strong>: Here is an example of how to enable dark mode in your svg favicon using the <code>prefers-color-scheme<\/code> media query:<\/p>\n\n<pre><code>&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\"&gt;\n    &lt;style&gt;\n        path.class-of-path {\n            fill: #000;\n        }\n        @media (prefers-color-scheme: dark) {\n            path.class-of-path {\n                fill: #fff;\n            }\n        }\n    &lt;\/style&gt;\n    &lt;path class=\"class-of-path\" fill-rule=\"evenodd\" d=\"M0 0h16v16H0z\"\/&gt;\n&lt;\/svg&gt;\n<\/code><\/pre>\n\n<h4>Credits<\/h4>\n\n<ul>\n<li>Artwork by <a href=\"https:\/\/www.onlinewebfonts.com\/icon\/\">Online Web Fonts<\/a> - <a href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">license<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/darylldoyle\/svg-sanitizer\">SVG Sanitizer<\/a> - <a href=\"https:\/\/www.gnu.org\/licenses\/old-licenses\/gpl-2.0.en.html\">license<\/a><\/li>\n<li><a href=\"https:\/\/atomiks.github.io\/tippyjs\/\">Tippy.js<\/a> - <a href=\"https:\/\/opensource.org\/licenses\/MIT\">license<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/Simonwep\/pickr\">Picker<\/a> - <a href=\"https:\/\/opensource.org\/licenses\/MIT\">license<\/a><\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Install SVG Favicon either via the WordPress.org plugin directory or by uploading the files to your server.<\/li>\n<li>Activate the plugin through the <strong>Plugins<\/strong> menu in WordPress.<\/li>\n<li>Go to the <strong>Appearance &gt; SVG Favicon<\/strong> to upload your SVG favicon.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='can%20i%20use%20svg%20favicons%3F'><h3>Can I use svg favicons?<\/h3><\/dt>\n<dd><p><a href=\"https:\/\/caniuse.com\/#feat=link-icon-svg\">Check SVG favicon browser Compatibility<\/a><\/p><\/dd>\n<dt id='can%20i%20use%20dark%20mode%20in%20my%20svg%20favicon%3F'><h3>Can I use dark mode in my svg favicon?<\/h3><\/dt>\n<dd><p>YES! Here is an example of how to enable dark mode in your svg favicon using the <code>prefers-color-scheme<\/code> media query:<\/p>\n\n<pre><code>&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\"&gt;\n    &lt;style&gt;\n        path.class-of-path {\n            fill: #000;\n        }\n        @media (prefers-color-scheme: dark) {\n            path.class-of-path {\n                fill: #fff;\n            }\n        }\n    &lt;\/style&gt;\n    &lt;path class=\"class-of-path\" fill-rule=\"evenodd\" d=\"M0 0h16v16H0z\"\/&gt;\n&lt;\/svg&gt;\n<\/code><\/pre><\/dd>\n<dt id='why%20can%27t%20i%20see%20my%20svg%20favicon%20after%20updating%3F'><h3>Why can't I see my svg favicon after updating?<\/h3><\/dt>\n<dd><p>If you are running a caching plugin for your WordPress installation, trying emptying the caches. If that doesn't work, try emptying your browser cache and restarting.<\/p><\/dd>\n<dt id='safari%27s%20pinned%20icon%20cache%20stubborn%2C%20what%20can%20i%20do%3F'><h3>Safari's pinned icon cache stubborn, what can I do?<\/h3><\/dt>\n<dd><p>Try the following:\n1. Unpin the tab for your site\n2. Quit Safari\n3. Remove the <strong>Template Icons<\/strong> folder in your <strong>Home &gt; Library &gt; Safari folder<\/strong>\n4. Restart Safari\n5. Refresh the page your testing (page with your mask-icon)\n6. Re-pin the tab<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.5.5<\/h4>\n\n<p>\u2022 Bug Fixes<\/p>\n\n<h4>1.5.2<\/h4>\n\n<p>\u2022 Bug Fixes<\/p>\n\n<h4>1.5.1<\/h4>\n\n<p>\u2022 Bug Fixes<\/p>\n\n<h4>1.5<\/h4>\n\n<p>\u2022 Updated for WP 6.5\n\u2022 Fully compatible with PHP 8.3<\/p>\n\n<h4>1.2.6<\/h4>\n\n<p>\u2022 Updated for WP 6.2<\/p>\n\n<h4>1.2.3<\/h4>\n\n<p>\u2022 Updated for WP 6.0<\/p>\n\n<h4>1.2.2<\/h4>\n\n<p>\u2022 Fixed typos and updated language file<\/p>\n\n<h4>1.2<\/h4>\n\n<p>\u2022 Now with dark mode support<\/p>\n\n<h4>1.0<\/h4>\n\n<p>\u2022 Initial Release.<\/p>","raw_excerpt":"Upload SVG favicons to your site!","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/125532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=125532"}],"author":[{"embeddable":true,"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/a415production"}],"wp:attachment":[{"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=125532"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=125532"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=125532"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=125532"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=125532"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/he.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=125532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}