New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto-Generating Favicons #599

Closed
gauntface opened this Issue Jan 14, 2015 · 18 comments

Comments

Projects
None yet
6 participants
@gauntface
Contributor

gauntface commented Jan 14, 2015

Hey all,

I've been spending some time trying to get the auto-generating favicon task into WSK and hitting a number of issues.

I've committed a few patched to gulp-favicon just to have some better error messages, but there are some fundamental oddities it that would require some more of my time to dig in a figure out the issues.

  • At the moment, Chrome Stable, iOS and Windows Phone have issues.
  • We can only use it with one html file at a time
  • Supporting serve and serve:dist requires the use of .tmp for html files.
  • Requires imagemagik and graphicsmagik from brew

One concern I have is that this uses a third party API to generate the content

At the moment I would suggest we stick with what we have and either work on the library with less time pressure or wait for it to mature and include at a later date.

What are peoples thoughts?

Cheers,
Matt

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Jan 14, 2015

Collaborator

Yeah, I agree.

One concern I have is that this uses a third party API to generate the content

Which API?

Collaborator

sindresorhus commented Jan 14, 2015

Yeah, I agree.

One concern I have is that this uses a third party API to generate the content

Which API?

@phbernard

This comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard Jan 14, 2015

Are we talking about RealFaviconGenerator's API? I'm the author of the service. If there are concerns about it, like "does it work?" or "will it still be available in a month?", I'd be happy to discuss them :)

As an aside, the API does all the image processing. When it is used, there is no need for ImageMagick locally.

phbernard commented Jan 14, 2015

Are we talking about RealFaviconGenerator's API? I'm the author of the service. If there are concerns about it, like "does it work?" or "will it still be available in a month?", I'd be happy to discuss them :)

As an aside, the API does all the image processing. When it is used, there is no need for ImageMagick locally.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Jan 14, 2015

Collaborator

The main problem is the requirement on being online. There's also concern of future availability yes.

Collaborator

sindresorhus commented Jan 14, 2015

The main problem is the requirement on being online. There's also concern of future availability yes.

@gauntface

This comment has been minimized.

Show comment
Hide comment
@gauntface

gauntface Jan 14, 2015

Contributor

It's not concern over whether it works, but it's unclear where problems lie at the moment between gulp-favicons, favicons and real-favicons modules.

Then there is the online requirement and I don't how hard it would be to propose changes should something new come out.

For me, it's essentially an unknown is all.

Contributor

gauntface commented Jan 14, 2015

It's not concern over whether it works, but it's unclear where problems lie at the moment between gulp-favicons, favicons and real-favicons modules.

Then there is the online requirement and I don't how hard it would be to propose changes should something new come out.

For me, it's essentially an unknown is all.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Jan 14, 2015

Collaborator

Pretty sure all this can be done in vanilla JS without an online service or native/binary dependencies.

Collaborator

sindresorhus commented Jan 14, 2015

Pretty sure all this can be done in vanilla JS without an online service or native/binary dependencies.

@gauntface

This comment has been minimized.

Show comment
Hide comment
@gauntface

gauntface Jan 14, 2015

Contributor

Agreed. Just requires someone to maintain the list of required icons etc and in a flexible enough way that people can use it.

Contributor

gauntface commented Jan 14, 2015

Agreed. Just requires someone to maintain the list of required icons etc and in a flexible enough way that people can use it.

@phbernard

This comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard Jan 14, 2015

Generating a multi-platform favicon is more than scaling a picture to various resolutions. Each platform comes with its own guidelines and it is important to follow them.

For example, the desktop favicon often uses transparency. But iOS does not support transparency for the Touch icon. When the Touch icon is transparent and the user adds the web site to home screen, iOS fills the transparent regions with black. Clearly not the expected outcome.

Another issue, often combined with the previous one, is the need of margins. The original picture content sometimes "touches" the edges of the picture, as it is the case with Github favicon. Such picture can be used as desktop favicon as is. But on iOS, this generates poor results. Margins must be added around the original picture.

Yet another issue, iOS crops the corners of the Touch icon to create an icon with rounded corners. For some pictures, this leads to poor results, too. For example, in the favicon of the Ruby web site, the tip of the ruby matches the bottom right corner of the picture. Use this picture as is as the Touch icon and the tip is gone once added to homescreen.

This is just for iOS. Each platform comes with its constraints and guidelines. This is what RFG tries to address, by providing limited but sensible settings for each platform.

So there are three issues about RFG:

Obviously, there is nothing to do about the "online" issue. RFG won't help if you're in a plane.

Regarding the availability of the service, I'm willing to make it last. I really want it to be part of every web dev and web designer toolkit (alright, a small part) Yet I'm just a guy and my willingness may not be the kind of guarantee you are looking for :-)

