There may be times in your Laravel applications where you want to display a favicon from another website. For example, you could have a link to an external site that you want to display the favicon with.
As part of my side project, Mango Two, I wanted to do exactly that. Mango Two is an open-source, privacy-first URL shortening service. And as part of the service, I'm building an analytics dashboard where users can sign in and view all the shortened URLs that they've created in the past. I liked the idea of adding the favicon at the side of each URL for better visuals.
Once I started reading into how to grab a favicon for a website using PHP, I realised that it wasn't as straightforward as I'd have imagined. For example, some websites might use a "shortcut icon" or "icon" <link> element in their webpages' <head> HTML element to explicitly define the path to their favicon. Or, some websites might just store their favicon in the default path of /favicon.ico and let the browser automatically find it.
The alternative approach to getting the favicons was to use an external service such as Google Shared Stuff or Favicon Kit. Both of these services provide extremely easy-to-use APIs for fetching the favicons and seemed to work great. However, due to the fact that Mango Two, is intended to be privacy-first, I wanted to reduce the number of external services that it uses.
So, I decided to build and release a Laravel package called "Favicon Fetcher". It's a package that you can drop in to your Laravel applications and use to get favicons. It has support for multiple drivers, and also has caching and storage functionality too.
In this article, we're going to take a brief look at how you can use Favicon Fetcher to fetch favicons in your Laravel apps.
I think you'll also agree that Jess Pickup has done an amazing job at creating a logo for the package. Huge thanks, Jess!
Installation
Before you start, you'll need to make sure that you've got an application running at least PHP 8.0 and Laravel 8.
You can install the package via Composer:
composer require ashallendesign/favicon-fetcherYou can then publish the package's config file using the following command:
php artisan vendor:publish --provider="AshAllenDesign\FaviconFetcher\FaviconFetcherProvider"The package should now be installed and ready to use. You should also have a new config/favicon-fetcher.php config file.
Fetching Favicons
Now that you have the package installed, you can start fetching the favicons from different websites.
Using the fetch Method
To fetch a favicon from a website, you can use the fetch method which will return an instance of AshAllenDesign\FaviconFetcher\Favicon:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $favicon = Favicon::fetch('https://ashallendesign.co.uk');If a favicon can't be found for the website, then null will be returned.
Using the fetchOr Method
If you'd like to provide a default value to be used if a favicon cannot be found, you can use the fetchOr method.
For example, if you wanted to use a default icon (https://example.com/favicon.ico) if a favicon could not be found, your code could look something like this:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $favicon = Favicon::fetchOr( 'https://ashallendesign.co.uk', 'https://example.com/favicon.ico');This method also accepts a Closure as the second argument if you'd prefer to run some custom logic. The url field passed as the first argument to the fetchOr method is available to use in the closure.
For example, to use a closure, your code could look something like this:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $favicon = Favicon::fetchOr('https://ashallendesign.co.uk', function ($url) { // Run extra logic here... return 'https://example.com/favicon.ico';});Exceptions
As mentioned above, by default, if a favicon can't be found for a URL, the fetch method will return null. However, if you'd prefer an exception to be thrown, you can use the throw method available on the Favicon facade. This means that if a favicon can't be found, an AshAllenDesign\FaviconFetcher\Exceptions\FaviconNotFoundException will be thrown.
To enable exceptions to be thrown, your code could look something like this:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $favicon = Favicon::throw()->fetch('https://ashallendesign.co.uk');Drivers
Not every project is the same. For example, when building Mango Two, I'm trying to reduce the number of external services that I'm using. However, using external services on other projects might not be an issue. This is where Favicon Fetcher shines, in my opinion, because it provides the functionality to use different drivers for retrieving favicons from websites.
Available Drivers
By default, Favicon Fetcher ships with 4 drivers out-the-box: http, google-shared-stuff, favicon-kit, and unavatar.
The http driver fetches favicons by attempting to parse "icon" and "shortcut icon" link elements from the returned HTML of a webpage. If it can't find one, it will attempt to guess the URL of the favicon based on common defaults.
The google-shared-stuff driver fetches favicons using the Google Shared Stuff API.
The favicon-kit driver fetches favicons using the Favicon Kit API.
The unavatar driver fetches favicons using the Unavatar API.
How to Choose a Driver
It's important to remember that the google-shared-stuff and favicon-kit drivers both interact with third-party APIs to retrieve the favicons. So, this means that some data will be shared to external services.
However, the http driver does not use any external services and directly queries the website that you are trying to fetch the favicon for. Due to the fact that this package is new, it is likely that the http driver may not be 100% accurate when trying to fetch favicons from websites. So, theoretically, the http driver should provide you with better privacy, but may not be as accurate as the other drivers.
Choosing a Driver
You can select which driver to use by default by changing the default field in the favicon-fetcher config file after you've published it. The package originally ships with the http driver enabled as the default driver.
For example, if you wanted to change your default driver to favicon-kit, you could update your favicon-fetcher config like so:
return [ // ... 'default' => 'favicon-kit', // ... ]If you'd like to set the driver on-the-fly, you can do so by using the driver method on the Favicon facade. For example, if you wanted to use the google-shared-stuff driver, you could do so like this:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $favicon = Favicon::driver('google-shared-stuff') ->fetch('https://ashallendesign.co.uk');Fallback Drivers
There may be times when a particular driver cannot find a favicon for a website. If this happens, you can fall back and attempt to find it again using a different driver.
For example, if we wanted to try and fetch the favicon using the http driver and then fall back to the google-shared-stuff driver if we can't find it, your code could look something like this:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $favicon = Favicon::withFallback('google-shared-stuff') ->fetch('https://ashallendesign.co.uk');Adding Your Own Driver
There might be times when you want to provide your own custom logic for fetching favicons. To do this, you can build your driver and register it with the package for using.
First, you'll need to create your own class and make sure that it implements the AshAllenDesign\FaviconFetcher\Contracts\Fetcher interface. For example, your class could like this:
use AshAllenDesign\FaviconFetcher\Contracts\Fetcher;use AshAllenDesign\FaviconFetcher\Favicon; class MyCustomDriver implements Fetcher{ public function fetch(string $url): ?Favicon { // Add logic here that attempts to fetch a favicon... } public function fetchOr(string $url, mixed $default): mixed { // Add logic here that attempts to fetch a favicon or return a default... }}After you've created your new driver, you'll be able to register it with the package using the extend method available through the Favicon facade. You may want to do this in a service provider so that it is set up and available in the rest of your application.
You can register your custom driver like so:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; Favicon::extend('my-custom-driver', new MyCustomDriver());Now that you've registered your custom driver, you'll be able to use it for fetching favicons like so:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $favicon = Favicon::driver('my-custom-driver') ->fetch('https://ashallendesign.co.uk');If you think your driver would be useful to other developers, feel free to make a PR to the package's repo on GitHub. I'd be more than happy to review and consider adding new drivers to improve the package.
Storing Favicons
After fetching favicons, you might want to store them in your filesystem so that you don't need to fetch them again in the future. Favicon Fetcher provides two methods that you can use for storing the favicons: store and storeAs.
Using store
If you use the store method, a filename will automatically be generated for the favicon before storing. The method's first parameter accepts a string and is the directory that the favicon will be stored in. You can store a favicon using your default filesystem disk like so:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $faviconPath = Favicon::fetch('https://ashallendesign.co.uk')->store('favicons'); // $faviconPath is now equal to: "/favicons/abc-123.ico"If you'd like to use a different storage disk, you can pass it as an optional second argument to the store method. For example, to store the favicon on S3, your code use the following:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $faviconPath = Favicon::fetch('https://ashallendesign.co.uk') ->store('favicons', 's3'); // $faviconPath is now equal to: "/favicons/abc-123.ico"Using storeAs
If you use the storeAs method, you will be able to define the filename that the file will be stored as. The method's first parameter accepts a string and is the directory that the favicon will be stored in. The second parameter specifies the favicon filename (excluding the file extension). You can store a favicon using your default filesystem disk like so:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $faviconPath = Favicon::fetch('https://ashallendesign.co.uk') ->storeAs('favicons', 'ashallendesign'); // $faviconPath is now equal to: "/favicons/ashallendesign.ico"If you'd like to use a different storage disk, you can pass it as an optional third argument to the storeAs method. For example, to store the favicon on S3, your code use the following:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $faviconPath = Favicon::fetch('https://ashallendesign.co.uk') ->storeAs('favicons', 'ashallendesign', 's3'); // $faviconPath is now equal to: "/favicons/ashallendesign.ico"Caching Favicons
As well as being able to store favicons, the package also allows you to cache the favicon URLs. This can be extremely useful if you don't want to store a local copy of the file and want to use the external version of the favicon that the website uses.
As a basic example, if you have a page displaying 50 websites and their favicons, we would need to find the favicon's URL on each page load. As can imagine, this would drastically increase the page load time. So, by retrieving the URLs from the cache, it would majorly improve up the page speed.
To cache a favicon, you can use the cache method available on the Favicon class. The first parameter accepts a Carbon\CarbonInterface as the cache lifetime. For example, to cache the favicon URL of https://ashallendesign.co.uk for 1 day, your code might look something like:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $faviconPath = Favicon::fetch('https://ashallendesign.co.uk') ->cache(now()->addDay());By default, the package will always try and resolve the favicon from the cache before attempting to retrieve a fresh version. However, if you want to disable the cache and always retrieve a fresh version, you can use the useCache method like so:
use AshAllenDesign\FaviconFetcher\Facades\Favicon; $faviconPath = Favicon::useCache(false)->fetch('https://ashallendesign.co.uk');The package uses favicon-fetcher as a prefix for all the cache keys. If you'd like to change this, you can do so by changing the cache.prefix field in the favicon-fethcher config file. For example, to change the prefix to my-awesome-prefix, you could update your config file like so:
return [ // ... 'cache' => [ 'prefix' => 'my-awesome-prefix', ] // ... ]Conclusion
Hopefully, this post should have shown you how to use the Favicon Fetcher package to get the favicons from websites in your Laravel applications.
If you enjoyed reading this post, I'd love to hear about it. Likewise, if you have any feedback to improve the future ones, I'd also love to hear that too.
Keep on building awesome stuff! 🚀
I am a freelance Laravel web developer who loves contributing to open-source projects, building exciting systems, and helping others learn about web development.
