Favicon vs. Homescreen/Touch icon



  • 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?


  • Admin

    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 😕



  • 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":"airattack111@gmail.com","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


  • Admin

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

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


  • Admin

    @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 😕


 

Suggested Topics

  • 3
  • 3
  • 3
  • 2
  • 3
| |