Additional menu

Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |

Wordpress developer servicing Melbourne, Brisbane, Sydney, Perth, Adelaide, Canberra

Change Favicon Colour for Dark mode

posted on

This has been reposted with permission from Bill Erickson. You can see the original post here.

When you upload a favicon image in the WordPress customizer, it provides a helpful preview to see how your favicon will appear in browsers using light or dark mode.

When the favicon color doesn’t work well with dark mode, a common fix is to replace the transparent PNG with a JPG that has a white background, but then you end up with a white square in dark mode.

Alternatively, you can use an SVG for the favicon and modify the favicon styling based on the color scheme.

You can see this in use in the recent NerdPress redesign we just launched.

Create SVG favicon

Create a square SVG with your desired icon. It will look something like this:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
	<path fill="#0F145B" d="......" />
</svg>

Remove any styling from the shapes in the SVG (so the fill and stroke attributes) and add those styles with inline CSS.

You can use @media ( prefers-color-scheme: dark ) to style the dark mode version differently. Here’s what my SVG now looks like:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
	<style>
		path {
			fill: #0F145B;
		}
		@media ( prefers-color-scheme: dark ) {
			path {
				fill: #43C1C5;
			}
		}
	</style>
	<path d="....." />
</svg>

Add SVG favicon to your theme

I added my favicon.svg to my theme’s /assets/images/ directory, but you can add it anywhere in your theme.

Add the following code to your theme’s functions.php file to include the SVG favicon.

/**
 * SVG Favicon
 */
function be_svg_favicon() {
	echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() . '/assets/images/favicon.svg' ) . '" type="image/svg+xml">';
}
add_action( 'wp_head', 'be_svg_favicon', 100 );

It seems that the SVG favicon is prioritized over the WP generated one regardless of whether it appears before or after it in the page markup, but I have the priority set to 100 so it will appear after, just in case.

Even with this approach, you should upload a JPG version of the favicon in the WordPress customizer. There are still many browsers that don’t support SVG favicons so you’ll want a fallback.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

Reader Interactions

