I have several HTML pages that use the following tags in the <head>. To reduce file size, I instead want to add the tags using .htaccess:
<link type='image/x-icon' rel='shortcut icon' href='images/favicon.ico' />
<link rel='apple-touch-icon' sizes='180x180' href='apple-touch-icon.png'>
<link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='favicon-16x16.png'>
<link rel='manifest' href='site.webmanifest'>
<link rel='mask-icon' href='safari-pinned-tab.svg' color='#000'>
<meta name='msapplication-tilecolor' content='#000' />
<meta name='theme-color' content='#ffffff' />
<link rel='stylesheet' href='css/styles.css' />
I tried searching online but haven't found any information if this is possible. How can I insert the tags above in the <head> of each page using .htaccess?
.htaccess filters and modifies http requests, not handle them. To handle a request server side, you should use a server-side language such as php to make changes to html files.
To reduce file size, you should use built-in compression tools (in .htaccess). This consistently reduce html sizes by over 60% from minified html.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE [ ]
</IfModule>
and replace [ ] with the desired content-type
To add the same <head> tags client-side, you can write a writeHead.js file to write html elements: How to add DOM element script to head section?. Then in your <head> manually add
<script type="text/javascript" src="writeHead.js">
Final note, this js "blocks" DOM loading as the browser must load the file completely before loading additional elements. Performance-wise, it's better to keep the html as is instead of using browser resources to generate elements you know will be there 100%. This would lead to non-tangible file size savings in exchange for perhaps a tangibly longer loading time.