Favicon vs. Homescreen/Touch icon

plebivac

For some reason the homescreen/touch icon is showing as a favicon in many browsers. Even though I have a separate favicon set..

When I'm in the admin pages it shows the correct favicon, but if viewing the main page or any forum pages it shows the hscreen/touch icon as the favicon in the browser tab.

Any way to fix this? I would like to continue to use the different icons separately. AKA I don't want to delete the site icon just to use the correct favicon.

Any else have this issue?

julian

Can you copy and paste the contents of <head> in the resulting HTML? I want to see if the favicon and brand icon are both linked... in which case it's really the browser that's determining which asset to show $:\$

plebivac

Yeah:

<head>
	<title>Welcome | Alta Riders HQ </title>
	<meta name="viewport" content="width&#x3D;device-width, initial-scale&#x3D;1.0" />
	<meta name="content-type" content="text/html; charset=UTF-8" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="mobile-web-app-capable" content="yes" />
	<meta property="og:site_name" content="Alta Riders Headquarters | Community Forums" />
	<meta name="msapplication-badge" content="frequency=30; polling-uri=https://altariderhq.com/sitemap.xml" />
	<meta name="keywords" content="alta motors,alta forum,alta motors message board,alta motors community,alta bikes forum,alta redshift mxr,alta redshift exr,alta mx,alta motocross,electric motocross,electric supermoto,alta sm,alta supermoto,alta offroad,alta off road,alta off-road,electric off road forum,alta redshift" />
	<meta name="msapplication-square150x150logo" content="/assets/uploads/system/site-logo.png" />
	<meta name="title" content="Alta Riders Headquarters | Community Forums" />
	<meta property="og:type" content="website" />
	<meta property="og:title" content="Alta Riders Headquarters | Community Forums" />
	<meta property="og:url" content="https://altariderhq.com/?loggedin&#x3D;true" />
	<meta name="description" content="Your forum source for Alta Motors Motocross (MX), Enduro (EX), Supermoto (SM), and Redshift (MXR &amp; EXR) motorcycle discussions &amp; message boards." />
	<meta property="og:description" content="Your forum source for Alta Motors Motocross (MX), Enduro (EX), Supermoto (SM), and Redshift (MXR &amp; EXR) motorcycle discussions &amp; message boards." />
	<meta property="og:image" content="https://altariderhq.com/assets/uploads/system/og-image.jpg" />
	<meta property="og:image:width" content="1200" />
	<meta property="og:image:height" content="1200" />
	
	<link rel="stylesheet" type="text/css" href="/assets/stylesheet.css?v=58jvqifdqei" />
	<link id="bootswatchCSS" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.7/lumen/bootstrap.min.css" rel="stylesheet" media="screen">
	<link rel="icon" type="image/x-icon" href="/assets/uploads/system/favicon.ico?v=58jvqifdqei" />
	<link rel="manifest" href="/manifest.json" />
	<link rel="search" type="application/opensearchdescription+xml" title="Alta Riders Headquarters | Community Forums" href="/osd.xml" />
	<link rel="apple-touch-icon" href="/assets/uploads/system/touchicon-orig.png" />
	<link rel="icon" sizes="36x36" href="/assets/uploads/system/touchicon-36.png" />
	<link rel="icon" sizes="48x48" href="/assets/uploads/system/touchicon-48.png" />
	<link rel="icon" sizes="72x72" href="/assets/uploads/system/touchicon-72.png" />
	<link rel="icon" sizes="96x96" href="/assets/uploads/system/touchicon-96.png" />
	<link rel="icon" sizes="144x144" href="/assets/uploads/system/touchicon-144.png" />
	<link rel="icon" sizes="192x192" href="/assets/uploads/system/touchicon-192.png" />
	<link rel="prefetch" href="/assets/src/modules/composer.js?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/src/modules/composer/uploads.js?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/src/modules/composer/drafts.js?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/src/modules/composer/tags.js?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/src/modules/composer/categoryList.js?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/src/modules/composer/resize.js?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/src/modules/composer/autocomplete.js?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/templates/composer.tpl?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/language/en-GB/topic.json?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/language/en-GB/modules.json?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/language/en-GB/tags.json?v=58jvqifdqei" />
	<link rel="prefetch stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
	<link rel="prefetch stylesheet" href="/plugins/nodebb-plugin-markdown/styles/railscasts.css" />
	<link rel="prefetch" href="/assets/src/modules/highlight.js?v=58jvqifdqei" />
	<link rel="prefetch" href="/assets/language/en-GB/markdown.json?v=58jvqifdqei" />
	<link rel="stylesheet" href="/plugins/nodebb-plugin-emoji/emoji/styles.css?v=58jvqifdqei" />
	

	<script>
		var RELATIVE_PATH = "";
		var config = JSON.parse('{"relative_path":"","upload_url":"/assets/uploads","siteTitle":"Alta Riders Headquarters | Community Forums","browserTitle":"Alta Riders HQ","titleLayout":"&#123;pageTitle&#125; | &#123;browserTitle&#125; ","showSiteTitle":false,"minimumTitleLength":3,"maximumTitleLength":255,"minimumPostLength":8,"maximumPostLength":32767,"minimumTagsPerTopic":0,"maximumTagsPerTopic":5,"minimumTagLength":3,"maximumTagLength":15,"useOutgoingLinksPage":false,"allowGuestHandles":false,"allowFileUploads":false,"allowTopicsThumbnail":false,"usePagination":false,"disableChat":false,"disableChatMessageEditing":false,"maximumChatMessageLength":1000,"socketioTransports":["polling","websocket"],"websocketAddress":"","maxReconnectionAttempts":5,"reconnectionDelay":1500,"topicsPerPage":20,"postsPerPage":20,"maximumFileSize":2048,"theme:id":"nodebb-theme-persona","theme:src":"https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/lumen/bootstrap.min.css","defaultLang":"en-GB","userLang":"en-GB","loggedIn":true,"uid":1,"cache-buster":"v=58jvqifdqei","requireEmailConfirmation":false,"topicPostSort":"oldest_to_newest","categoryTopicSort":"newest_to_oldest","csrf_token":"lrhhYKfH-07XPqEhAUY0DCcLs0w_XpB3UOj4","searchEnabled":true,"bootswatchSkin":"lumen","defaultBootswatchSkin":"lumen","enablePostHistory":true,"notificationAlertTimeout":5000,"timeagoCutoff":30,"cookies":{"enabled":false,"message":"[[global:cookies.message]]","dismiss":"[[global:cookies.accept]]","link":"[[global:cookies.learn_more]]"},"acpLang":"en-GB","openOutgoingLinksInNewTab":false,"topicSearchEnabled":false,"delayImageLoading":true,"composer-default":{},"markdown":{"highlight":1,"highlightLinesLanguageList":[],"theme":"railscasts.css"},"hideSubCategories":false,"hideCategoryLastPost":false,"enableQuickReply":false}');
		var app = {
			template: "categories",
			user: JSON.parse('{"uid":1,"username":"ALTARIDERSHQ","userslug":"altaridershq","fullname":"Taylor Latch","email":"[email protected]","picture":"","status":"online","reputation":0,"email:confirmed":false,"icon:text":"A","icon:bgColor":"#3f51b5","isAdmin":true,"isGlobalMod":false,"isMod":false,"privileges":{"chat":true,"upload:post:image":true,"upload:post:file":true,"search:content":true,"search:users":true,"search:tags":true},"online":true,"isEmailConfirmSent":false}')
		};
	</script>

	
	<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126136730-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-126136730-1');
