Best Practises for Favicons?

[bernhard]

Hey!

I'm developing a module for easy and fast frontend development (something like theming) and implemented favicons yesterday. Referencing one favicon for browsers is one thing, but referencing all different versions another... I used http://www.favicomatic.com/ that generates all the favicons for me and it also creates a code.txt file with the necessary markup.

Now in my module I just have to upload a favicon to their website and place all the files in a specific folder of my module. Everything else is done automatically. That's quite nice, but I was wondering how you guys are doing it? Is my linked service a good choice? There is also https://realfavicongenerator.net/ but this has the drawback for me that it does not generate a codefile so I'd have one extra step in the process.

Thx for your opinions!

[LostKobrakai]

realfavicongenerater does offer a proper API for integration in other projects.

[dragan]

If you're using Node for your frontend stuff, you could use something like https://www.npmjs.com/package/favicons

[bernhard]

55 minutes ago, LostKobrakai said:

realfavicongenerater does offer a proper API for integration in other projects.

Thx for the hint! This calls for being built into a pw module ? 

[Macrura]

i just use a function to output the code from realfavicongenerator

	function favicons($options = []) {
		$defaults = array(
			'appleColor' => '#4d9db4',
			'msColor'	 => '#da532c',
			'themeColor' => '#ffffff',
			'path'		=> null
		);

		$options = array_merge($defaults, $options);

		$folder = 'site/templates/favicons/';
		if($options['path']) $folder = $options['path'];
		$folderUrl = wire('config')->urls->root . $folder;
		$filePath = wire('config')->paths->root . $folder;
		if(!is_dir($filePath)) return;

	$out = <<<OUT
	<link rel="apple-touch-icon" sizes="180x180" href="{$folderUrl}apple-touch-icon.png">
	<link rel="icon" type="image/png" href="{$folderUrl}favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="{$folderUrl}favicon-16x16.png" sizes="16x16">
	<link rel="mask-icon" href="{$folderUrl}safari-pinned-tab.svg" color="{$options['appleColor']}">
	<link rel="shortcut icon" href="{$folderUrl}favicon.ico">
	<link rel="manifest" href="{$folderUrl}site.webmanifest">
	<meta name="msapplication-config" content="{$folderUrl}browserconfig.xml">
	<meta name="theme-color" content="{$options['themeColor']}">
OUT;

	return $out;
	}