Ionic-cli: favicon: unable to replace ionic logo for favicon.ico

[mg1075]

How does one add a custom favicon.ico file?

When I replace the favicon.ico files in these location
(which are transparent and not like the blue favicon displayed in chrome),
nothing changes. The blue ionic favicon is what displays.

www/assets/icon/favicon.ico
src/assets/icon/favicon.ico

I am guessing this has something to do with an ionic-cli build process?

[t1gu1]

I've the same problem.
I changed the image but I always have the ion favicon in the tab of my browser..

[lkitto]

I too am experiencing this. Cannot replace Ionic favicon. Despite replacing favicon.ico file, Ionic favicon always shows up.

[MichaelNeas]

I am able to get the favicon when after I ionic build browser and ionic run browser, but any time I do ionic serve the ionic favicon comes back. Not sure if we can control it within ionic serveinstance currently.

[ifbbprochris]

I have the same problem

[raphaelbadia]

Hey guys. I can't believe it's so hard to customize a favicon. I searched the web and I can't find any working answer. Up.

[imhoffd]

More suitable for stack overflow or the Ionic forum.

[Barryrowe]

@dwieeb I just wanted to point out that this looks pretty bad from a consumer standpoint. This is an issue that people are legitimately encountering, and to see it as being dismissed in this manner is not reassuring.

I understand if this is discussed elsewhere closing the ticket. However, your closing comment (and the only feedback from the ionic team) is essentially "go look/talk about this somewhere else and don't bother us with it"

If there is an existing stackoverflow post, link to it
If there is an existing forum thread, link to it
If there is a known solution, providing it here would be helpful to everyone on the issue and those coming in the future who expect the issues lists to be the place to go.

[imhoffd]

Hey all, I wanted to chime in again and apologize. I was going through issues in bulk and had glanced over this issue, thinking it was trivial/irrelevant to the CLI, but it is not. I was missing some crucial info, as well. After some research, I assume everyone is using Ionic Angular _and_ ionic serve?

On the latest CLI, if you do ionic build and open the index.html file in your browser, your custom favicon will be present. The problem lies in our livereload server with ionic serve/ionic cordova run/emulate. We're doing something that really surprised me. Despite having <link rel="icon" ... > in our starters for people to change, no matter what image is used or file path set, we overwrite it with an Ionic logo of varying colors, which show the "build status": https://github.com/ionic-team/ionic-app-scripts/blob/master/bin/ion-dev.js#L246-L250

No workaround is needed, as this only affects the favicon while developing, not for actual builds. However, I will be fixing this. We should not be overwriting custom favicons, even during ionic serve.

Again, I apologize. I am still learning the behavior of @ionic/app-scripts myself.

[Barryrowe]

@dwieeb thanks for the update. This makes sense. I could tell it was getting replaced with a data image url on serve, but it never clicked why.

Also I believe my previous message was a bit harshly toned, and It should not have been. I was taking out frustrations of being several layers into a yak-shaving. My apologies.

[imhoffd]

@Barryrowe No worries. We're a small team with a really popular framework, not backed by Google/Facebook, etc. I can understand how frustrating it can be not to get responses to issues _that are a big deal_, or, when there is a response, it seems half-assed. Your response was warranted, my reply was awful.

[eduibrahim]

I think I've found a kind of solution.

If you want to use Ionic Serve and see on web browser, include < link rel="shortcut icon" href="assets/icon/favicon.ico"/ > in index.html.

If you want to use Ionic Build and see on mobile (android in my case), try to change icon.png in resources and then recompile using ionic cordova resources [android].

Hope this help.

[louise-r-blue]

Not a sophisticated fix but I can change the favicon icon by simply renaming the file and link to favcon.ico

[wesleycoder]

I tweaked the code a bit and made a simple way to use the custom icon in development when build suceed.

[Pranavkakkar]

If you have replaced the favicon.ico and its not showing up.
You must try clearing your brower history...Including the cookies...
It would probably work.

[imhoffd]

Small update on what's been going on: this issue is related to behavior in @ionic/app-scripts, which for v4 we're dropping in favor of Angular CLI & Angular tooling, which certainly does not overwrite specified favicons. I doubt I'll get around to fixing this in app-scripts, as this issue is still low priority (only affects apps in ionic serve, not production), however, the migration to v4 will fix this issue automatically, along with many other issues.

Therefore, I'm attaching this issue to the v4 milestone and will be closing when it's released.

[timothylombrana]

@dwieeb I've just started tinkering with a v4 app still seems to be doing the same thing. Changed the file, ran ionic serve still shows ionic favicon.

[imhoffd]

Is it using ng serve? The output of ionic info always helps.

[imhoffd]

Hi all! 👋 As many of you may have seen, we announced Ionic 4 beta on our blog! 🎉

I'm closing this issue as it has been addressed with Ionic 4. If I'm mistaken, please let me know.

[timothylombrana]

@dwieeb, I believe I used ionic serve i will update with ionic info later today. Also will try ng serve.

[timothylombrana]

@dwieeb ng-serve did the trick. For posterity, I'm including my ionic info.

Ionic:

ionic (Ionic CLI) : 4.0.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.0
@angular-devkit/core : 0.7.0
@angular-devkit/schematics : 0.7.0
@angular/cli : 6.1.0
@ionic/ng-toolkit : 1.0.0
@ionic/schematics-angular : 1.0.1

Cordova:

cordova (Cordova CLI) : 7.1.0
Cordova Platforms : android 6.3.0, ios 4.5.5

System:

ios-sim : 7.0.0
NodeJS : v8.9.1 (/usr/local/Cellar/node/8.9.1/bin/node)
npm : 6.2.0
OS : macOS High Sierra
Xcode : Xcode 9.3 Build version 9E145

Environment:

ANDROID_HOME : /usr/local/opt/android-sdk

[imhoffd]

@alphapilgrim But really all ionic serve does for v4 projects is run ng serve, so there should be no difference.

[dewald-els]

I can't believe this is still an issue :( Im running the latest CLI with an Ionic 3 project. The Favicon just remains the stupid Ionic favicon.

I've replaced the favicon.ico, i've run ionic build I've tried clearing my browser history + cookies. Still, no luck :(

[sallu-tech]

Clearing my browser's cache solved the issue for me. :)