Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FavIcon plugin fine-tuning #428

Merged
merged 1 commit into from
Jun 20, 2024
Merged

FavIcon plugin fine-tuning #428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions fp-plugins/favicon/doc_favicon.txt
View file
Open in desktop
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
Open in desktop
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
Open in desktop
File renamed without changes
12 changes: 8 additions & 4 deletions fp-plugins/favicon/imgs/browserconfig.xml.php
View file
Open in desktop
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
Open in desktop
Binary file not shown.
Binary file removed fp-plugins/favicon/imgs/favicon-32x32.ico
View file
Open in desktop
Binary file not shown.
Binary file removed fp-plugins/favicon/imgs/favicon-48x48.ico
View file
Open in desktop
Binary file not shown.
8 changes: 6 additions & 2 deletions fp-plugins/favicon/imgs/site.webmanifest.json.php
View file
Open in desktop
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
Open in desktop
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');
?>