About the various modules, I guess @haydenbleasel and I should talk about it to figure out what should be done.

Of course, I completely understand that each of these issues can be blocking. If so, maybe RFG could be offered as a "plan B"? Just let me know.

phbernard commented Jan 14, 2015

Generating a multi-platform favicon is more than scaling a picture to various resolutions. Each platform comes with its own guidelines and it is important to follow them.

For example, the desktop favicon often uses transparency. But iOS does not support transparency for the Touch icon. When the Touch icon is transparent and the user adds the web site to home screen, iOS fills the transparent regions with black. Clearly not the expected outcome.

Another issue, often combined with the previous one, is the need of margins. The original picture content sometimes "touches" the edges of the picture, as it is the case with Github favicon. Such picture can be used as desktop favicon as is. But on iOS, this generates poor results. Margins must be added around the original picture.

Yet another issue, iOS crops the corners of the Touch icon to create an icon with rounded corners. For some pictures, this leads to poor results, too. For example, in the favicon of the Ruby web site, the tip of the ruby matches the bottom right corner of the picture. Use this picture as is as the Touch icon and the tip is gone once added to homescreen.

This is just for iOS. Each platform comes with its constraints and guidelines. This is what RFG tries to address, by providing limited but sensible settings for each platform.

So there are three issues about RFG:

Obviously, there is nothing to do about the "online" issue. RFG won't help if you're in a plane.

Regarding the availability of the service, I'm willing to make it last. I really want it to be part of every web dev and web designer toolkit (alright, a small part) Yet I'm just a guy and my willingness may not be the kind of guarantee you are looking for :-)

About the various modules, I guess @haydenbleasel and I should talk about it to figure out what should be done.

Of course, I completely understand that each of these issues can be blocking. If so, maybe RFG could be offered as a "plan B"? Just let me know.

@haydenbleasel

This comment has been minimized.

Show comment
Hide comment
@haydenbleasel

haydenbleasel Jan 14, 2015

Basically what Philippe said.

@gauntface I'll have a look into supporting multiple HTML files. Also, I'll talk to Philippe about moving Apple Startup Images into the API call so we don't need any local dependencies (IM and GM) anymore.

@sindresorhus Favicons used to produce all icons using just ImageMagick because I couldn't find a pure JS library for resizing images (easyimage, sharp, etc. all require IM or GM). The main reason I switched to RFG though is Philippe does a stellar job keeping everything up to date. I've seen all the guidelines and docs he has to go through for each favicon platform - pretty stringent stuff.

I did toss up a lot before switching to RFG but it just made more sense: outdated icons with little options that doesn't require an internet connection, or bleeding-edge icons with full support that's handled for us but does require an internet connection.

haydenbleasel commented Jan 14, 2015

Basically what Philippe said.

@gauntface I'll have a look into supporting multiple HTML files. Also, I'll talk to Philippe about moving Apple Startup Images into the API call so we don't need any local dependencies (IM and GM) anymore.

@sindresorhus Favicons used to produce all icons using just ImageMagick because I couldn't find a pure JS library for resizing images (easyimage, sharp, etc. all require IM or GM). The main reason I switched to RFG though is Philippe does a stellar job keeping everything up to date. I've seen all the guidelines and docs he has to go through for each favicon platform - pretty stringent stuff.

I did toss up a lot before switching to RFG but it just made more sense: outdated icons with little options that doesn't require an internet connection, or bleeding-edge icons with full support that's handled for us but does require an internet connection.

@gauntface

This comment has been minimized.

Show comment
Hide comment
@gauntface

gauntface Jan 15, 2015

Contributor

I know RFG is an awesome source for getting the right icons and up to date icons - please don't think I'm knocking your service, I've used it in the past.

It's just right now it's not a good fit. Tbh I hadn't even considered the offline case until Sindre mentioned it.

I'm also struggling to see how we could handle resizing images without a native binary......

At the moment we've done ok with just the favicons being pre-generated and using sketch it's insanely easy to pump out various sizes and versions, it may be a case we recommend either Sketch with a set-up file or RFG for people wanting to change, which quite a few people aren't doing at the moment.

Contributor

gauntface commented Jan 15, 2015

I know RFG is an awesome source for getting the right icons and up to date icons - please don't think I'm knocking your service, I've used it in the past.

It's just right now it's not a good fit. Tbh I hadn't even considered the offline case until Sindre mentioned it.

I'm also struggling to see how we could handle resizing images without a native binary......

At the moment we've done ok with just the favicons being pre-generated and using sketch it's insanely easy to pump out various sizes and versions, it may be a case we recommend either Sketch with a set-up file or RFG for people wanting to change, which quite a few people aren't doing at the moment.

