Skip to main content
Participant
Apr 23, 2018 5:40 PM UTC
Answered

How to code for favicon on dreamweaver 2017?

I have been trying to add a favicon to my website, but I can't seem to figure out the correct code. I've tried probably a dozen different codes for favicon that I found online but I think dreamweaver might have something different for it.

Also, I have my logo, but when I put it in a favicon converter to make it an .ico file, it gets very pixelated is that normal?

I have tried putting this code in the <head> of my code

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

Do I need to save the favicon file in the root file for my website or can I keep it in the images file?

Thanks for any advice you have!

This topic is closed to new replies. Start a new post to keep the conversation going.
Nancy OShea
Nancy OSheaCorrect answer
Community Expert
Apr 23, 2018 5:54 PM UTC

I keep my icons at root level.

When creating icons in Photoshop, I start with 300 x 300 px wide canvas at 96ppi.   And then I reduce size to fit various devices.

<!--favorites icons-->

<link rel="icon" href="/favicon.png" type="image/x-icon">

<link rel="shortcut icon" href="/favicon.png" type="image/vnd.microsoft.icon">

<!-- For third-generation iPad with high-resolution Retina display: -->

<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />

<!-- For iPhone with high-resolution Retina display (iPhone 5 included): -->

<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />

<!-- For first- and second-generation iPad: -->

<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" /> 

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices (57x57): -->

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Nancy O'Shea— Product User & Community Expert

2 replies

Nancy OShea
Community Expert
Community Expert
Apr 23, 2018 5:56 PM UTC

Clear out your old favorites and bookmarks and then create new ones.  Your browser is probably caching the older icons.

Translate
Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
Apr 23, 2018 5:54 PM UTC

I keep my icons at root level.

When creating icons in Photoshop, I start with 300 x 300 px wide canvas at 96ppi.   And then I reduce size to fit various devices.

<!--favorites icons-->

<link rel="icon" href="/favicon.png" type="image/x-icon">

<link rel="shortcut icon" href="/favicon.png" type="image/vnd.microsoft.icon">

<!-- For third-generation iPad with high-resolution Retina display: -->

<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />

<!-- For iPhone with high-resolution Retina display (iPhone 5 included): -->

<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />

<!-- For first- and second-generation iPad: -->

<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" /> 

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices (57x57): -->

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Translate
Nancy O'Shea— Product User & Community Expert