Adding a favicon to a page in RSD -...

User 2054785 Photo


Registered User
23 posts

I'm a RSD newbie coming from VSD, and I'm really enjoying the program so far. I'm trying to figure out how exactly to add a favicon script onto a page. Where exactly do you place the code? Thanks in advance!
User 103173 Photo


VP of Software Development
0 posts

You can associate an favicon in RSD by add this markup to Settings > Head box. Then include that image under the Resources.

<link rel="shortcut icon" href="/favicon.ico">
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2088758 Photo


Senior Advisor
3,121 posts

Correct me if I'm wrong but by default don't most browsers pick up the favicon without adding any markup at all. Just store the file on the root of your directory where your website is?
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 103173 Photo


VP of Software Development
0 posts

Only if you use favicon.ico and put it in the root folder. If you want to use a different image format or path, the markup is needed.

Still, it is good to always use the markup.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2484360 Photo


Registered User
3,293 posts

Steve wrote:
Correct me if I'm wrong but by default don't most browsers pick up the favicon without adding any markup at all. Just store the file on the root of your directory where your website is?


It is recommend that you do add the link rel attribute value and not simply add the .ico image to your root.

You can learn more about that here http://www.w3.org/2005/10/howto-favicon
User 2823310 Photo


Registered User
312 posts

A little bonus there for a iOS phone icon is make a .png 180x180 name it apple-touch-icon.png and attach it to the root folder with your favicon.ico image. Then put this in the HEAD below your favicon links.
<link rel="apple-touch-icon" href="apple-touch-icon.png">

I use this for example:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png">


Now you'll get an icon in your apple phone and your browser.
User 2054785 Photo


Registered User
23 posts

Awesome! Thanks guys!

Edit - after trying this, I seem to be unable to add the file into as a resource into the Head box. It only allows me to select folders and not single files. How do I add a single file?
User 2054785 Photo


Registered User
23 posts

It works perfectly. Thanks!
User 458539 Photo


Registered User
1,647 posts

What format should the favicon be if you place it in the resources folder?

<link rel="shortcut icon" href="/favicon.ico">

What is .ico?

Dumb question I know but

Byron
User 2147646 Photo


Registered User
233 posts

I use IcoFX but there are many online converters https://www.google.ie/search?q=.ico+con … mp;oq=.ico


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.