Comments

  2. KON88 says

    Your style is very unique compared to other people I’ve read stuff from. Thank you for posting when you’ve got the opportunity, Guess I’ll just bookmark this blog.

  6. 헬로밤 says

    I seriously love your site.. Great colors & theme. Did you develop this web site yourself? Please reply back as I’m wanting to create my very own site and would love to learn where you got this from or exactly what the theme is called. Many thanks!

  12. stories viewer says

    I need to to thank you for this wonderful read!! I certainly loved every little bit of it. I have got you saved as a favorite to check out new things you post…

  18. 대구풀싸롱 says

    You’ve made some good points there. I looked on the net to find out more about the issue and found most individuals will go along with your views on this web site.

  19. investeren in startups says

    Next time I read a blog, Hopefully it won’t fail me just as much as this particular one. After all, I know it was my choice to read through, nonetheless I actually thought you’d have something interesting to talk about. All I hear is a bunch of crying about something that you can fix if you were not too busy seeking attention.

  23. Frederic Ahrent says

    Your style is really unique in comparison to other folks I have read stuff from. I appreciate you for posting when you have the opportunity, Guess I will just bookmark this web site.

  26. Server-BAS says

    Быстрый сервер/ВПС/ВДС под парсинг, постинг, разгадывание каптчи.

    https://t.me/s/server_xevil_xrumer_vpsvds_zenno

    Сервер для Xrumer |Xevil | GSA | Xneolinks | A-parser | ZennoPoster | BAS | Антидетект браузер Dolphin

    – Возможность арендовать сервер на 1 час или 1 сутки
    – Для сервера сеть на скорости 1 Гбит!
    – Outline VPN, WireGuard VPN, IPsec VPN.
    – Управляйте серверами на лету.
    – Ubuntu, Debian, CentOS, Oracle 9 – бесплатно
    – Windows – 2022, 2019, 2016, 2012 R2
    – Дата-центр в Москве и Амстердаме
    – Супер (аптайм, скорость, пинг, нагрузка)
    – Более 15 000 сервер уже в работе
    – Отлично подходит под CapMonster
    – Windows – 2012 R2, 2016, 2019, 2022 – бесплатно
    – Отлично подходит под Xneolinks
    – FASTPANEL и HestiaCP – бесплатно
    – Автоматическая установка Windows – бесплатно
    – Отлично подходит под A-Parser
    – Мгновенное развёртывание сервера в несколько кликов – бесплатно
    – Скорость порта подключения к сети интернет — 1000 Мбит/сек
    – Отлично подходит под GSA Search Engine Ranker
    – Отлично подходит под XRumer + XEvil
    – Почасовая оплата
    – Быстрые серверы с NVMe.
    – Круглосуточная техническая поддержка – бесплатно

  34. amateur webcams says

    I’d like to thank you for the efforts you have put in penning this site. I’m hoping to see the same high-grade content by you in the future as well. In truth, your creative writing abilities has encouraged me to get my very own blog now 😉

  35. baskılı poşet says

    This is the right website for everyone who wants to find out about this topic. You understand a whole lot its almost tough to argue with you (not that I actually will need to…HaHa). You definitely put a brand new spin on a subject that has been written about for a long time. Excellent stuff, just great.

  36. poşetçi says

    Spot on with this write-up, I absolutely believe this amazing site needs much more attention. I’ll probably be returning to see more, thanks for the information.

  41. 카지노사이트 says

    Hi, There’s no doubt that your website could possibly be having browser compatibility issues. Whenever I look at your blog in Safari, it looks fine however when opening in Internet Explorer, it’s got some overlapping issues. I just wanted to provide you with a quick heads up! Apart from that, wonderful website.

  43. Christy Taverner says

    Merci pour cet article super intéressant sur [thème de l’article] ! Je voulais juste ajouter un point qui pourrait intéresser certains d’entre vous. Si vous êtes curieux ou cherchez des informations supplémentaires sur les produits liés à l’amélioration de l’expérience de discuter et de futur rencontre et du bien-être personnel, j’ai récemment découvert un site très complet, [Chemsexworld.com]( Chemsexworld.com .?

  44. Delphia Plumb says

    Merci pour cet article super intéressant sur [thème de l’article] ! Je voulais juste ajouter un point qui pourrait intéresser certains d’entre vous. Si vous êtes curieux ou cherchez des informations supplémentaires sur les produits liés à l’amélioration de l’expérience de discuter et de futur rencontre et du bien-être personnel, j’ai récemment découvert un site très complet, [Chemsexworld.com]( Chemsexworld.com .?

  45. 안전놀이터 says

    May I simply say what a relief to find an individual who actually knows what they’re discussing on the web. You actually understand how to bring a problem to light and make it important. A lot more people must read this and understand this side of your story. I can’t believe you’re not more popular since you surely possess the gift.

  48. Clifton Ikard says

    Merci pour cet article super intéressant sur [thème de l’article] ! Je voulais juste ajouter un point qui pourrait intéresser certains d’entre vous. Si vous êtes curieux ou cherchez des informations supplémentaires sur les produits liés à l’amélioration de l’expérience de discuter et de futur rencontre et du bien-être personnel, j’ai récemment découvert un site très complet, [Chemsexworld.com]( Chemsexworld.com .?

  51. blue dream says

    I wanted to thank you for this very good read!! I definitely enjoyed every bit of it. I have you saved as a favorite to check out new things you post…

  53. Rod Paddy says

    Merci pour cet article super intéressant sur [thème de l’article] ! Je voulais juste ajouter un point qui pourrait intéresser certains d’entre vous. Si vous êtes curieux ou cherchez des informations supplémentaires sur les produits liés à l’amélioration de l’expérience de discuter et de futur rencontre et du bien-être personnel, j’ai récemment découvert un site très complet, [Chemsexworld.com]( Chemsexworld.com .?

  54. humandesignjy says

    Тема «Четыре типа в Дизайне Человека» важна для понимания не только на теоретическом, но и на практическом уровне. Этот инструмент самопознания помогает каждому из нас осознать свою природу и использовать индивидуальные особенности для улучшения качества жизни. Рассмотрим рационально-практическую сторону каждого из типов, их определения и различия.

    Ключевым типом в этой системе является Генератор. Он отличаются высокой энергетичностью и способностью легко и эффективно завершать начатые задачи. Их природа требует постоянной активности, поэтому важно находить дело, которое по-настоящему нравится. Генератор начинает действовать, когда ощущает внутренний отклик. Когда Генератор действует из отклика, он не только продуктивен, но и создает вокруг себя атмосферу гармонии и успеха.

    Еще один важный тип в Дизайне Человека — Манифестор. Главное предназначение Манифестора — инициировать, начинать и вести за собой. Они не нуждаются в отклике, как Генераторы, и могут сразу принимать решения и действовать. Манифесторы не подчиняются внешним обстоятельствам, а сами создают свою реальность. Практическая сторона их природы проявляется в том, что они способны запускать процессы и вдохновлять окружающих.

    Также важный элемент системы Дизайна Человека — Проектор. Их задача – управлять и направлять энергию других типов. Они нуждаются в приглашении, прежде чем начать действовать, и могут эффективно использовать энергию, когда работают с другими людьми. Индивидуальная особенность Проектора заключается в умении работать с чужой энергией и направлять ее. Практическая задача Проектора – это координирование и организация.

    И наконец, заключительный тип — Рефлектор. Рефлекторы — это люди, которые отражают состояние окружающей среды. Индивидуальная особенность Рефлектора заключается в том, что они полностью зависят от окружающего мира и людей. Практическая роль Рефлектора — это оценка и отслеживание состояния окружающих.

    В итоге можно сказать следующее: Каждый из четырех типов в Дизайне Человека имеет свои индивидуальные особенности, которые помогают им максимально эффективно взаимодействовать с миром. Понимание своего типа и его практического предназначения позволяет лучше организовать жизнь, выбрать правильные направления для работы и улучшить качество личных отношений.

    источник

  55. Rey Pollmann says

    Merci pour cet article super intéressant sur [thème de l’article] ! Je voulais juste ajouter un point qui pourrait intéresser certains d’entre vous. Si vous êtes curieux ou cherchez des informations supplémentaires sur les produits liés à l’amélioration de l’expérience de discuter et de futur rencontre et du bien-être personnel, j’ai récemment découvert un site très complet, [Chemsexworld.com]( Chemsexworld.com .?

  56. Jesenia Wiers says

    Ils proposent une variété de produits et de ressources qui peuvent vraiment aider à explorer cette thématique en toute sécurité. Ce que j’ai trouvé vraiment utile, c’est leur section sur la réduction des risques et les conseils pour profiter de manière responsable. Ça pourrait être un bon complément à cet article !

  57. packman v4 says

    I’m extremely pleased to discover this website. I want to to thank you for ones time due to this wonderful read!! I definitely liked every little bit of it and I have you saved as a favorite to see new stuff in your site.

  59. Marc Carico says

    I blog quite often and I seriously appreciate your information. This great article has truly peaked my interest. I will take a note of your blog and keep checking for new information about once a week. I opted in for your Feed too.

  60. Lacy Buccellato says

    I blog quite often and I seriously appreciate your information. This great article has truly peaked my interest. I will take a note of your blog and keep checking for new information about once a week. I opted in for your Feed too.

  61. Jacinto Miska says

    I blog quite often and I seriously appreciate your information. This great article has truly peaked my interest. I will take a note of your blog and keep checking for new information about once a week. I opted in for your Feed too.

  62. John Daimaru says

    I blog quite often and I seriously appreciate your information. This great article has truly peaked my interest. I will take a note of your blog and keep checking for new information about once a week. I opted in for your Feed too.

  63. Tommie Charriez says

    I blog quite often and I seriously appreciate your information. This great article has truly peaked my interest. I will take a note of your blog and keep checking for new information about once a week. I opted in for your Feed too.

  64. Trinidad Wiesel says

    I blog quite often and I seriously appreciate your information. This great article has truly peaked my interest. I will take a note of your blog and keep checking for new information about once a week. I opted in for your Feed too.

  65. Altagracia Steakley says

    I blog quite often and I seriously appreciate your information. This great article has truly peaked my interest. I will take a note of your blog and keep checking for new information about once a week. I opted in for your Feed too.

  67. J88 says

    Great blog you have here.. It’s difficult to find high-quality writing like yours nowadays. I seriously appreciate people like you! Take care!!

  73. ДизайнЧеловека says

    Идеальная стратегия поведения в социуме проистекает из вашего типа и является, пожалуй, самым важным знанием, какое только может дать Карта жизни. Стратегия помогает понять, как сделать правильный выбор, и проверить, что находишься на верном пути. Следуя своей стратегии, вы начинаете видеть благоприятные обстоятельства и вовремя действовать, в то время как игнорирование стратегии приводит к событиям, которые могут весьма негативно сказаться на вашей жизни в долгосрочной перспективе. Следуйте своей стратегии, и вы сможете полностью реализовать себя. Дизайн Человека подробно

  78. tubidy says

    This is the right webpage for anyone who really wants to find out about this topic. You know so much its almost tough to argue with you (not that I actually would want to…HaHa). You definitely put a brand new spin on a subject that has been discussed for decades. Excellent stuff, just great.

  80. Blue Dream says

    Great blog you have here.. It’s difficult to find high-quality writing like yours nowadays. I seriously appreciate individuals like you! Take care!!

  93. 슬롯플랫폼 says

    Oh my goodness! Incredible article dude! Many thanks, However I am experiencing troubles with your RSS. I don’t know the reason why I can’t join it. Is there anyone else having the same RSS issues? Anyone who knows the solution will you kindly respond? Thanx!!

  106. 슬롯사이트 says

    Right here is the perfect webpage for anyone who wishes to find out about this topic. You understand a whole lot its almost tough to argue with you (not that I actually would want to…HaHa). You certainly put a fresh spin on a topic which has been discussed for ages. Great stuff, just great.

  108. sugar defender official website says

    As someone who’s constantly bewared about my blood glucose, locating Sugar Defender has actually been an alleviation. I
    feel a lot extra in control, and my recent check-ups have actually revealed positive renovations.

    Knowing I have a reliable supplement to support my routine gives me
    satisfaction. I’m so happy for Sugar Defender’s effect on my health!

  109. sugar defender official website says

    For years, I’ve battled uncertain blood glucose swings that left me really feeling drained and sluggish.
    Yet because including Sugar my power degrees are now secure and consistent, and I no more hit
    a wall in the mid-days. I value that it’s a gentle, all-natural strategy that doesn’t included any type
    of undesirable adverse effects. It’s really transformed my daily life.

  110. sugar defender ingredients says

    Integrating Sugar Defender into my day-to-day program total wellness.
    As someone who prioritizes healthy eating,
    I appreciate the added security this supplement offers.
    Considering that starting to take it, I’ve discovered a significant renovation in my
    energy degrees and a significant reduction in my need for unhealthy snacks such a such an extensive
    impact on my every day life.

  111. sugar defender reviews says

    Sugarcoating Protector to my everyday regimen was just
    one of the very best choices I’ve created my wellness. I take care regarding what I consume, however this supplement includes an additional layer
    of assistance. I feel more consistent throughout
    the day, and my cravings have actually reduced considerably.
    It’s nice to have something so simple that makes such a huge distinction!

  112. sugar defender ingredients says

    For many years, I have actually fought uncertain blood sugar
    swings that left me feeling drained and inactive. But given that incorporating
    Sugar my power degrees are currently steady and consistent, and I no longer hit a wall
    in the mid-days. I value that it’s a gentle, natural method that does not featured any kind of unpleasant adverse effects.
    It’s really changed my daily life.

  113. sugar defender official website says

    Including Sugar Defender into my day-to-day regimen has actually been a
    game-changer for my general wellness. As somebody that already focuses
    on healthy and balanced eating, this supplement has given an added increase of protection. in my power levels, and my desire for harmful
    snacks so simple and easy can have such a
    profound effect on my every day life.

  120. worksheets and listening exercises says

    I’m impressed, I must say. Rarely do I come across a blog that’s both educative and engaging, and let me tell you, you’ve hit the nail on the head. The problem is something which not enough people are speaking intelligently about. Now i’m very happy I found this in my hunt for something relating to this.

  122. tubidy says

    You made some good points there. I looked on the net to learn more about the issue and found most people will go along with your views on this web site.

  125. Linnie says

    Hello there! Do you know if they make any plugins to assist with SEO?
    I’m trying to get my site to rank for some targeted keywords but I’m not seeing very good gains.

    If you know of any please share. Many thanks!
    You can read similar article here: Bij nl

  128. PSAT Test Prep says

    I would like to thank you for the efforts you have put in penning this blog. I really hope to view the same high-grade blog posts by you later on as well. In fact, your creative writing abilities has inspired me to get my own blog now 😉

  129. blue dream strain says

    An impressive share! I’ve just forwarded this onto a co-worker who was doing a little homework on this. And he actually bought me breakfast because I stumbled upon it for him… lol. So allow me to reword this…. Thanks for the meal!! But yeah, thanks for spending the time to talk about this matter here on your web page.

  131. https://snaptik.icu says

    Howdy! This post couldn’t be written any better! Reading through this article reminds me of my previous roommate! He continually kept preaching about this. I most certainly will forward this article to him. Pretty sure he’ll have a great read. I appreciate you for sharing!

  136. moissanite jewelry says

    After going over a few of the articles on your web page, I truly like your technique of blogging. I saved as a favorite it to my bookmark website list and will be checking back soon. Take a look at my web site too and let me know your opinion.

  137. Saxony ducks says

    An intriguing discussion is worth comment. I do believe that you should publish more on this subject, it might not be a taboo subject but generally people don’t discuss such issues. To the next! Cheers.

  139. 천안오피 says

    After I initially commented I appear to have clicked on the -Notify me when new comments are added- checkbox and now whenever a comment is added I recieve 4 emails with the same comment. There has to be a way you are able to remove me from that service? Cheers.

  140. Fake ID says

    After looking at a number of the articles on your blog, I really like your way of writing a blog. I book marked it to my bookmark webpage list and will be checking back in the near future. Please visit my website as well and tell me your opinion.

  142. Moroccotrips says

    Howdy! I just wish to give you a huge thumbs up for your great information you have got right here on this post. I am returning to your site for more soon.

  147. BROBWND says

    Fleetwood mac songs. When is black friday. Wolfram alpha. Typhoon. Art. Cigars. Lookout mountain. Linda ronstadt. Draft day. Schnitzel. Pogo. Shaggy. Tokyo japan. State of the union. Common cold symptoms. Moscow. Area. Michael imperioli. Xi jinping. Africa cup. Recommended. Rolex. Battle of midway. Genius. Belize. Ray bradbury. Haiti. Katakana. Alligator gar. Cognitive behavioral therapy. Johnny carson. Eid. Armenian genocide. Temple university. Gaslight. Pine. Handsome. Monastery. Mask. Ideogram. Ariana greenblatt. Admonish. Battle of gettysburg. Yellow stone. Quaker oats. Liberia. Balthazar. John henry. Inundated. Coronal mass ejection. Balloon. Era. Louisiana. Peanut. Epistemology. Dr doom. Cuyahoga valley national park. Diwali 2023. Wrath of man. https://wqzfzll.filmfilmfilm.eu/IKWXX.html
    The fugitive. Marley and me. Executive branch. Portland oregon. Gary payton. Insulin. Pets. Cringe. J robert oppenheimer. Thai. Cloves. Donald glover movies and tv shows. Jim morrison. Wlamart. Gordita. Jcpenny. Shaq. Gerald ford. Sweet home alabama. Ringworm treatment. Watson. Factor. Vikings football. Disguise. Tsa. General dynamics. Instagra. Taylor.swift. Use. Misoprostol. Hank aaron. Magic mountain. Simi valley. Be. Turks and caicos. Mrs. doubtfire. Tapir. Internet. Atomic bomb. Flour. Hernia. Uranus. Fast five. Abbey road. The odyssey. Gemini horoscope. Dodo bird. Olivia colman. Latter day saints. Adam brody. Plastic. Patsy cline. Claude monet. Maine coon. Ww2. Centipede.

  151. Stairlift scunthorpe says

    I’m very happy to discover this web site. I want to to thank you for your time for this particularly wonderful read!! I definitely appreciated every little bit of it and i also have you book marked to see new stuff in your website.

  154. porn says

    Your style is unique compared to other folks I have read stuff from. Thank you for posting when you’ve got the opportunity, Guess I will just book mark this web site.

  155. dog sling says

    Aw, this was an extremely nice post. Taking a few minutes and actual effort to make a top notch article… but what can I say… I put things off a whole lot and never seem to get nearly anything done.

  157. see says

    You need to be a part of a contest for one of the highest quality blogs online. I’m going to recommend this web site!

  159. dropshipping belgie​ says

    May I simply just say what a comfort to discover a person that truly knows what they’re discussing online. You actually know how to bring a problem to light and make it important. More people really need to check this out and understand this side of the story. I was surprised that you’re not more popular since you most certainly have the gift.

  160. porn says

    You are so interesting! I don’t suppose I’ve read anything like this before. So wonderful to find someone with some genuine thoughts on this issue. Really.. thank you for starting this up. This site is something that is needed on the web, someone with some originality.

Leave a Reply

Your email address will not be published. Required fields are marked *