Why wouldnt everyone use FAVICONs on their website? It’s a small thing and who wouldnt use it?
Tumult Hype not having a feature of adding favicon without scripting feels so dull. I’m using Hype on Mac and another similiar but not as feature rich editor on my PC. The app I’m using on a PC lets me choose any image of any size to be the favicon. The app does the rest to make it the favicon.
Why isnt there similiar function in Hype?
It’s super easy to get a favicon displayed for your exported HTML page. There are actually many many different sizes that browsers use for displaying an icon/preview image for the tab or site – at one point it was just a 16x16 image but not anymore…
The workflow for adding a set of favicons/image previews in Hype is pretty straightforward:
Generate your images (use descriptive filenames)
Drag your images to the resource library. You can now access these images using ${resourcesFolderName}/filename.jpg so you can reference
If you drop the following image sizes and formats into your resource library, you can use this code in the <head> of your document to display them for the appropriate device. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector and inserting something like this: <link rel="icon" type="image/png" sizes="16x16" href="${resourcesFolderName}/favicon-16x16.png">
Don’t want to create these images yourself? Check out: http://realfavicongenerator.net Below is a sample:
<link rel="apple-touch-icon" sizes="57x57" href="${resourcesFolderName}/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="${resourcesFolderName}/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="${resourcesFolderName}/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="${resourcesFolderName}/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="${resourcesFolderName}/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="${resourcesFolderName}/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="${resourcesFolderName}/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="${resourcesFolderName}/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="${resourcesFolderName}/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="${resourcesFolderName}/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="${resourcesFolderName}/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="${resourcesFolderName}/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="${resourcesFolderName}/favicon-16x16.png">
<link rel="manifest" href="${resourcesFolderName}/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="${resourcesFolderName}/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">Hi Daniel
My goal wasnt to be unkind. Maybe dull is too strong word then. My point was that it’s kinda basic thing and could be done by TumultHype automatically without any need to go into the script. Atleast thats how I do it with another piece of software.
By dull I refer to an idea that theres something so simple in a software that is designed to take away those “dull” moments from the user. I told about Hype to one of my AD pal who also does some frontend type of stuff with websites… and his answer was unbelievable. He said that he rather does these things in the oldskool way manually typing in every line of HTML/CSS etc . From the animations to what ever you can come up with Hype. So there are two user groups and somesort of a middle ground. I guess that Hype is for those who want to avoid manual work and get things done in a “Hype” way…
In the end it would be 10x better if Hype could do it.
Don’t worry, we understand where you’re coming from. The original point of a computer itself is to automate the boring tedious manual tasks!
We had some discussion about adding this feature in the past, and it definitely isn’t off the table. When we looked at it, there was definitely a large matrix to support and it would require a large and [from our brainstorming perspective] a complex UI to handle it correctly. So due to this it hasn’t been implemented yet - we need to properly pick and choose features that are the biggest bang for the buck. Not everyone makes whole sites or needs favicon features, for example. And the code isn’t too difficult for folks to copy/paste into the head. Of course, as we knock out higher priority features, those lower in the list move up 
.
Hi Jonathan
I really appreciate your honest answer! It’s actually one of the big problems in dev.feedback when developers start to defend a lack of a feature. Obviously we all can agree that TumultHype being able to create those favicons etc would be the best solution… BUT what you said makes more than sense. It might not be the best bang for the buck and I do agree that I’d rather have the features that Hype currently has than change one of those to automatically generated favicons. It proves that you have a clear focus and vision that pushes Hype on the right direction.
Personally I’m one of those users who know how to copy-paste script to do some of the things that WYSIWYG buildrs cant do. I’m able even to modify the script to fit my need at times. But I’m certainly not up to scripting almost anything myself be it CSS, HTML5 or any of that sort. The best part of Hype is that you can create amazing things without going into the script. Obviously I cant do the same things as someone who knows how to script HTML5 and so forth, but what I can do is more than enough and it’s getting better by the version.
Thanks for both of you, for the favicon html that I need to utilize and reasonable reason for favicon staying on the maybe list!
PS. I think that Hype is dev driven product, not feedback driven. And thats super! Because all the app developers who I’ve seen to drive app development by user feedback have proven to have no vision. The end result to user feedback driven app development is usually something that doesnt please anyone at the end and is still missing too many features compared to ten of it competitors.
That code for adding favicon isn’t working for me.
I change <link rel="apple-touch-icon" sizes="57x57" href="${resourcesFolderName}/apple-icon-57x57.png">
to: <link rel="apple-touch-icon" sizes="57x57" href="${homepage.hyperesources}/apple-icon-57x57.png">
Is that code right? Or I need insert something else into {}?
${resourcesFolderName} is a magic variable that will get replaced with the page is exported with the name of the resources folder. If you do some sort of file move where this is no longer valid, then you will want to remove the dollar sign and curly brackets, since this will definitely be incorrect.
Hi Guys,
trying to get a favicon on a site www.trowelwallets.co.uk
I have copied the files into the IDE , also to the root folder and also to the resource folder.
I have added this to the header:
<link rel="apple-touch-icon" sizes="180x180" href="${resourcesFolderName}/apple-touch-icon.png">
<link rel="icon" type="image/png" href="${resourcesFolderName}/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="${resourcesFolderName}/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="${resourcesFolderName}/manifest.json">
<link rel="mask-icon" href="${resourcesFolderName}/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<style type="text/css">
.sticky { position: fixed !important;}
</style>
What am I doing wrong please?
Cheers
Steve Warby
As far as I can tell you have an icon showing up.
Try removing cache from browser if you can’t see anything. Also above wrap your code in [code] [/code] or 3 of these ```` ``` (backticks) for it to be visible 
Use this to check the status of your favicon.
I only upload the .ico file to the /public_html folder and it displays the favicon perfectly. I use this site: http://www.favicomatic.com, but you can find many more.
When you upload your image it also gives you some code and different icon sizes, but I just download the .ico file, and upload it directly to my server using cPanel.