@gauntface gauntface closed this Jan 15, 2015

@gauntface gauntface reopened this Jan 15, 2015

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Jan 15, 2015

Collaborator

I'm also struggling to see how we could handle resizing images without a native binary......

https://github.com/nodeca/pica

It will be somewhat slower than native, but can be fixed caching. Having to install dependencies are way worse.

Collaborator

sindresorhus commented Jan 15, 2015

I'm also struggling to see how we could handle resizing images without a native binary......

https://github.com/nodeca/pica

It will be somewhat slower than native, but can be fixed caching. Having to install dependencies are way worse.

@haydenbleasel

This comment has been minimized.

Show comment
Hide comment
@haydenbleasel

haydenbleasel Jan 19, 2015

Philippe just implemented Apple Startup Images as an option on the API, so Favicons 2.1.0 doesn't need any native dependencies, has more options and it's like less than half the size. Internet connection is probably the only pressing issue still remaining so we'll look into that.

haydenbleasel commented Jan 19, 2015

Philippe just implemented Apple Startup Images as an option on the API, so Favicons 2.1.0 doesn't need any native dependencies, has more options and it's like less than half the size. Internet connection is probably the only pressing issue still remaining so we'll look into that.

@gauntface

This comment has been minimized.

Show comment
Hide comment
@gauntface

gauntface Jan 20, 2015

Contributor

Thank you @haydenbleasel

Contributor

gauntface commented Jan 20, 2015

Thank you @haydenbleasel

@phbernard

This comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard Jan 20, 2015

No mentioning that @haydenbleasel is sick. What a guy! :)

phbernard commented Jan 20, 2015

No mentioning that @haydenbleasel is sick. What a guy! :)

@jarodium

This comment has been minimized.

Show comment
Hide comment
@jarodium

jarodium Feb 17, 2015

@phbernard , @haydenbleasel
May I suggest http://manuels.github.io/unix-toolbox.js/ ?
Not sure if it can be converted to a module, but I guess, when it has more commands available, it can be of use.

jarodium commented Feb 17, 2015

@phbernard , @haydenbleasel
May I suggest http://manuels.github.io/unix-toolbox.js/ ?
Not sure if it can be converted to a module, but I guess, when it has more commands available, it can be of use.

@robbbz

This comment has been minimized.

Show comment
Hide comment
@robbbz

robbbz Jul 29, 2015

It's not concern over whether it works, but it's unclear where problems lie at the moment between gulp-favicons, favicons and real-favicons modules.

I think it's against gulp guidelines to use a plugin which can as well be just the node module in a gulp.task().

robbbz commented Jul 29, 2015

It's not concern over whether it works, but it's unclear where problems lie at the moment between gulp-favicons, favicons and real-favicons modules.

I think it's against gulp guidelines to use a plugin which can as well be just the node module in a gulp.task().

@haydenbleasel haydenbleasel referenced this issue Nov 3, 2015

Closed

Favicons 4 #51

19 of 19 tasks complete
@haydenbleasel

This comment has been minimized.

Show comment
Hide comment
@haydenbleasel

haydenbleasel Jan 20, 2016

@gauntface @sindresorhus @jarodium @robbbz @addyosmani

Hey all, the new Favicons version is out and ready to integrate into WSK. Pure JS, local generation, etc.

haydenbleasel commented Jan 20, 2016

@gauntface @sindresorhus @jarodium @robbbz @addyosmani

Hey all, the new Favicons version is out and ready to integrate into WSK. Pure JS, local generation, etc.

@phbernard

This comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard Jan 20, 2016

Was that the right place? Sorry for repeating what I've just posted on #470 (comment) , I just wanted to let you know that RealFaviconGenerator now has an option for GWSK: it generates the steps to configure the icons you've just designed in a GWSK project.

Once Favicons integration in GWSK is final, I could update the steps and offer users a great experience to setup their icons, while preserving Favicons advantages.

Hayden, I'm up for a chat :)

phbernard commented Jan 20, 2016

Was that the right place? Sorry for repeating what I've just posted on #470 (comment) , I just wanted to let you know that RealFaviconGenerator now has an option for GWSK: it generates the steps to configure the icons you've just designed in a GWSK project.

Once Favicons integration in GWSK is final, I could update the steps and offer users a great experience to setup their icons, while preserving Favicons advantages.

Hayden, I'm up for a chat :)

@gauntface

This comment has been minimized.

Show comment
Hide comment
@gauntface

gauntface Jan 9, 2018

Contributor

🐛 Bankruptcy: Closing due to inactivity.

Contributor

gauntface commented Jan 9, 2018

🐛 Bankruptcy: Closing due to inactivity.

@gauntface gauntface closed this Jan 9, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment