Skip to content

Commit

Permalink
FavIcon plugin fine-tuning
Browse files Browse the repository at this point in the history 
In some cases, especially with shared hosts, there is already a favicon.ico file in the HTTP root directory. However, a development document at Googledocs describes that there should only be one icon per HTTP host/website.

My observation over several weeks in the Google Searchconsole is that the crawler is irritated if either several favicon.ico files are present in the website (http host) or the crawler is fobbed off with 404.

The effect is that no favicon file is displayed in the search results during indexing.

A temporary redirection http_response_code(307) when the plugin is active seems more elegant -> implemented here. When the plugin is active, the user agent and the crawler also receive a message (?v=2) that the HTTP host is equipped with new favicons.

In addition, some FlatPress icons have been given a final polish. This is particularly noticeable on mobile devices and search engines, but also when creating a FlatPress link in social media.

You can use https://realfavicongenerator.net/favicon_checker for testing.
  • Loading branch information
@Fraenkiman
Fraenkiman authored Jun 20, 2024
2 parents 79e6910 + bf262a9 commit 0c8cb65
Show file tree
Hide file tree
Showing 9 changed files with 74 additions and 45 deletions.
4 changes: 2 additions & 2 deletions fp-plugins/favicon/doc_favicon.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ If you want to use your own favicon, please make sure that the favicon is a mult
The favicon.ico file should be a multi-layered icon with the sizes 16x16, 32x32 and 48x48.

To display the favicon correctly on mobile Android devices, the path in the site.webmanifest.json.php file must refer to the favicon.
The same applies to Windows 10 devices or higher. The path to the matching icons is specified in the browserconfig.xml.php file.
The same applies to Windows 10 devices or higher. The path to the matching icons is specified in the browserconfig.xml.php file.

Google Search, for example, only supports one favicon per website, whereby a website is defined by the host name.
If you activate the FavIcon plugin, a request for the favicon in the main directory will be answered with 404.
If you activate the FavIcon plugin, a request for the favicon in the main directory will be answered with 307, temporary redirect.
Binary file added fp-plugins/favicon/imgs/apple-touch-icon-precomposed.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...favicon/imgs/apple-touch-icon-180x180.png → fp-plugins/favicon/imgs/apple-touch-icon.png
View file
File renamed without changes
12 changes: 8 additions & 4 deletions fp-plugins/favicon/imgs/browserconfig.xml.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,19 @@

require_once('../../../defaults.php');
$blogBaseUrl = BLOG_BASEURL;

// Indicates the version of the symbol. Increase it by one when you change the image ($v = '?v=3', $v = '?v=4', etc.).
// The browser will then immediately display the latest version.
$v = '?v=2';
?>
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="<?php echo $blogBaseUrl;?>mstile-70x70.png"/>
<square150x150logo src="<?php echo $blogBaseUrl;?>mstile-150x150.png"/>
<square310x310logo src="<?php echo $blogBaseUrl;?>mstile-310x310.png"/>
<wide310x150logo src="<?php echo $blogBaseUrl;?>mstile-310x150.png"/>
<square70x70logo src="<?php echo $blogBaseUrl;?>mstile-70x70.png<?php echo $v;?>"/>
<square150x150logo src="<?php echo $blogBaseUrl;?>mstile-150x150.png<?php echo $v;?>"/>
<square310x310logo src="<?php echo $blogBaseUrl;?>mstile-310x310.png<?php echo $v;?>"/>
<wide310x150logo src="<?php echo $blogBaseUrl;?>mstile-310x150.png<?php echo $v;?>"/>
<TileColor>#b77b7b</TileColor>
</tile>
</msapplication>
Expand Down
Binary file removed fp-plugins/favicon/imgs/favicon-16x16.ico
View file
Binary file not shown.
Binary file removed fp-plugins/favicon/imgs/favicon-32x32.ico
View file
Binary file not shown.
Binary file removed fp-plugins/favicon/imgs/favicon-48x48.ico
View file
Binary file not shown.
8 changes: 6 additions & 2 deletions fp-plugins/favicon/imgs/site.webmanifest.json.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,20 @@

require_once('../../../defaults.php');
$blogBaseUrl = BLOG_BASEURL;

// Indicates the version of the symbol. Increase it by one when you change the image ($v = '?v=3', $v = '?v=4', etc.).
// The browser will then immediately display the latest version.
$v = '?v=2';
?>
{
"icons": [
{
"src": "<?php echo $blogBaseUrl;?>android-chrome-192x192.png",
"src": "<?php echo $blogBaseUrl;?>android-chrome-192x192.png<?php echo $v;?>",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "<?php echo $blogBaseUrl;?>android-chrome-256x256.png",
"src": "<?php echo $blogBaseUrl;?>android-chrome-256x256.png<?php echo $v;?>",
"sizes": "256x256",
"type": "image/png"
}
Expand Down
95 changes: 58 additions & 37 deletions fp-plugins/favicon/plugin.favicon.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,49 +8,70 @@
* Description: Adds favicons for search engines, mobile devices or browsers to FlatPress. Part of the standard distribution. <a href="./fp-plugins/favicon/doc_favicon.txt" title="More information" target="_blank">[More information]</a>
*/

// Google Search, for example, only supports one favicon per website, whereby a website is defined by the host name.
// If an icon in the main directory, do not load!!!
$httpHost = $_SERVER ['HTTP_HOST'];
$requestUri = $_SERVER ['REQUEST_URI'];
if (strpos($httpHost, 'favicon') || strpos($requestUri, 'favicon')) {
http_response_code(404);
}
function plugin_favicon_head() {

if (strpos($httpHost, 'apple-touch-icon') || strpos($requestUri, 'apple-touch-icon')) {
http_response_code(404);
}
// Google Search, for example, only supports one favicon per website, whereby a website is defined by the host name.
// If an icon is in the main directory, do not load it, but redirect it temporarily!!!
redir_favicon();

// Indicates the version of the symbol. Increase it by one when you change the image ($v = '?v=3', $v = '?v=4', etc.).
// The browser will then immediately display the latest version.
$v = '?v=2';

function plugin_favicon_head() {
// FlatPress icon set
echo '
<!-- BOF FavIcon -->
' . // Smartphone iOS Safari
'<link rel="apple-touch-icon" sizes="180x180" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon-180x180.png">' . //
'<link rel="apple-touch-icon" sizes="152x152" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon-152x152.png">' . //
'<link rel="apple-touch-icon" sizes="120x120" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon-120x120.png">' . //
'<link rel="apple-touch-icon" sizes="76x76" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon-76x76.png">' . //
'<link rel="apple-touch-icon" sizes="60x60" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon-60x60.png">' . //
// Smartphone Android Chrome
'<link rel="icon" type="image/png" sizes="256x256" href="' . plugin_geturl('favicon') . 'imgs/android-chrome-256x256.png">' . // For Android home screen
'<link rel="icon" type="image/png" sizes="192x192" href="' . plugin_geturl('favicon') . 'imgs/android-chrome-192x192.png">' . //
'<link rel="icon" type="image/png" sizes="32x32" href="' . plugin_geturl('favicon') . 'imgs/favicon-32x32.png">' . //
'<link rel="icon" type="image/png" sizes="16x16" href="' . plugin_geturl('favicon') . 'imgs/favicon-16x16.png">' . //
'<link rel="manifest" href="' . plugin_geturl('favicon') . 'imgs/site.webmanifest.json.php">' . // This file must be located in the imgs directory!
// Mac OS Safari
'<link rel="mask-icon" href="' . plugin_geturl('favicon') . 'imgs/safari-pinned-tab.svg" color="#aa4142">' . // Mask icon for Safari pinned tabs
// Classic/, desktop browsers
'<link rel="icon" sizes="16x16 32x32 48x48" href="' . plugin_geturl('favicon') . 'imgs/favicon.ico">' . // Multilayer icon
'<link rel="icon" sizes="48x48" href="' . plugin_geturl('favicon') . 'imgs/favicon-48x48.ico">' . // Highest resolution icon
'<link rel="icon" sizes="32x32" href="' . plugin_geturl('favicon') . 'imgs/favicon-32x32.ico">' . //
'<link rel="icon" sizes="16x16" href="' . plugin_geturl('favicon') . 'imgs/favicon-16x16.ico">' . //
// Windows 10 or higher
<!-- BOF FavIcon -->' . //

// Smartphone iOS Safari
'<link rel="apple-touch-icon" sizes="180x180" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon.png' . $v . '">' . //
'<link rel="apple-touch-icon" sizes="152x152" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon-152x152.png' . $v . '">' . //
'<link rel="apple-touch-icon" sizes="120x120" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon-120x120.png' . $v . '">' . //
'<link rel="apple-touch-icon" sizes="76x76" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon-76x76.png' . $v . '">' . //
'<link rel="apple-touch-icon" sizes="60x60" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon-60x60.png' . $v . '">' . //
'<link rel="apple-touch-icon-precomposed" sizes="180x180" href="' . plugin_geturl('favicon') . 'imgs/apple-touch-icon-precomposed.png' . $v . '">' . //

// Smartphone Android Chrome
'<link rel="icon" type="image/png" sizes="256x256" href="' . plugin_geturl('favicon') . 'imgs/android-chrome-256x256.png' . $v . '">' . // For Android home screen
'<link rel="icon" type="image/png" sizes="192x192" href="' . plugin_geturl('favicon') . 'imgs/android-chrome-192x192.png' . $v . '">' . //
'<link rel="icon" type="image/png" sizes="32x32" href="' . plugin_geturl('favicon') . 'imgs/favicon-32x32.png' . $v . '">' . //
'<link rel="icon" type="image/png" sizes="16x16" href="' . plugin_geturl('favicon') . 'imgs/favicon-16x16.png' . $v . '">' . //
'<link rel="manifest" href="' . plugin_geturl('favicon') . 'imgs/site.webmanifest.json.php' . $v . '">' . // This file must be located in the imgs directory!

// Mac OS Safari
'<link rel="mask-icon" href="' . plugin_geturl('favicon') . 'imgs/safari-pinned-tab.svg' . $v . '" color="#aa4142">' . // Mask icon for Safari pinned tabs

// Classic/, desktop browsers
'<link rel="icon" sizes="16x16 32x32 48x48" href="' . plugin_geturl('favicon') . 'favicon.ico' . $v . '">' . // FlatPress multilayer icon

// Windows 10 or higher
'<meta name="msapplication-TileColor" content="#b77b7b">' . //
'<meta name="msapplication-config" content="' . plugin_geturl('favicon') . 'imgs/browserconfig.xml.php">' . // This file must be located in the imgs directory!
'<meta name="msapplication-TileImage" content="' . plugin_geturl('favicon') . 'imgs/mstile-144x144.png">' . //
'<meta name="theme-color" content="#b77b7b">
<!-- EOF FavIcon -->
'<meta name="msapplication-config" content="' . plugin_geturl('favicon') . 'imgs/browserconfig.xml.php' . $v . '">' . // This file must be located in the imgs directory!
'<meta name="msapplication-TileImage" content="' . plugin_geturl('favicon') . 'imgs/mstile-144x144.png' . $v . '">' . //

'<meta name="theme-color" content="#b77b7b">' . // Specify a color for the browser toolbar and the status bar on mobile devices
'<!-- EOF FavIcon -->
';
}

function redir_favicon() {

$requestUri = $_SERVER ['REQUEST_URI'];
$favicons = array (
'favicon.ico',
'apple-touch-icon.png',
'apple-touch-icon-precomposed.png'
);

foreach($favicons as $favicon) {
if (strpos($requestUri, $favicon) !== false) {
http_response_code(307); // Temporary Redirect
header('Location: ' . plugin_geturl('favicon') . 'imgs/' . $favicon);
return true;
}
}

return false;
}


add_action('wp_head', 'plugin_favicon_head');
?>

0 comments on commit 0c8cb65

Please sign in to comment.