Skip to main content
E
elizabeths68703424
Participant
April 23, 2018
Answered

How to code for favicon on dreamweaver 2017?

  • April 23, 2018
  • 2 replies
  • 4638 views

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 has been closed for replies.
Correct answer Nancy OShea

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" />

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 23, 2018

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

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
April 23, 2018

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
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices