Sometimes I see pictures of screenshots with people with web applications and nice icons on their launcher, how can I set this up?
8 Answers
Ubuntu has this feature built in, see:
You can also use the more traditional webapp integration approach:
Since these can be time consuming if you use a bunch of webapps I created a "Web Applications" folder that I keep these in because I need a place to hold the icon as well. I sync this folder with Ubuntu One so that on reinstalls or new computers I have my applications all ready to go with the high resolution icons.
In chromium-browser or Google Chrome you can do this by going to the website you want to make into an application. Clicking on the Wrench icon and select, tools -> Create Application Shortcuts:
Then select Desktop to create a shortcut on your desktop:
You can also select "Applications Menu" in the create application shortcut, this will put it in the Dash for you, which is handy so you can use the search feature to launch the shortcut, however most web site's favicons don't scale very well so they look ugly. So instead I do this to pretty up the application:
Then move it to this "Web Applications" folder or wherever you want to keep it:
Download a snazzy version of the icon that is good looking. I recommend the Fluid group on Flickr. Download the icon to the folder, and then right click on the shortcut and select properties:
Drag and drop the nicer icon onto the shortcut's icon box, replacing the low resolution icon with the new one:
Drag and drop the new slick icon right onto the Launcher for the final effect:
And the final effect:
-
1Adding an applet as you described works like a charm. However, upon opening it by clicking on the sidebar symbol, another (again ugly looking) symbol appears. Is this a bug or am I missing something here?– FuzzyQAug 11, 2012 at 12:59
-
-
For me the resulting app is seen as another chromium window in the dock, grouped with other chromium windows.– YrogirgSep 29, 2022 at 16:49
You create a launcher icon (meaning a .desktop
file) that says Exec=firefox www.askubuntu.com
and drag it to the launcher. So first create an empty file and paste the following content:
[Desktop Entry]
Name=Ask Ubuntu
Comment=Open Ask Ubuntu in firefox
Exec=firefox www.askubuntu.com
Icon=network
Terminal=false
Type=Application
StartupNotify=true
Categories=GNOME;
OnlyShowIn=GNOME;Unity;
X-GNOME-Keywords=Network;AskUbuntu;
Name[en_US]=AskUbuntu
Then rename the epmty file to somename.desktop
in this case "askubuntu.desktop
" would be an appropriate name. Now use the mouse to grag it to your launcher and you're good.
This is not necessary but before dragging it to the launcher, you can right-click on it, go to Properties->Permissions->Allow executing file as program
so as the icon of the launcher to became visible!
If you delete the *.desktop file the icon will disappear form you launcher. The usual place to store these files is ~/.local/share/applications/.
-
2Please improve your answer by telling how to create a launcher or link to corresponding asnwer explain how to do so.– hytromoAug 5, 2012 at 16:33
-
@con-f-use application run perfectly but when it opens, icon is not shown in launcher Dec 31, 2015 at 4:56
Currently there are two preferred ways to do this. In Ubuntu 12.04 you can use the the preview of the official Ubuntu Webapps by installing it from a PPA (comes by default with 12.10)
sudo add-apt-repository ppa:webapps/preview
sudo apt-get update && sudo apt-get install unity-webapps-preview
This only works for supported websites (currently about 40). When you visit the site with Firefox you will be asked if you want to integrate it into Ubuntu.
The other way is to use Fogger, the silver-prize winner of the Ubuntu App Showdown. Just install the fogger package from software-center.
Both options are better than the regular site-specific-browsing (ssb) features of Firefox Prism and Chrome, because they allow full integration with Ubuntu. This includes the launcher-menu, the HUD, indicators and notifications.
-
1fogger doesn't seem to be around any more, is there a replacement? Sep 5, 2014 at 7:57
Progressive Web Apps (PWA)
If you have a PWA is much easier. One way I found here is for example:
- Install PWAify:
npm install -g pwaify
- Generate binaries with electron:
pwaify https://voice-memos.appspot.com/ --platforms=linux
, or whatever your PWA URL is. - Go to subfolder and run the app.
That's it.
If you use the latest build of Chromium (>11.0.696.57) this now works with Unity. Create the app shorcut from within Chromium then drag it on to the Unity bar. This works on 11.04
-
this appears to be broken in Chrome version 14 and above. Web applications are now all grouped under Chrome again, rather than the individual icons.– AdamOct 19, 2011 at 10:22
I think it is good practice to make a different Chromium profile for every app. Your apps will run faster because the extensions installed in the default profile are not run. Also, you can install extensions specific for your app that won't run in your default chromium instances.
If you want to run your apps with a different profile, do this:
Make a new profile directory:
mkdir ~/.config/NAME_OF_APP
Right-click on the shortcut to your app on your desktop
Add
--user-data-dir=~/.config/NAME_OF_APP
to the command and close.
If this doesn't work, do the following:
Make a new profile directory:
mkdir ~/.config/NAME_OF_APP
Right-click on the shortcut to your app on your desktop
Add
--user-data-dir=--user-data-dir=~/.config/NAME_OF_APP
to the command and close.
-
1This is not necessary any more. Chrome opens each app in it's own window (and Chromium, too). Aug 12, 2012 at 4:33
I agree with @con-f-use that a .desktop file is the way to go, but I would suggest using webapp-container
, which is designed for this purpose, rather than Firefox. Here's my example, drawn from an Ubuntu SDK Web App project:
[Desktop Entry]
Comment[en_US]=webapp for WorkFlowy
Comment=webapp for WorkFlowy
Exec=webapp-container --store-session-cookies --webappUrlPatterns=https?://workflowy.com/* http://workflowy.com %u
GenericName[en_US]=
GenericName=
Icon=/home/CORP.INSTRUCTURE.COM/banderson/Pictures/WorkFlowy.png
MimeType=
Name=WorkFlowy
Path=
StartupNotify=true
Terminal=false
TerminalOptions=
Type=Application
X-DBUS-ServiceName=
X-DBUS-StartupType=
X-KDE-SubstituteUID=false
X-KDE-Username=
X-Ubuntu-Touch=true
To create the shortcut, just create an executable file in your desktop folder named something like WorkFlowy.desktop
and paste in these contents.
-
1
In Ubuntu 22.04, you can do this using "Gnome Web", also called "Epiphany Browser".
Install Gnome Web:
sudo apt install epiphany-browser
Open Gnome Web using the launcher
Open the website you want to turn into an app.
Open the settings menu and choose "Install Site as Web Application..."
Choose a name and click "create".
Now you can open this website as an app:
Any external links you click on in the webapp will be opened in your default browser.
--start-maximized
so the window will open in maximized mode.