Делаем логотип своего сайта для SpeedDial

Делаем логотип своего сайта для SpeedDial

Тут недавно ковырял стандарт HTML5 и увидел в нем довольно интересную фишку: можно указать логотип, который будет отображаться в получивших в последнее время большое распространение, плагинах SpeedDial (это такие миниатюрные сайты на домашней странице браузера, которые позволяют быстро открыть их).

Эта фишка позволит сделать ваш сайт более человечным для пользователей, не размещая в SpeedDial`е непонятный слепок вашего сайта, который не всегда красиво отображается.

Сам стандарт можно почитать вот здесь – http://www.whatwg.org. Правда он на английском языке, но Google Translate вполне сносно его переводить на русский язык.

В HTML5 прописано, что можно указывать различные логотипы, которые отображаются в зависимости от операционной системы или требуемого размера самого логотипа. Пока я не совсем понимаю, где бы это могло пригодится и зачем это вообще нужно, но вставлять логотип сайта, вместо случайного снимка в SpeedDial`е можно использовать уже прямо сейчас.
Делаем логотип своего сайта для SpeedDial

Единственным минусом всего этого является то, что на сегодняшний момент это работает только в браузере Opera. Но внедрение этой возможности в "понимание" барузеров, зависит только от разработчиков и я уверен, что не за горами то время, когда все браузеры будут понимать это новшество HTML5. Именно из-за этого вебмастера должны уже сегодня задумываться о этой возможности и по максимуму использовать ее на своих сайтах, чтобы уже сейчас быть готовыми.

Как добавить логотип для SpeedDial`а на свой сайт?

Оказывается очень просто. За это отвечает html-контейнер (или как это правильно называть), который должен выглядеть, примерно, так:

<link rel="icon" type="image/png" href="http://adminway.ru/logo.png">

Вот несколько правил для размещения логотипа:

  • Изображение должно иметь:
    • максимальные размеры – 260 × 195 пикселей (больше этого оно может быть, но, увы, его красоты никто не увидит)
    • минимальные 114 х 114 пикселей (можно и меньше, но в некоторых случаях оно будет растянуто, а это выглядит, ой, как нелепо)
  • если Вы укажите только одно изображение, скажем изображение размером 260 × 195 пикселей, то оно будет использоваться и в SpeedDial, и в качестве favicon`а, поэтому нужно добавить такую же строчку кода, но с меньшими размерами изображения, для favicon`а (об этом подробнее ниже)
  • размещаться приведенный выше код должен между тегами <head>…</head>

На этом сайте я использую вот такой вот html-код:

<head>
...
<link rel="icon" type="image/png" href="http://adminway.ru/logo.png">

<link rel="icon" type="image/png" href="http://adminway.ru/favicon.ico">
...
</head>

Первая строчка – это добавление логотипа для SpeedDial, а вторая строчка добавляет favicon для ваших web-страничек.

P.S. Во-втором пункте я обещал, что поясню такое поведение. В HTML5 принято, что если Вы указываете одно изображение, то оно используется везде. Но если Вы укажите два изображения, который будут иметь разное графическое разрешение, то браузер будет самостоятельно вставлять, там где это необходимо, меньшее изображение (в качестве favicon`а), а там где требуется более серьезный размер, использовать большое. Все гениальное просто. Если Вы укажите 2 одинаковых изображения, то будет использоваться только то, что объявлено выше остального.

P.S.S. Если Ваша работа связана с компьютером, то Вы обязательно меня поймете. Во время обеда, когда вся пища беспощадно поглощена, а времени еще 30-40 минут до начала работы, то Вам на помощь придут телевизионные сериалы. К примеру, сериал Сверхъестественное смотреть онлайн можно на сайте serialguru.ru. Одна серия идет где-то около получаса. Ну, согласитесь, не начинать же работать раньше положенного срока.

Комментарии:

  1. Евгений опубликовал комментарий 11 Январь 2012, 16:37 #

    Интересно и полезно. Спасибо за статью!

    | Ответить
  2. Руслан опубликовал комментарий 11 Февраль 2013, 15:52 #

    Спасибо за статью! То что искал)

    | Ответить
Имя
e-mail
Сайт
Текст комментария: