How to Create and Integrate a Favicon in Your Laravel Project and WordPress Theme
Introduction
A favicon is a small icon that represents your website in browser tabs, bookmarks, and other places.
In this blog post, we’ll walk through the process of generating a favicon using
favicon.io (there are lots of website for creating favicon, we just used this site randomly) and integrating it into both a Laravel project and a WordPress theme/site.
Step 1: Generate a Favicon
Follow these steps to generate the favicon:
- Go to favicon.io.
- Upload your logo or image file.
- Click on the “Generate Favicon” button.
- Download the generated favicon package, which includes multiple favicon files (e.g.,
favicon.ico,
favicon-16x16.png,favicon-32x32.png, etc.) and asite.webmanifestfile.
Integrating Favicon in a Laravel Project
Step 2: Add Files to Your Laravel Project
Place the downloaded files in the public/assets/img/favicon directory of your Laravel project. The structure should look like this:
public/
├── assets/
│ ├── img/
│ ├── favicon/
│ ├── apple-touch-icon.png
│ ├── favicon.ico
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── site.webmanifest
Step 3: Update the site.webmanifest File
Edit the site.webmanifest file to include the correct paths for your icons. Here’s an example:
{
"name": "Your Website Name",
"short_name": "Website",
"icons": [
{
"src": "/assets/img/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/img/favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/assets/img/favicon/apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Step 4: Add Favicon Links to the <head> Section
Open your main Blade layout file (commonly resources/views/layouts/app.blade.php) and add the following lines in the <head> section:
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/img/favicon/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/img/favicon/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/img/favicon/favicon-16x16.png') }}">
<link rel="shortcut icon" href="{{ asset('assets/img/favicon/favicon.ico') }}">
<link rel="manifest" href="{{ asset('assets/img/favicon/site.webmanifest') }}">
<meta name="theme-color" content="#ffffff">
Step 5: Clear Laravel Cache
If your changes don’t appear immediately, clear Laravel’s cache by running the following commands:
php artisan view:clear
php artisan cache:clear
Step 6: Verify the Integration
- Open your website in a browser to confirm the favicon appears in the tab.
- Visit
https://yourwebsite.com/assets/img/favicon/site.webmanifestto ensure the file is accessible. - Test your website on mobile devices to verify the favicon and manifest functionality.
Integrating Favicon in a WordPress Theme
Step 2: Add Files to Your WordPress Theme
Place the downloaded files in your theme folder under /wp-content/themes/your-theme/assets/img/favicon. The structure should look like this:
wp-content/
├── themes/
│ ├── your-theme/
│ ├── assets/
│ ├── img/
│ ├── favicon/
│ ├── apple-touch-icon.png
│ ├── favicon.ico
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── site.webmanifest
Step 3: Add Favicon Links in the header.php File
Open your theme’s header.php file and add the following lines in the <head> section:
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri(); ?>/assets/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri(); ?>/assets/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri(); ?>/assets/img/favicon/favicon-16x16.png">
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/assets/img/favicon/favicon.ico">
<link rel="manifest" href="<?php echo get_template_directory_uri(); ?>/assets/img/favicon/site.webmanifest">
<meta name="theme-color" content="#ffffff">
Step 4: Verify the Integration
- Visit your WordPress site and check that the favicon appears in the browser tab.
- Test on mobile devices to ensure the favicon works correctly.
Conclusion
By following these steps, you’ve successfully generated and integrated a favicon into both Laravel and WordPress projects.
Now your website has a professional and polished look in browser tabs and bookmarks! Need help to integrate favicon in your laravel project or wordpress site? Contact us or drop us a line.
