I used this awesome tool called RealFaviconGenerator to generate cross-browser and cross-platform favicons for vbmods.rocks. You can use this on any web site including vBulletin (any version).
Here are the benefits of this tool taken from their site:
No hard decision
With so many platforms and icons, it's hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.
Done in 5 minutes
You spent hours on design, colors, graphics... How much time left for the favicon? Probably not much. But no worries, you only need a few minutes to tackle this task.
Compelling design, a platform at a time
Each platform comes with its own design requirements. You can't just use the same picture everywhere. RealFaviconGenerator knows this and lets you craft your icons platform per platform.
Instant feedback
How will Android display my icon? How will iOS round my Touch icon? No more guesswork. RealFaviconGenerator instantly shows you how your icons will look like.
Instructions:
Here are the instructions in the context of using in vBulletin-based websites.
1. Navigate to https://realfavicongenerator.net to use the tool.
2. Click "Select your Favicon picture" to upload a picture you want to use as favicon. The picture should be square and at least 70x70. Recommended size is 260x260.
3. Configure the favicon for iOS, Android, Windows and MacOS. The settings are applied on the fly so you can quickly see how the icons would look like on the actual devices.
4. Configure Favicon Generator Options.
For vB5 (self-hosted) and older:
In the Path tab, leave the recommended option "I will place favicon files at the root of my web site" selected. Change settings in other tabs as desired.
For vBCloud:
In the Path tab, choose the second option and enter the path where the favicons will be uploaded to. To get the path, login to AdminCP and then navigate to vBCloud File Manager > Manage Files. If you have uploaded a file before, you can see existing files in the "List of Current Files" section. If you haven't uploaded a file yet, upload any image file. This is just temporary so you can see the path of the uploaded file. Once you have an uploaded file, copy its path. Do not include the filename. For example, if the path is core/css/1/2/3/4/5/6/images/file.png, copy the path core/css/1/2/3/4/5/6/images and paste it in the path textbox in the favicon tool. Delete the temporarily uploaded file.
Configure the other tabs as desired.
5. Once you are satisfied with all the configurations, click "Generate your Favicons and HTML code" button.
6. Download the Favicon package under the HTML5 tab.
7. Extract the the package.
8. For self-hosted version of vB5 and older, login to FTP and upload the favicon files to the vB root directory. For vBCloud, upload the files via AdminCP > vBCloud File Manager.
9. Insert the generated HTML code for the favicon in the <head> of your pages.
For vB4 and older:
Edit the headinclude template in AdminCP and paste the code there.
For vB5 (self-hosted):
Edit the head_include template in AdminCP and paste the code there.
For vBCloud:
The path of the favicon will vary depending on what you entered in the favicon configuration.
10. Optional - Once your favicons are installed, you can check if they are properly installed by using this favicon checker tool.
Demo:
Visit this site using an iOS, Android or Windows phone and notice the favicon. Navigate to the https://vbmods.rocks homepage and then add it to your Home screen. It will add a shortcut on your Home screen as if it's like a native mobile app. On Android, clicking the shortcut will open the site in its own browser window without address bar and it will look like an "app".
Click the link below to use this favicon tool.
Here are the benefits of this tool taken from their site:
No hard decision
With so many platforms and icons, it's hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.
Done in 5 minutes
You spent hours on design, colors, graphics... How much time left for the favicon? Probably not much. But no worries, you only need a few minutes to tackle this task.
Compelling design, a platform at a time
Each platform comes with its own design requirements. You can't just use the same picture everywhere. RealFaviconGenerator knows this and lets you craft your icons platform per platform.
Instant feedback
How will Android display my icon? How will iOS round my Touch icon? No more guesswork. RealFaviconGenerator instantly shows you how your icons will look like.
Instructions:
Here are the instructions in the context of using in vBulletin-based websites.
1. Navigate to https://realfavicongenerator.net to use the tool.
2. Click "Select your Favicon picture" to upload a picture you want to use as favicon. The picture should be square and at least 70x70. Recommended size is 260x260.
3. Configure the favicon for iOS, Android, Windows and MacOS. The settings are applied on the fly so you can quickly see how the icons would look like on the actual devices.
4. Configure Favicon Generator Options.
For vB5 (self-hosted) and older:
In the Path tab, leave the recommended option "I will place favicon files at the root of my web site" selected. Change settings in other tabs as desired.
For vBCloud:
In the Path tab, choose the second option and enter the path where the favicons will be uploaded to. To get the path, login to AdminCP and then navigate to vBCloud File Manager > Manage Files. If you have uploaded a file before, you can see existing files in the "List of Current Files" section. If you haven't uploaded a file yet, upload any image file. This is just temporary so you can see the path of the uploaded file. Once you have an uploaded file, copy its path. Do not include the filename. For example, if the path is core/css/1/2/3/4/5/6/images/file.png, copy the path core/css/1/2/3/4/5/6/images and paste it in the path textbox in the favicon tool. Delete the temporarily uploaded file.
Configure the other tabs as desired.
5. Once you are satisfied with all the configurations, click "Generate your Favicons and HTML code" button.
6. Download the Favicon package under the HTML5 tab.
7. Extract the the package.
8. For self-hosted version of vB5 and older, login to FTP and upload the favicon files to the vB root directory. For vBCloud, upload the files via AdminCP > vBCloud File Manager.
9. Insert the generated HTML code for the favicon in the <head> of your pages.
For vB4 and older:
Edit the headinclude template in AdminCP and paste the code there.
For vB5 (self-hosted):
Edit the head_include template in AdminCP and paste the code there.
For vBCloud:
- Remove this line in the generated HTML code for the favicon. But take note of the href value.
Code:
<link rel="shortcut icon" href="core/css/1/2/3/4/5/6/images/favicon.ico">
- Navigate to AdminCP > Settings > Options > Search Engine Tools. Enable Google Ownership Verification and then paste the generated code (without the removed line in the first bullet) in the Google Ownership Verification HTML tag field. And choose Yes in the Enable Google Ownership Verification field to enable this option. This is just a workaround for vBCloud to insert HTML code in the <head> because editing templates is not allowed in vBCloud.
- Edit the favicon stylevar in Style Variable Editor for each of the active theme your site is using and update the URL with the value generated by the favicon tool. Use the noted href value in the first bullet. In this example, the stylevar value is core/css/1/2/3/4/5/6/images/favicon.ico
10. Optional - Once your favicons are installed, you can check if they are properly installed by using this favicon checker tool.
Demo:
Visit this site using an iOS, Android or Windows phone and notice the favicon. Navigate to the https://vbmods.rocks homepage and then add it to your Home screen. It will add a shortcut on your Home screen as if it's like a native mobile app. On Android, clicking the shortcut will open the site in its own browser window without address bar and it will look like an "app".
Click the link below to use this favicon tool.
Comment