Uploading files in header.php

Hi Kustv,

First, let me promote the plugin. It’s very light. The code triggered in the public part of the site (… where you want plugins to be *fast*) is straightforward. So it probably won’t slow down your site. And it comes with a few advantages. Your favicon is preserved whenever you change your theme. Your favicon is updated automatically if something changes (think: iOS 9 will be released in a few months).

Alright, now I answer your question ??

You can generate your favicon manually by going to Real Favicon Generator<a/> and by following the instructions of the WordPress codex. Keep in mind that the favicon code will be dropped whenever you change your theme.

Does this help?

Regards,
Philippe

Hello ,
thank you for your reply. Actually, my theme support does not think it is a good idea to edit the head.php( even when using a child theme). They suggested to edit my child theme’s function instead with the following:

function kt_addfavicon_custom(){ ?>

	<link rel="apple-touch-icon" sizes="57×57" href="/apple-touch-icon-57×57.png">
	<link rel="apple-touch-icon" sizes="60×60" href="/apple-touch-icon-60×60.png">
	<link rel="apple-touch-icon" sizes="72×72" href="/apple-touch-icon-72×72.png">
	<link rel="apple-touch-icon" sizes="76×76" href="/apple-touch-icon-76×76.png">
	<link rel="apple-touch-icon" sizes="114×114" href="/apple-touch-icon-114×114.png">
	<link rel="apple-touch-icon" sizes="120×120" href="/apple-touch-icon-120×120.png">
	<link rel="apple-touch-icon" sizes="144×144" href="/apple-touch-icon-144×144.png">
	<link rel="apple-touch-icon" sizes="152×152" href="/apple-touch-icon-152×152.png">
	<link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon-180×180.png">
	<link rel="icon" type="image/png" href="/favicon-32×32.png" sizes="32×32">
	<link rel="icon" type="image/png" href="/android-chrome-192×192.png" sizes="192×192">
	<link rel="icon" type="image/png" href="/favicon-96×96.png" sizes="96×96">
	<link rel="icon" type="image/png" href="/favicon-16×16.png" sizes="16×16">
	<link rel="manifest" href="/manifest.json">
	<meta name="msapplication-TileColor" content="#da532c">
	<meta name="msapplication-TileImage" content="/mstile-144×144.png">
	<meta name="theme-color" content="#ffffff">
<?php }
add_action('wp_head', 'kt_addfavicon_custom');

I am not sure how and where I would need to upload the images though. Would I need to extract the downloaded zip and upload each image individually? Sorry I am a WP beginner…

And what about the browserconfig and manifest.json files?

Changing header.php is the generic way, but if your theme’s support tells you otherwise, you should follow their advice!

About the files location, you should put them in a dedicated directory. For example in wp-content/upload/favicon (you’ll have to create this directory). One you know where the files will be, go to RealFaviconGenerator again and create your favicon one more time. But this time, in the Favicon options, indicate this path as the location (/wp-content/upload/favicon in this example). So the generated HTML will match the actual location of your files.

Yep, you should probably unzip your favicon package on your PC and upload all the files to your site (one by one, really? I’m confident your FTP client can do better than this! ?? )

manifest.json and browserconfig.xml are two extra files for Android Chrome and Internet Explorer 11, respectively. They both specify icons for these platforms.

Don’t think I’m trying to sell you the plugin, but it would automate all this tedious installation process. Just saying ??

Okay, I will give the plugin a try. Just a question though: Is the plugin working through hooks or is it actually editing the header-php?
Also, I noticed when creating a favicon on your website, that the favicon was very blurry(even though the image I uploaded was an svg!). Is there a way to prevent this?
Thank you,
kustv

The plugin is using a single hook to add the favicon code on the fly. It doesn’t modify anything so it can be deactivated or uninstalled safely.

No, the icon is not supposed to be blurry… It might come from the SVG format, I had a few troubles with this some time ago. Could you mail me the picture at [email protected] so I can review it?

I just did! Thank you ??

You’re welcome!