Morten Stulen
Morten Stulen

Reputation: 1333

Extracting iOS favicon from any website

Most websites have a favicon for iOS in the root directory such as:

https://www.apple.com/apple-touch-icon.png

However, there are a lot of websites where this doesn't work.

I want to be able to download a large favicon (very similar to the one Apple downloads when adding a website to your Home Screen) to my iOS app. I don't want the smallest favicon which I could do from sites such as:

https://www.google.com/s2/favicons?domain=www.google.com

enter image description here

My intention is not to use Open Graph either, as this gives me the wrong image. An image related to the article for example, when I just wanted the newspapers' logo.

Any help would be greatly appreciated!

Upvotes: 7

Views: 3721

Answers (3)

Will
Will

Reputation: 167

Downloading a favicon from any website can be a little bit of a nightmare, as there are multiple "download types" where you can get a favicon from.

A lot of developers place the favicon at the root directory, with the filename of "favicon". However the file could be stored elsewhere, with the location denoted in the HTML header tags. Additionally, there may be multiple different sizes of the favicon, each one having a different "label" in the HTML header tags.

Or they might not be denoted in the HTML header tags, but it might be stored in the web application manifest JSON file, which it itself has it's filename flagged in the HTML header flag.

It can be difficult.

I created an open-source framework that takes a URL as an input, and gets fetches the favicon for you and returns it as a UIImage (if you're on iOS). You can even specify which download type you'd prefer, and which size you'd prefer. If it fails to find your preferred type, it'll fall back and search other methods before failing. You can see the GitHub project here:

https://github.com/will-lumley/FaviconFinder/

Upvotes: 2

meomeomeo
meomeomeo

Reputation: 952

you can get favicons from any domain using a hidden google API

here is Swift struct for it:

struct FavIcon {
    enum Size: Int, CaseIterable { case s = 16, m = 32, l = 64, xl = 128, xxl = 256, xxxl = 512 }
    private let domain: String
    init(_ domain: String) { self.domain = domain }
    subscript(_ size: Size) -> String {
        "https://www.google.com/s2/favicons?sz=\(size.rawValue)&domain=\(domain)"
    }
}

then you can use it like this

FavIcon("apple.com")[.l]

you can test them yourself in preview with this SwiftUI code

struct TestFavIconView: View {
    let domains = "apple.com,stackoverflow.com,github.com".components(separatedBy: ",")
    
    var body: some View {
        List {
            ForEach(domains, id:\.self) { domain in
                Section {
                    ForEach(FavIcon.Size.allCases, id:\.rawValue) { size in
                        HStack {
                            Text("\(size.rawValue)x\(size.rawValue)").font(.footnote)
                            Spacer()
                            AsyncImage(url: URL(string: FavIcon(domain)[size]))
                        }
                    }
                } header: {
                    Text(domain)
                }
            }
        }
    }
}

struct TestFavIconView_Previews: PreviewProvider {
    static var previews: some View {
        TestFavIconView()
    }
}

Favicon getter

Upvotes: 10

user16280239
user16280239

Reputation: 9

yourImageView.sd_setImage(with: URL(string: "https://www.google.com/s2/favicons?sz=64&domain=yourUrl"), 
                          placeholderImage: nil)

Upvotes: 0

Related Questions