SVG Favicon

Opis

NOW WITH DARK MODE! Safely add an SVG favicon to your site! Don’t 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.

Usage

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:

  • Drop it to a single color (preferably black)
  • Merge art onto a single layer
  • Place it on a transparent background
  • viewBox attribute must be set to “0 0 16 16”

Uploading: Under the SVG Favicon tab, click the “Upload SVG Favicon” field and upload your SVG favicon

Manifest: After uploading your SVG favicon, you can fill out the corresponding manifest. This step is optional. If you already have your site manifest, leave “Use this site manifest” unchecked.

Safari: 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.

Dark Mode (NEW): Here is an example of how to enable dark mode in your svg favicon using the prefers-color-scheme media query:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
    <style>
        path.class-of-path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path.class-of-path {
                fill: #fff;
            }
        }
    </style>
    <path class="class-of-path" fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>

Credits

Snimke zaslona

  • Upload SVG Favicon
  • Upload Pinned Tab Icon for Safari

Instalacija

  1. Install SVG Favicon either via the WordPress.org plugin directory or by uploading the files to your server.
  2. Activate the plugin through the Plugins menu in WordPress.
  3. Go to the Appearance > SVG Favicon to upload your SVG favicon.

ČPP

Can I use svg favicons?

Check SVG favicon browser Compatibility

Can I use dark mode in my svg favicon?

YES! Here is an example of how to enable dark mode in your svg favicon using the prefers-color-scheme media query:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
    <style>
        path.class-of-path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path.class-of-path {
                fill: #fff;
            }
        }
    </style>
    <path class="class-of-path" fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>

Why can’t I see my svg favicon after updating?

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.

Safari’s pinned icon cache stubborn, what can I do?

Try the following:
1. Unpin the tab for your site
2. Quit Safari
3. Remove the Template Icons folder in your Home > Library > Safari folder
4. Restart Safari
5. Refresh the page your testing (page with your mask-icon)
6. Re-pin the tab

Recenzije

08. studenoga 2024.
Repsonding to another review – it works for me on all – 8.2.x, 8.3.x and 8.4. It’s a great plugin. Reason it drops a star – in theory there’s a support forum; in practice there isn’t – you can’t add a question without registering… and it doesn’t allow you to register! All I wanted to ask was whether the autoload aspect was necessary:_transient_svg-favicon_getVersionNumber 11 KB
04. studenoga 2023.
Unfortunately the plugin is not compatible with PHP 8.X I started a support request but I didn’t get any reply. I’m forced to switch to another plugin until is resolved
01. ožujka 2021. 1 odgovor
So, don’t know what the issue is. But it didn’t work out for me. I’ll have to go give a try to some other options. I’m giving 3 starts because 1 star is too cruel for a plugin with 1 other review.
10. veljače 2021.
After trying to optimize my png favicons with multiple sized and multiple exports, I found the SVG Favicon plugin. After installing, painlessly and within 5 minutes, I was able to include an SVG file for my favicon that scales cleanly to all sizes. Highly recommended.
Pročitajte svih 6 recenzija

Suradnici i Programeri

“SVG Favicon” je softver otvorenog koda. Sljedeće osobe su doprinijele ovom dodatku.

Suradnici

“SVG Favicon” je preveden na 2 jezika. Zahvala prevoditeljima za njihov doprinos.

Prevedite “SVG Favicon” na svoj jezik.

Zainteresirani ste za razvoj?

Pregledajte kôd, pogledajte SVN spremišteili se pretplatite na dnevnik razvoja od RSS.

Dnevnik promjena

1.5.2

• Bug Fixes

1.5.1

• Bug Fixes

1.5

• Updated for WP 6.5
• Fully compatible with PHP 8.3

1.2.6

• Updated for WP 6.2

1.2.3

• Updated for WP 6.0

1.2.2

• Fixed typos and updated language file

1.2

• Now with dark mode support

1.0

• Initial Release.