Highlighted

How to code for favicon on dreamweaver 2017?

New Here ,
Apr 23, 2018

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to code for favicon on dreamweaver 2017?

New Here ,
Apr 23, 2018

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 23, 2018 0
Adobe Community Professional ,
Apr 23, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 23, 2018 1
Adobe Community Professional ,
Apr 23, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 23, 2018 1