9

Фавикон для интернет-магазина

{lang: 'ru'}

Приветствую Вас, друзья.

Сегодня мы разберёмся, как создать фавикон для интернет-магазина. Признаюсь, у меня много времени уходит на развитие интернет-магазина продукции для красоты и здоровья tkmmed.ru, на накопление информации, её переваривание. Причём, результат не осязаем: то подправишь метатеги, то разнесёшь продукцию по категориям и т. д. В целях восстановления душевного равновесия и ежедневного лицезрения достигнутого результата было решено создать фавикон для tkmmed.ru. А зачем он нужен? Во-первых, это та часть сайта, которую пользователь видит в первую очередь при поиске информации через поисковики:

Как создать фавикон_Kak sozdat' favikonОднозначно, красивый фавикончик влияет на узнаваемость сайта в интернете. Во-вторых, очень удобно делать закладку на сайт в панели закладок браузера, когда у интернет-ресурса он есть: можно полностью убрать текст, оставив только картинки:

Примеры фавиконов_Primery' favikonovНа скриншоте вся подчеркнутая строка в панели закладок браузера Гугл Хром  состоит из фавиконов. Сам себя я убедил и делать всё буду тоже сам.

Для этого мне потребуется нарисовать картинку с помощью бесплатного и мощного графического редактора Paint.net (рекомендую – ВЕЩЬ!, скачать можно здесь – http://soft.softodrom.ru/ap/Paint-NET-p6096), а затем, руководствуясь рекомендациями от разработчиков Shop-script, установить фавикон. Идея простая – зелёный круг с белой строчной буквой t.

  1. Запускаем графический редактор, заходим в меню Изображение–Изменить размер, в появившемся окне изменяем размер листа на 800х800 пикселей для удобства работы;
  2. Вставка квадрата_Vstavka kvadrataВыбираем панель Инструмент — Выбор области овальной формы, щёлкаем левой кнопкой мыши в середине верхней стороны квадрата и, удерживая Shift, тянем вниз до середины нижней стороны:
  3. Рисуем круг_Risuem krug Теперь отпускаем мышку и получаем белый квадрат с выделенным кругом внутри. Заходим в меню Изображение — Обрезать по выделению. Выбираем и получаем изображение белого круга, всё, что осталось за пределами круга стало прозрачным.
  4. Открываем меню Окно, выбираем пункт Палитра, идём в панель Инструмент — Выбор прямоугольной области. Выделяем полностью весь круг. Возвращаемся в панель Инструмент, берём пункт Заливка. Выбираем на палитре зелёный цвет и щелкаем левой кнопкой мыши по выделенному кругу, получим вот что (скриншот уменьшен):Круг для фавикона_Krug dlya favikona
  5. Теперь выбираем инструмент Текст, шрифт Mistral, размер 800, в Палитре делаем основным цветом белый, ставим курсор примерно в середину круга и впечатываем строчную букву t:
Фавикон почти готов_Favikon pochti gotovОбратите внимание, что перемещать впечатанную букву можно при помощи пиктограммы внизу справа от курсора.
       6. Нам нужно сохранить файл в формате .png или .gif. По рекомендации от разработчиков Shop-script о том, как сделать фавикон для интернет-магазина, сохраняем изображение с названием favicon.png себе на компьютер. Вот что получилось (изображение кажется размытым, но это так отображаются прозрачные области):
Фавикон_Favikon
      7. Фавикон создан, теперь его нужно установить: для этого нужно зайти в админ-панель интернет-магазина во вкладку Дизайн-Загрузка изображений-Картинки-Загрузка по одному и загрузить файл favicon.png:

Загрузка файла favicon.png на хостинг_Zagruzka fayla favicon.png na hosting8. Чтобы изображение фавикона появилось в названии интернет-магазина Shop-script, нужно ссылку вида<link rel=»shortcut icon» href=»/ИМЯ_ПАПКИ/ИМЯ_ФАЙЛА_ИКОНКИ»> (в моём случае: <link rel=»shortcut icon» href=»/published/publicdata/H0004937KTM/attachments/SC/images/favicon.png»>)вставить шаблон интернет-магазина, как показано на скриншоте:

Установка фавикона_Ustanovka favikonaСохраняем шаблон и вуаля! Картинка для браузера Гугл Хром, для других не проверял.

Как сделать фавикон? Очень просто!_Kak sdelat' favikon? Ochen' prosto!

Как сделать фавикон для интернет-магазина Shop-script? Легко! Вы сами это увидели. Уверен, для Вас не составит большого затруднения установить фавикон для сайта или интернет магазина. Искренне Ваш, автор блога moimagaz.ru, Vovander.

Популярные статьи:

Похожие статьи:

  1. Настройка меню интернет-магазина Shop-script
  2. Создание меню интернет-магазина Shop-script.
  3. Редактирование шаблона интернет-магазина Shop-script.
  4. Уникальность контента.
  5. Shop-script WebAsyst: опыт эксплуатации.

About the Author

Комментарии (9)

Trackback URL | Comments RSS Feed

  1. Мариам:

    Vovander, а как делаешь так, чтобы закладки в виде фавиконок в браузере были? (PS:что-то не вижу у тебя подписку на комментарии!)

    • vovander:

      Мариам, я использую браузер Google Chrome. Чтобы у Вас отображалась панель закладок, нужно щёлкнуть на пиктограмму с ключиком (Настройка и управление Google Chrome), выбрать пункт Параметры, в основной вкладке поставить галочку напротив надписи «Всегда отображать панель закладок». А чтобы в панели закладок отображался только фавикон, нужно при сохранении закладки удалить её имя, останется url. Если кнопка запоминающаяся, то её легко можно найти и без текста. Надеюсь я правильно понял твой вопрос. RSS – моя больная тема, не дружу я с RSS, пока. Задача поставлена, подружусь до конца недели.

  2. Сергей:

    Пробовал установить фавикон,и через плагин,и через вставку кода!Вроде все правильно делаю,но картинка не отображается.

    • vovander:

      Привет, Сергей.
      Попробуйте ещё почитайте начало статьи «Опыт эксплуатации Shop-script WebAsyst». Я по ней, в конце-концов, и на этом сайте удалил плагин установки фавикона и сделал всё через код. Если сделаете, как там рекомендуется, можно проверить видимость фавикона таким образом: http//название сайта/название файла с фавиконом.ico Перейдя по такому адресу, Вы должны увидеть свой фавикон. Бывает, что проблемы с видимостью фавикона зависят от Вашего компа, т. е. зайдите на ваш сайт с другого компа, в другом браузере и посмотрите результат. Получите дополнительную информацию к размышлению. Будет интересно узнать о Вашем результате.

  3. Анжелика:

    Знаю отличный и простой способ установить нужный фавикон, все оказывается очень просто И РАБОТАЕТ БЕЗ ПРОБЛЕМ)))

  4. Евгений Илясов:

    Фавикон – важный элемент брендинга, это точно.

  5. Татьяна:

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

  6. Ольга Шантина:

    Спасибо огромное за Paint.net – действительно, отличная вещь!

  7. Нелли:

    Да, очень интересно. Здорово, что с картинками сделали статью, очень понятно сразу.

Leave a Reply



Если Вы хотите, чтобы рядом с Вашим комментарием была картинка, пройдите по Gravatar.

Подписаться, не комментируя