</script>

<meta name="google-site-verification" content="0FxaKdtUNsIPfNFYCvYTRMNhF0csk6GGdFGaW2kt0ow" />

<meta name="msvalidate.01" content="1BAD9EFB9E8869EE61AD15A7E7535C3D" />
	
	
	<style>.header .forum-logo{max-height:33px;margin-top:11px;margin-right:6px}@media screen and (max-width:767px){.header .forum-logo{max-height:28px;margin-top:19px;margin-right:0;margin-left:0}}body{font-size:15px}.btn{font-size:13px}.navbar-toggle{margin-left:15px}.categories>li .content h2,.category>ul>li .content h2{font-size:19px;line-height:23px}.categories .category-children small,.category .category-children small,.subcategory .category-children small{color:#555;font-size:95%}.categories .description,.category .description,.subcategory .description{font-size:1.4rem;font-weight:400;line-height:1.4;color:#777}.unread-count:after{border:1px solid #b8071b;background:#e00a0c}small,.small{font-size:90%}h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size:70%}p{font-size:15px}.categories>li .card,.category>ul>li .card{text-align:left;font-size:13px;line-height:15px;height:55px}.category-children-item.pull-left{margin-top:5px}</style>
	
</head>

So even on the "view source page" it shows the correct favicon, just like on the admin pages. But on the forum main pages it shows the app icon instead.

0_1540866170131_Screen Shot 2018-10-29 at 9.22.21 PM.png

julian

Hahahah... for what it's worth, DDG shows the right icon?

0_1540932904049_2a66e279-a0f7-499d-9332-c7626ec4e971-image.png

julian

@plebivac Sadly some bad news --

favicon.ico is largely deprecated but is still supported
Browsers will actively use <link rel="icon"> if found, superceding favicon.ico, this is why the wrong favicon is seen in browser
There is no way to specifically serve one icon for the browser and one icon for mobile devices, at least on Android.
There is the apple-touch-icon, but in NodeBB, we just lump it along with the "home screen icon" setting.

So I think you're going to want to just upload the same image to both fields $:\$

Favicon vs. Homescreen/Touch icon

Suggested Topics

Change Vote Icon on Nodebb 1.18

No Sound or Sound Settings? / Email

Cannot find module [..] my-theme/less/app.js

How do we bulk delete spam posts / messages?

Upgrading from 0.7.3 to 0.8.2 / 0.9.0