Customising your Speed Dial thumbs

  • Moderator

    Attention: This tutorial may no longer be necessary as now Vivaldi natively offers an option to modify the thumbnails. You can just hover the Speed Dial thumbs and click the plus (+) icon, or right-click and choose Select custom thumbnail.

    A while ago I wrote a tutorial on how to customise your SD thumbnails.

    That method was pretty good for that time while the current system was jagged and bugged, but now it's much better. And this new method is fairly simple and you won't lose your thumbs when you update Vivaldi.

    Basic Understanding and Info

    So, to begin with, the thumbs are stored inside the 'Top Sites' file inside your user profile, which is an SQL Database file.

    You can check where your profile is by opening the About page.

    The image files may be any image type Vivaldi can handle, so you may even use an animated gif (yes it works, it's animated). The default size is 440x360px, this size will fit perfectly leaving no blank spaces. Default SD images are indexed colours, and I suggest you to do so as this will make loading faster.

    If you were using the old system of adding thumbs editing the bookmarks file, or you have SD entries without thumbs, make sure to create new thumbs for them from Vivaldi, you can do so by hovering the SD entry and clicking the reload button, it will make things easier later.

    How to Open the DB

    Now, you need to open the file with an SQL file editor/browser. I'll be using DB Browser for SQLite that's available for all OSes Vivaldi is compatible and is open-source.

    Remember that Vivaldi has to be closed to edit the file.

    When you open the file open the second tab (Browse Data), and in the dropdown labelled Table choose thumbnails.

    Finally Changing the Thumbs

    Now open your Bookmarks file in your user directory with a text editor and look for your SD folder, the file is a pretty easy to read JSON.

    Look for the SD entries you want custom thumbs and check their id numbers, if you look a few line below you'll see a Thumbnail entry whose value starts with chrome://thumb/http://bookmark_thumbnail/, and ends with the id number. If that's not the value of Thumbnail, you better close everything and go back to the step to re-create the thumbs from Vivaldi.

    Now back to your SQL Browser search for the entry with the URL starting with http://bookmark_thumbnail/ (write this in the filter box of url) and ending with the id you got in the Bookmarks file. Click over the thumbnail entry of that line, which probably says BLOB or NULL. At the right side of the window there's an Edit Database Cell area, click the Import button and choose your thumb, and then click OK.

    Repeat for each SD entry you want to edit and once you changed all of them just save the Top Sites file and enjoy. Thanks to the sopranos that explained this was not that hard.

  • You're the man πŸ˜‰

  • I have been hesitating to change my old SD file system for this one, but today I had it : I am tired of updating my thumbnails in speed dial so I wanted to try your system.
    But I don't understand what you mean by "make sure to create new thumbs for them from Vivaldi, by hovering the SD entry and clicking the reload button". Is the result of this going to mean that we would have to forget about the custom thumbnails and adopt instead a view of the site page ? Because that's exactly what I want to avoid. My thumbnails are much more readable and easy to identify. If not, then I am ready to make the change.

  • Moderator


    But I don't understand what you mean by "make sure to create new thumbs for them from Vivaldi, by hovering the SD entry and clicking the reload button".

    Before that I explain that:

    If you were using the old system, or you have SD entries without thumbs

    So you only refresh the thumb IF:
    1. One of the SD is missing a thumbnail; OR
    2. You were using the old way of changing thumbs by editing the bookmarks file.

    Refreshing the thumbnails in Vivaldi will correct and create the necessary stuff internally so you don't need to do things manually. The thumbnail will be a view of the page, obviously, but you then change it later, as you can read by "it will make things easier later". This step is a restart of the thumbs system as there's no easy upgrade from the old way of changing thumbs to the new.

  • I have never used this program before (SQlite) so followed the instructions as closely as possible, but it does not seem to work for me.

    First of all, I am using a Macbook pro 10.10.5

    I first reloaded all the speed dial thumbnails.
    Then I went and found the bookmarks text file.
    The URLs wary greatly, with URLs such as "http://bookmark_thumbnail/16?1450357441133" or "http://bookmark_thumbnail/2068?1450357785529".
    I can not find either of them. However, if I just write the URL before the questionmark.(such as ""http://bookmark_thumbnail/16") it will show up in the DB browser. I double click it and choose insert and select an image of appropriate size. You wrote "Save the top file", but there is no save button, so I am guessing you mean the "Write changes" button, so I clicked on that.

    Then I launch Vivaldi and nothing happened. The thumbnail I changed in DB browser did not change.

    If I try the second one with "2068", I will not find anything.

    What am I doing wrong?

  • Vivaldi Translator

    Is there a file size limit for the PNG images? Images under 22kb are getting through while 99kb images are not loading. We get a blank thumbnail in the browser. Any suggestion?

    I have attached two images:
    'sd_cricinfo3.png' is working
    'sd_cricbuzz3.png' is not working

  • Moderator

    It's working here. But save your files as 8bit PNGs at least, you'll save a lot of data.

    You seem to be doing everything right, I don't know what's the problem. In Linux and Windows the addresses don't have question marks followed by numbers.

  • I have the same problem as @Kirikirasert, somebody has a solution please?

  • I just did the same thing on my Windows 7 PC as I did on my Macbook earlier, and I have the same result.
    I find all the thumbnail addresses in Sqlitebrowser, and when I choose the PNG I want to use, the address change into "BLOB". After saving and re-opening Vivaldi nothing changed.

    The thumbnail address also have a lot of numbers after the questionmark, just like on my Mac.

  • I decided to look into this as I was getting tired of the update rechanges.
    I am not quite sure what the numbers itself after the ? comes into play, but you seem to only need the numbers before the ? and all of my png files imported just fine using the newer database.
    So in the db browser, lookup as an example http://bookmark_thumbnail/95 and nothing more. Not slot number 95 as that is different.

    From there, there is thumbnail which is the 4th column (at least on my end). You double click that, not the address field. If it shows you the address and you're double clicking that, you're in the wrong field.

  • I thought of a simple alternative for people who don't want to bother with the DB. You can just set a data URL intermediate page showing the desired image for a split second.

    You can set a speed dial bookmark (via the bookmark manager or the bookmark panel, but don't try it via the speed dial "+"-to-add-an-entry, because that route adds an erroneous "http://" to the data URL address):

    data:text/html;charset=utf-8,<html><head><meta http-equiv="refresh" content="0.3; url=some_destination_URL"><style>img, svg {margin-top:20%; -webkit-animation-name: fade;-webkit-animation-delay: 0.2s;-webkit-animation-duration: 0.4s;-webkit-animation-iteration-count: 1;-webkit-animation-fill-mode: forwards;}@-webkit-keyframes fade {from {opacity:1;}to{opacity:0;}}</style></head><body> some IMG or SVG tag </body></html>

    replacing the bold parts with values to suit the image and destination you want.

    Note: I don't think decimal points were originally standard* for meta refresh times, but it works in Vivaldi (and several other browsers I've tried). Having it non-zero lets Vivaldi grab a shot of the data-url-generated page. You'll see a flash of the logo for a fraction of a second, however, after clicking on the SD entry.

    This speed dial method has the good property that If you happen to hit refresh while on Speed Dial page, your setting won't be lost by Vivaldi refetching from the bookmarked site.

    Downsides: Because this takes a static, flat snapshot of the data URL page, animated GIFS or transparency won't work. And like I said, you'll see a flash of the logo before being taken to the desired page.

    *Not that there really seems to be any clear official standard, curiously. "meta http-equiv=" simulates HTTP response headers, and despite decades of common use, a "refresh" header was apparently never actually specified in any official HTTP standards, although pretty much every browser obeys it. It was apparently invented by Netscape, and other browsers followed suit, but it apparently never actually got into an official spec.

    Edited 2017.04.02 (now that editing is permitted) to correct corruption of the post that occurred during the forum platform change.

  • Why can't they just take the favicon and make it the speed dial image?

    Save's all the fucken hassle!

  • @HateNewOpera:

    Why can't they just take the favicon and make it the speed dial image?

    Not all sites have a favicon, and since it's a 16 x 16 pixel bitmap, it's not going to generate a decent thumbnail.

    There is no need to post offensive comments to a thread made by someone who went to some trouble to provide a workaround while we wait for the Vivaldi developers to add this often requested feature. I am sure it's on the road map. If we can load custom images from disk, as we can for the speed dial background, it will be quite flexible and simple for non-geeks to do.

    IMO, it would take a lot more work to code something that could automatically generate a decent thumbnail from any site, as some sites may have no suitable images at all.

    Another workaround to improve the speed dial image is to open the page, zoom in, then refresh the thumbnail.

    There is no time limit on this forum for editing posts to correct errors. The initial post in a thread can be edited, to change the title or to choose the light-bulb icon, which is the most suitable for suggestion threads like this one.


  • @HateNewOpera:

    Why can't they just take the favicon and make it the speed dial image?

    You can put your questions in a kind manner w/o making them less effective.
    You should really do so.

    Back to your question…

    Because many people will find such SD as a dumbed down one.

    I undesrtand that MS trained many people to apreciate such oversimplified metroish tiles, but vivaldi is aimed mainly to power users and or ex opera users who apreciate the meaningful infos provided by proper thumbnails.

  • @The_Solutor:

    who apreciate the meaningful infos provided by proper thumbnails.

    Speed Dial is very important for my use of the browser but thumb nails are not. The picture can be the way it wants to be:


    This is from my news folder on Devuan (Fluxbox environment). I didn't do anything with the thumb nails and am quite content with them but I wouldn't call this 'meaningful infos'. πŸ˜‰

  • I'm not going to discuss your habits. I just replied your question.

    Not sure what the gray rectangles means. Are they gray on purpose or refresh doesn't work for you?

    Lastly. This thread is the actual answer to more customizzability of the SD.

    The last snapshot fixed a bunch of frequently asked features in a row, surely the time of more love to SD is approaching.

    Hence just be patient or look to an alternate start page, like FVD speeddial or metro speed dial. Since tha last snapshot, you can w/o the need of any trick.

  • Where can I find the SQL Database file in the directory. I cant find the thing i need to edit using DB Browser

  • Moderator

    It's in your profile ("Default") folder, and its name is Top Sites. It's a file with no extension.

  • Vivaldi Team

    Hi guys!

    We have gotten a lot of requests wanting to be able to edit the speed dial graphics so it's now on our list, and not too far down even! πŸ™‚ Seems like many also wants to be able to set Speed Dial as home page, so that is probably coming as well.

    Stay tuned! πŸ™‚



Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.