How to get larger favicon from Google's api? - favicon

Is it possible to get a larger version of the favicon from the Google's api or from somewhere else?
This is the url.
http://www.google.com/s2/favicons?domain=google.com
I searched for an alternative api on ProgrammableWeb and Google but many of them don't exist anymore and the one I found that actually seems to work isn't free. (http://grabicon.com/)
I need the icon for a VB.NET project that has a list of websites with icons. But 16x16 icons are too small for that.

looks like there is size parameter in google now.
https://www.google.com/s2/favicons?sz=64&domain_url=yahoo.com

Editted:
The below answer is no longer valid, but the code is freely available on github:
Github -> Favicons for all!
Original answer
You can also try Statvoo's Favicon API, e.g.
https://api.statvoo.com/favicon/?url=google.com
https://api.statvoo.com/favicon/?url=stackoverflow.com
etc..
They also have quite a few other API's you can use if you look around. Most of which are free and have been around for years.

Looks like Google has an size attribute too.
https://www.google.com/s2/favicons?sz=64&domain_url=https://stackoverflow.com/

Here's some Favicon Fetchers I have found
Free Favicon-Service by AllesEDV.at - https://f1.allesedv.com/stackoverflow.com
Google Favicon Snatcher - https://www.google.com/s2/favicons?domain=stackoverflow.com
Favicon Grabber - http://favicongrabber.com/api/grab/stackoverflow.com
For Favicon Grabber it will return as JSON list of icon URLs.
Alternatively you can load the main page of the site and figure it out from there: https://stackoverflow.com/a/1990487/

According to https://news.ycombinator.com/item?id=17190599:
Unless that endpoint can also return other resolutions, Favicon Kit
offers more: https://api.faviconkit.com/twitter.com/144
https://api.faviconkit.com/twitter.com/16
(Though, I will say, the URIs returned for Twitter and the image sizes
don't actually align in those cases. The first is actually 192ˣ192
pixels, and the second is 32ˣ32 pixels. That seems odd. Maybe they
should have endpoints like domain/large, domain/medium, domain/small?)

Favicons are specified either as part of the HTML page, the HTTP response to a request for a page, or simply by being hosted at a default location.
That's true for all sites. There's plenty of browser extensions that can help you figure out the favicons a page send, if you don't manage by hand. For example, right clicking in firefox, "Page Info", "Media", "sort by type"->"Icon" should show all icons that a browser can find. It's not usual to have Icons larger than 32x32, and google might not be an exception.
Also be aware that the .ico format can contain multiple Icon sizes that not all tools show. So saving that .ico on your computer and inspecting it with a tool known to deal with all sizes contained in a single file might help.
Last word of advice: You're dealing with the logo, the very core of their brand, of a multi-billion dollar company. You might want to check with their policy of using that logo in your project. Probably it's OK (for example, browser don't seem to get in trouble for having a google logo for their google search box), but I'd still take care not to raise the impression that you're association a product of your own making with their logo.

Related

Can I embed source files from GitHub on my web page other than Gists?

Context
You can create a Gist on GitHub and embed it on your web page: embedding Gists.
This is an example of a randomly chosen Gist: tap.groovy.
Question
Is embedding also possible with other code files from GitHub, for example with this randomly chosen C# file ICommand.cs which is not a Gist?
You can try https://emgithub.com, which does exactly what you want.
To embed the example file ICommand.cs in your question, you can just add "em" before "github.com" in the address bar, then press Enter.
Then you can get a script tag like this:
<script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fdotnet%2Fcorefx%2Fblob%2Fmaster%2Fsrc%2FSystem.ObjectModel%2Fsrc%2FSystem%2FWindows%2FInput%2FICommand.cs&style=default&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
Note if you simply click Run code snippet in StackOverflow, the copying button at top right corner may not work. Running it outside SO would work fine.
Unlike other websites that do similar work, EmGithub.com is a static site hosted on Github Pages. Fetching target files and highlighting are done on your browser.
Disclosure: I'm the developer of it :)
You can use https://gist-it.appspot.com/:
<script src="http://gist-it.appspot.com/https://github.com/dotnet/corefx/blob/master/src/System.ObjectModel/src/System/Windows/Input/ICommand.cs"></script>
There's a standard for embedding content from one website in another via a URL, called oEmbed. Unfortunately, GitHub is not a oEmbed provider, i.e. it doesn't support oEmbed for its URLs.
I found a proxy service, Oembed Proxy for GitHub,
which adds oEmbed support for GitHub's code URLs. You pass a GitHub URL as a parameter to the proxy's URL and a resulting URL can be be pasted in another website, assuming that website supports embedding oEmbed links.
Another obstacle is that not every website supports embedding oEmbed URLs. According to the proxy's documentation, notion is one website that supports them. I did some research and looks like it should be possible to add oEmbed support to e.g. wordpress or jekyll.
This answer provides a very limited solution, due to small adoption of oEmbed. I thought it would be worth to spread the word nonetheless.
Another possible service is https://github.com/finom/github-embed. It seems to be unmainted by now for about 2 years, but gist-it seems to be unmaintained for even 6 years. I've tried neither, though.
You can use gistYard
<iframe src="https://gistyard.piyushdev.xyz/emd.html?lang=&from=0&to=&code=https://raw.githubusercontent.com/dotnet/corefx/master/src/System.ObjectModel/src/System/Windows/Input/ICommand.cs&edit=true&dm=off" width="100%" height="330" frameborder="0"></iframe>
It provides features like changing theme , cutting code directly from raw , edit mode , custom styling and others.

Media link of a video available on OTT platform

I am looking to integrate videos freely available on OTT platforms in India.
For example http://www.sonyliv.com/details/full%20movie/4709492313001/The-Butterflies-In-My-Head-%7C-Short-Film
However this is the web link to the video file. I am not able to fetch the media link to this and all such videos. Is it possible to do what I am trying and if so what should my direction of implementation be
I think if you look at the terms of use on that site (which are at the bottom and are, not very helpfully, hidden every time you scroll down) the conditions don't really allow what you are proposing, other than by linking to their site as your link above does, or sharing via their share options (Google + and Facebook for the example you show above).
So you can solve this technically with varying degrees of ease, depending on whether the source sites hide the media manifest URL's or use dynamically generated URL's etc, but it's probably worth making sure you are not going to get into issues over rights first.

How to tag the code of a website for structured data recognition by Google SEO?

we're just completing a new site build. With the current theme, we have had issues with structured data (we've highlighted it on Webmasters tools, and weeks later had to re-highlight it, and even then the highlighting prediction is not where we would like it to be).
It seems like Google is not able to find our Title, author, categories, content, featured image, date very easily. I'd expect to be able to communicate this to Google with 100% accuracy, since its so simple and we use the same format for all our articles). So maybe our theme is missing something by way of tags or something in the code to point to and identify this data?
Is that the case? Could someone please tell me what this aspect is called (so I can research it by its term), explain what I need to do with the new build, point me in the direction of an authoritative explanation/tutorial?
The site in question is a WordPress site, but I also am working on some php sites and would like to use this information on all sites, if it can be applied this way.
Thanks
You can use micro-data to mark-up the structured data. Also Google will really like your site if you show him (with a code) everything about the site - navigation, sidebar (aside), content (article) and so on. I suggest you to read about schema.org and micro-formats.
Here is an usefull article about your problem and how to implement micro-formats to your site.

Official Facebook Connect button as PNG

Is there any official Facebook Connect button, as a image file?
There a lot of really different images on the web, with different sizes, different styles (and even colors), different licenses, free and paid. But I believe there should be some official example, as PNG image.
I know that by using https://developers.facebook.com/docs/reference/plugins/login/ I can generate HTML and make screenshot, but seems that it's too hacky, and I'm just missing right page. Is it?
Brand Permissions Center doesn't have 'Connect' button
You can get the official "Log in with Facebook" button here. ZIP has PNGs for different sizes
https://developers.facebook.com/docs/facebook-login/checklist/#brandedlogin
EDIT 26/07/2014: Facebook seems to have removed those image assets. They now suggest you using a Javascript log in button with their button style. https://developers.facebook.com/docs/plugins/login-button
EDIT 21/02/2018: Facebook has updated the guidelines with a new "Continue on Facebook" button image asset
Would comment on existing answer, but rep... =\
You can still download the icon here. I guess they've dedicated a separate domain to it now. I believe they will always have to provide you with an icon alternative since they require, just as google does:
The "f" Logo may be used alone or alongside other social icons. It should be used at equal size to neighboring icons. Be sure to maintain its shape and proportions and provide adequate clear space between logos.
You can't really do this consistently without a proper icon.

Mobile Sites (Resolution and Semantics)

I recently was requested to put together a Flash site. Since I did that, I of course need to follow up with sister site that will work with handheld devices etc.
I put a site together which looks, for example, fantastic on the Blackberry, but the resolution of an iphone is so good that the site looks microscopic. What is an elegant way to deal with these resolution disparities?
Also, I just used PHP to check the browser type and feed different pages based on that, I didn't actually make a mobile subdomain or use special mobile code.. those days are over right? Or am I committing semantic crimes by treating it like a normal-but-different website?
Thanks for everyone's input.
CSS Media Queries were specifically designed to solve this problem.
Check out the article on Responsive Web Design over at A List Apart
Example site: A List Apart CSS Media Query Example
Another great example/tutorial: http://webdesignerwall.com/tutorials/css3-media-queries
another: http://hicksdesign.co.uk/
another: http://colly.com/
Resize the width and height of this window to see what the media queries are doing. (also, view the underlying css)