Иконка на ваш сайт.



Что такое пиктограмма сайта (favicon)?


Favicon — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Можно просто сказать, что это логотип вашего сайта и посетителям легче его запомнить. В настоящее время поисковая система Яндекс рядом с сайтом показывает его иконку. Вот так иконки отображаются в адресной строке браузера.

Favicon.ico (иконка)есть практически у каждого сайта.


Поисковая система Яндекс индексирует сайт с отображением иконки. И посетитель всегда видит иконку сайта, которая привлекает его внимание. Доказано, что картинки запоминаются лучше, чем надписи. Таким образом, со временем иконка вызывает даже определенные ассоциации в голове у пользователя.

У Яндекса есть специальный бот, который занимается индексацией фавиконок ресурсов. Процесс индексации favicon длится от от недели до месяца. Поэтому создав и установив его на сайт, вам нужно будет немного подождать. Проверить индексацию вашего фавикона можно такими способами:

  • Набрать адрес вашего сайта http://valvas.ru в окне поиска от Яндекса и посмотреть, есть ли рядом фавикон.
  • Перейти по ссылке http://favicon.yandex.net/favicon/great-world.ru («great-world.ru» заменить на URL-адрес вашего сайта). Если иконка проиндексирована, то вы ее увидите.
  • Зайти http://webmaster.yandex.ru и проверить наличие favicon.ico

Как сделать favicon.ico?


Иконку можно создать самому в графическом редакторе Photoshop. Создаём файл 16 x 16 px или 48х48 пикселей при разрешении 72dpi. Рисуем и сохраняем в *.jpg или в *.gif.

Скачать готовую иконку из галерей favicon со следующих адресов:

  1. "http://www.thefavicongallery.com/" — содержит около 300 изображений. Чтобы скачать понравившуюся картинку, нужно правой кнопкой мыши нажать на ней и выбрать «сохранить как», затем сохранить на компьютер.
  2. "http://www.iconj.com/" - более 3 тысяч иконок. Можете сохранять изображение в формате .gif или .ico. Можно взять html-код иконы.
  3. "http://www.favicon.cc/" – огромная коллекция favicons, можете создать свою иконку и сохранить на компьютер.
  4. "http://www.favicon.co.uk"/ - множество иконок с различной тематикой.
  5. "http://favicon-generator.org/" - небольшая коллекция (84 штуки) мини-изображений для вашего сайта.

  6. Сделать favicon для сайта


    Для того, чтобы сделать свою иконку, можно воспользоваться онлайн генераторами.


    Перейдя на сайт Favicon.cc вы увидите рабочее окно

    Красным прямоугольником выделена рабочая область (1). Здесь создается фавикон. Favicon в оригинале можно увидеть ниже.

    Каждый квадратик рабочей области представляет собой один пиксель. Закрашивая каждый квадрат, который равен одному пикселю, вы можете получить картинку это и будет ваша будущая favicon.ico. В поле (2), поставив галочку рядом с пунктом pick existing color, вы сможете закрашивать квадратики, выбрав подходящий цвет в палитре цветов.

    Ошиблись и нужно стереть квадратик - поставьте галочку рядом с пунктом transparent и нажмите левой кнопкой мыши на нужную область.

    Фавикону можно будет переместить, если поставить галочку напротив пункта move.

    Ваша favicon готова и вы хотите ее скачать, нажмите на ссылку Download Favicon (3).


    Как сделать Favicon для сайта из уже имеющегося изображения


    Здесь же можно сделать иконку из любого изображения. Для этого нажмите «Import Image» (в левом окне). Далее нажмите на кнопку «Обзор» и загрузите нужную картинку. Фавикона для вашего сайта будет создана на основе выбранной картинки. Для уменьшения изображения нужно будет выбрать:

    Keep dimensions – соотношения сторон картинки останутся неизменными.

    rink to square icon – изображение станет квадратным, но картинка может исказиться.

    Если favicon.ico вас устраивает, то скачивайте ее на компьютер.


    На сайте Favicon.ru можно с легкостью преобразовать любое изображение любых размеров в небольшую иконку 16×16 пикселей.



    Добавить изображение можно двумя способами:

    - С помощью кнопки «Выберите файл» необходимо найти на компьютере нужное изображение и загрузить его.

    - Ввести в поле адрес картинки в интернете (когда файла нет на вашем компьютере), и сервис все сделает сам.

    Загрузили файл, нажимаем на кнопку на кнопку «Создать favicon.ico!» и ждем несколько секунд.

    Затем скачиваем фавикон на компьютер.







    Как установить favicon


    Саму иконку (favicon.ico) поместить в корневую папку сайта.

    В html-коде страниц, перед закрывающим тегом</head > надо разместить следующий код:
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    или
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    Если ваша пиктограмма находится не в корне, необходимо в поле href указать путь к файлу.

    15.07.2013

    Далее рассмотрим: Макет верстки сайта