How to get a Websites Favicons in Laravel

Published on by

How to get a Websites Favicons in Laravel image

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-fetcher

You 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! 🚀

Ashley Allen photo

I am a freelance Laravel web developer who loves contributing to open-source projects, building exciting systems, and helping others learn about web development.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
No Compromises

Join the Mastering Laravel community to level up your skills and get trusted advice

Visit No Compromises
Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. We ♥ Laravel

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
LaraJobs logo

LaraJobs

The official Laravel job board

LaraJobs
Larafast: Laravel SaaS Starter Kit logo

Larafast: Laravel SaaS Starter Kit

Larafast is a Laravel SaaS Starter Kit with ready-to-go features for Payments, Auth, Admin, Blog, SEO, and beautiful themes. Available with Vue and Livewire stacks.

Larafast: Laravel SaaS Starter Kit
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit: Laravel SaaS Starter Kit

SaaSykit is a Laravel SaaS Starter Kit that comes with all features required to run a modern SaaS. Payments, Beautiful Checkout, Admin Panel, User dashboard, Auth, Ready Components, Stats, Blog, Docs and more.

SaaSykit: Laravel SaaS Starter Kit
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector

The latest

View all →
Configuring Laravel With Additional Environment Files image

Configuring Laravel With Additional Environment Files

Read article
Real Time Command Line Monitoring With Laravel Top image

Real Time Command Line Monitoring With Laravel Top

Read article
A New Validation Rule and the Ability to Manually Fail a Command in Laravel 11.8 image

A New Validation Rule and the Ability to Manually Fail a Command in Laravel 11.8

Read article
New Proposed Array Find Functions in PHP 8.4 image

New Proposed Array Find Functions in PHP 8.4

Read article
Laracon AU 2024 tickets are now on sale image

Laracon AU 2024 tickets are now on sale

Read article
Dash UI is a Laravel Blade Component Library Inspired by Shopify Polaris image

Dash UI is a Laravel Blade Component Library Inspired by Shopify Polaris

Read article