84

Sometimes I see pictures of screenshots with people with web applications and nice icons on their launcher, how can I set this up?

1
  • You can also add the switch --start-maximized so the window will open in maximized mode.
    – batte
    Apr 29, 2011 at 20:21

8 Answers 8

69

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 Install 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:

enter image description here

Then select Desktop to create a shortcut on your desktop:

enter image description here

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:

enter image description here

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:

enter image description here

Drag and drop the nicer icon onto the shortcut's icon box, replacing the low resolution icon with the new one:

enter image description here

Drag and drop the new slick icon right onto the Launcher for the final effect:

Drop it on your launcher

And the final effect:

Gmail and Seesmic in all their glory

3
  • 1
    Adding 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?
    – FuzzyQ
    Aug 11, 2012 at 12:59
  • I get the same behaviour.
    – sup
    Sep 23, 2013 at 10:40
  • For me the resulting app is seen as another chromium window in the dock, grouped with other chromium windows.
    – Yrogirg
    Sep 29, 2022 at 16:49
19

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/.

2
  • 2
    Please improve your answer by telling how to create a launcher or link to corresponding asnwer explain how to do so.
    – hytromo
    Aug 5, 2012 at 16:33
  • @con-f-use application run perfectly but when it opens, icon is not shown in launcher
    – d a i s y
    Dec 31, 2015 at 4:56
9
+50

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 foggerInstall 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.

1
  • 1
    fogger doesn't seem to be around any more, is there a replacement? Sep 5, 2014 at 7:57
4

Progressive Web Apps (PWA)

If you have a PWA is much easier. One way I found here is for example:

  1. Install PWAify: npm install -g pwaify
  2. Generate binaries with electron: pwaify https://voice-memos.appspot.com/ --platforms=linux, or whatever your PWA URL is.
  3. Go to subfolder and run the app.

That's it.

2

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

1
  • 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.
    – Adam
    Oct 19, 2011 at 10:22
2

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:

  1. Make a new profile directory:

    mkdir ~/.config/NAME_OF_APP
    
  2. Right-click on the shortcut to your app on your desktop

  3. Add

    --user-data-dir=~/.config/NAME_OF_APP
    

to the command and close.


If this doesn't work, do the following:

  1. Make a new profile directory:

    mkdir ~/.config/NAME_OF_APP
    
  2. Right-click on the shortcut to your app on your desktop

  3. Add

    --user-data-dir=--user-data-dir=~/.config/NAME_OF_APP
    

to the command and close.

1
  • 1
    This is not necessary any more. Chrome opens each app in it's own window (and Chromium, too).
    – MarkovCh1
    Aug 12, 2012 at 4:33
2

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
  • 1
    this one greatly helps for me
    – Arul
    Jan 6, 2016 at 9:06
2

In Ubuntu 22.04, you can do this using "Gnome Web", also called "Epiphany Browser".

  1. Install Gnome Web:

    sudo apt install epiphany-browser
    
  2. Open Gnome Web using the launcher

    enter image description here

  3. Open the website you want to turn into an app.

  4. Open the settings menu and choose "Install Site as Web Application..."

    enter image description here

  5. Choose a name and click "create".

    enter image description here

Now you can open this website as an app:

enter image description here

Any external links you click on in the webapp will be opened in your default browser.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .