-
Notifications
You must be signed in to change notification settings - Fork 0
The favicon system #41
Comments
@jan-dh Do you know the current best practices for favicon formats? Or some the best tools that exist so I can take a look at them? |
I make all my favicons with http://realfavicongenerator.net/. You just upload one image, you can tweak the background-colors and you see in real-time how it would look on the different devices. It gives an output like this
You can also choose a root-path for your app that gets applied to all the different tags. If you keep all your icons in your root of the theme you can just appy the following "root": If you download it you also get:
I'm not sure if this is the best way but it feels like it covers most ground and gets you all the stuff in 2 minutes. I suggest you try making one using that website (note, there are others out there). They also have a Wordpress plugin but I prefer to keep my wordpress-sites as plugin-free as I can. |
I think we should just stick with the largest file for apple icons. Apple keep changing these with every new device, two years ago there were no 76x76 and 180x180, there is no way to win with this. See relevant discussion here: h5bp/html5-boilerplate#1367
|
I would not include any of the favicon stuff or just the bare minimum in the starter theme. It's just nice to document how people can implement a more elaborate favocion - setup. |
Agreed, maybe lets just stick with |
@YemSalata it's a very interesting discussion, thanks. I'm also a fan of having a simple default. Let's remember that WordPress core now supports associating a favicon through the personalizator. We wouldn't even need to include a single favicon for the most simple scenario. It would make sense then to just provide a way to create an advanced set of favicons. Personally I always use the different favicon for the admin area feature. Regarding the apple favicons, I like this approach: Pragmatic Touch Icons (and an example). My only doubt is regarding the .htaccess file. Either the developer would have to manually insert a line like this I see there are several options here:
|
BTW let's not forget this wonderful cheatsheet https://github.com/audreyr/favicon-cheat-sheet |
hmm, I don't really like the .htaccess approach. Favicons are a pretty simple thing, I would prefer a very simple, straightforward approach. This is a starter theme for developers, I think you can except people to know how to make a favicon. The embedded favicon generator etc. seems like a nice solution but again, overly complicated. The link you provided seems a bit out of date as well when you look at the pull requests and the latest updates. |
I also prefer a simple approach, and so will be the default one. But I feel I must give something more as an alternative. Although I don't think it's necessary to provide every possible option. Maybe just adding the Pragmatic Touch Icons link as an alternate resource is enough. But I'd also prefer an in-house solution if possible rather than the alternative just be to create them manually through a website. I'm not sure what you are seeing outdated. For me gulp-favicons and favicons proyects seems pretty good maintained. |
You know what? You're right. Even if your size examples are not very realistic. A more realistic one could be: But I agree in not wasting precious resources (time & clarity) trying to keep up with that madness. I suppose both the apple-touch icon and the win8-tile-icon can refer to the same file by default. In that case I'd prefer to name that file something like One thing, though, IE only supports the favicon in png format since version 11, so providing a And we probably don't need to worry about a 32x32 favicon version. Some reading material: |
Good to know! Oh, and gulp already compresses automatically the images it founds under I'll update the favicon system shortly. Also making it easier to comment out individual lines, and removing unnecessary IE conditionals, among other things... |
Right now the favicons are loaded from /theme/lib/icons.php.
We should probably move there the meta theme color line from header.php.
The current choice on favicon formats is based on bones, and it is very old, so we would probably benefit from rethinking it. Right now this files are expected in /src/img/:
The text was updated successfully, but these errors were encountered: