Создание favicon для своего сайта. Иконка создание сайтов


Фавикон-создание, установка, сервисы для скачивания

фавиконкаЗдравствуйте! В сегодняшней статье мы с вами научимся устанавливать иконку на сайт, блог. Придадим, так сказать, ему солидности. На эту тему информации в интернете как грязи, но все же, еще раз повторимся.

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

После набора поисковой фразы в браузер перед нами выпадает множество ответов (результаты поиска) и у каждого из них есть своя отличительная черта – иконка сайта. И для каждого сайта этот значок является ориентиром, своеобразным компасом.

Вопросы рассматриваемые в статье:

Что такое фавикон (favicon) ?

фавикон

Фавикон – это маленький значок или картинка (16х16 пикселей) располагающаяся рядом с названием сайта во вкладке браузера, в выдаче поиска, а также в закладках. Есть и другие размеры — 24х24, 32х32, 48х48.

Согласно Википедии:

Favicon(сокр. от англ. FAVorites ICON – ”значок для избранного”, от названия папки с закладками в MSIE) – значок веб-сайта или веб-страницы.

У этой картинки специальный формат ICO, но может и JPEG, PNG и GIF. Изначально они были придуманы для удобства управления закладками.

Какая польза от фавиконки или зачем она нужна?

Непосредственной, прямой выгоды со стороны поисковых систем нет, но много других положительных факторов:

  •  Favicon выделяет ваш сайт среди других веб-ресурсов, делает его уникальным и кликабельным.
  • Запоминающаяся иконка сайта способствует его узнаваемости в сети. Т.е., по сути, является визитной карточкой, брендом, а на все брендовое, как известно, ”клюют” чаще.

Как создать favicon.ico самому и где скачать готовые?

Вообще, можно не “заморачиваться” и заказать фавиконку у дизайнера за деньги. Можно нарисовать в Photoshop, но эти варианты мы рассматривать в статье не будем.

Воспользуемся одним замечательным англоязычным онлайн сервисом www.favicon.cc А замечателен он тем, что там можно создать иконку с нуля, отредактировать имеющуюся или скачать уже готовую. www.favicon.cc является одним из самых простых и популярных онлайн генераторов в сети. Чтобы скачать фавиконку нажимаем на ссылку Download Favicon (Скачать Favicon). Вот еще несколько онлайн генераторов фавиконок: Michurin.net, Favicon-Generator.org, Favicon.ru

А вот несколько сайтов где есть готовые галереи иконок: findicons.com, www.iconsearch.ru.

Как установить favicon.ico на сайт?

После нелегкого выбора подходящей иконки, нужно ее как то ”привинтить” к нашему сайту. Для этого файл favicon.ico загружаем с помощью FTP-клиента в корневую директорию сайта (на Вордпресс public_html/ваш сайт/).

Затем прописываем путь роботу Яндекса к файлу favicon.ico. Подробнее здесь. В файле header.php шаблона сайта между тегами <head> и </head> вставляем вот такой html-код:

<link rel=«icon» href=«http://имя сайта/favicon.ico» type=«image/x-icon»>

или

<link rel=«shortcut icon» href=«http://имя сайта/favicon.ico» type=«image/x-icon»>

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

Поделиться "Создание favicon для своего сайта"

barbadosmaney.ru

Как сделать Favicon (иконку) для сайта

Как сделать favicon для сайта

Привет! В процессе оформления блога я столкнулся с одной проблемой.

Как оказалось изначально в моем шаблоне не был встроен маленький значок (картинка размером 16*16 пикселей), которая хорошо сказывается на увеличении кликов по сайту в ТОП выдаче Яндекса, а также придает изюминку в дизайне ресурса.

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

Иконка фавикон

Чтобы всем было понятно почему называется именно фавикон, можете полистать английский словарь и найти примерный перевод («icon» — иконка, значок), это изображение для сайта.

Все продвинутые веб-мастера используют данную иконку для продвижения своих проектов. Красиво оформленный значок придает сайту индивидуальность и легко запоминается пользователям, подробнее об этом я рассказывал в статье «Как сделать красивый дизайн сайта».

А еще и система Яндекс в поисковой выдаче показывает эту иконку в сниппете площадок, слева от заголовка. Давайте ради эксперимента наберем в поиске запрос "Как сделать иконку для сайта" и посмотрим на результат.

ТОП выдача сайтов

Согласитесь такие сайты с фавиконом смотрятся куда лучше обычных, поэтому если рядом с вашим сайтом будет блог, у которого нет такого значка есть вероятность, что пользователь перейдет именно к вам. Поэтому сделать такую иконку для блога все таки стоит, уж лишней она точно не будет.

Главное запомнить, что изображение для значка нужно сохранить строго вот такого формата:

  • Название favicon.ico
  • Размер 16*16 пикселей
  • Разрешение .ico обязательно

Как сделать иконку для сайта (файл favicon.ico)

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

1) Существует отличный сервис favicon.cc по созданию и выбору иконок. Переходи на данный сайт и видим такую картину:

Онлайн сервис для создания значков

Как видно на данном снимке, сервис этот очень простенький. В большом окошке создавайте свою будущую иконку, а генератор системы favicon.cc сам с генерирует ее 16*16 пикселей.

2) Кому лень так делать, можете выбрать готовые значки, там их огромное число даже есть анимированные. Для этого нажимаем на ссылку «Top Rated favicons», а затем отыскиваем что-то необычное.

Рисуем фавикон

3) Ну что выбрали из предложенных самую красивую? Хорошо, теперь открываем ее.

Готовые значки

4) Чтобы ее скачать нажмите на ссылку «Download favicon» — все она стала вашей.

Скачать значок

5) Далее останется только добавить фавикон в файлы хостинга, чтобы картинка появилась слева от названия сайта. Лично я ее закинул в корневую папку блога, например на моем сервере она начинается с «www».

Если после данной процедуры значок не отображается, стоит попробовать после тега <head> прописать следующий код в главных файлах сайта index.php или header.php:

иконка фавикон

Перезагружаем страницу блога и смотрим результат. Если изменений нет, тогда попробуйте очистите кэш браузера.

Еще может быть так, что для таких иконок на вашем сайте существует отдельная папка, где должен быть расположен файл favicon.ico.

Движок площадки играет в этом не последнюю роль. У меня сайт сделанный на wordpress и путь к иконке такой - /www/seoslim.ru/favicon.ico.

Не ищите сделанного значка своего сайта сразу же в выдаче Яндекс. Робот системы Яндекс должен с начала сканировать сайт, найти фавикон и только потом внести поправки в работу собственного алгоритма.

Визит робота Яши может затянуться до трех недель. Терпение и еще раз терпение друзья.

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

seoslim.ru

Программа для создания Favicon иконок для сайта - Favicon Create

Сегодня я нарыл в сети интернет полезную программу для создания favicon. Если вы не знаете, что такое favicon, тогда я вкратце вам расскажу.Favicon - это иконка сайта, которая отображается в адресной строке веб-браузера, а также при  выдаче в поисковых системах. Я думаю, напишу об этой теме подробней в другой статье. Итак, программа, которая поможет создать favicon для сайта или блога.

Программа для создания Favicon иконок для сайта - Favicon Create

Программа для создания Favicon иконок для сайта - Favicon Create

Программа бесплатная и полностью готова к использованию без установки.

Для создания иконок сделайте следующее:

* Запустите файл faviconcreator_rus.exe.*  Нажав на кнопку “Открыть изображение”, найдите на компьютере подходящее изображение в формате (*.jpg, *.jpeg, *.bmp).

* Установите размер иконки (16х16, 32х32).* Установите глубину цвета будущей иконки (4/8/24/32 битный цвет).* Жмите кнопку “Сохранить иконку”.

Вуаля, иконка готова!

Устанавливаем готовый "favicon.ico" на сайт между тегами <head></head>

<head><link rel="shortcut icon" href="favicon.ico"></head>

Скачать бесплатную программу для создания favicon - Favicon Create

Язык программы: русский.Размер программы: 354.61 кб.

Программа для создания favicon

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

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

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

Добавить комментарий

Метки: favicon иконки, программы, скачать бесплатно

bloggood.ru

Отличный сервис по созданию favicon.ico для Вашего сайта

про Сервис создания favicon

Кто-то делает дело, потому что это быстро и «нетрудно», кто-то делает это только потому, что это популярно и впоследствии прибыльно, кто-то просто делает своё дело.

Представляю Вам один из лучших сервисов по созданию Favicon — FavIcon from Pics 2.0.Думаю, все Вы замечали одну из небольших, но очень забавных деталей, говорящих иногда очень много о сайте и ресурсе в целом. Тем, кто малознаком с сайтостроительством, скорее всего ничего не скажет такое название как favicon.ico, но, во всяком случае,  даже они в курсе, что при добавлении сайта в закладки браузера и просто при его просмотре в окне рядом с названием ресурса часто красуется личико сайта – этот самый favicon.ico.

Если сказать точнее: Favicon (FAVorites ICON — значок для избранного, произошло от названия папки с закладками в IExplorer), причем до 7й версии эксплорера, он отображался только в избранном и благодаря этому администраторы серверов могли узнать, сколько пользователей создало закладку на их сайт.

Сегодня вы узнаете:

  • Как можно сделать качественную favicon.ico?
  • Какой сервис создания иконок для сайтов справиться лучше всего с созданием личика сайта (именно с созданием favicon)?
  • Как пользоваться этим сервисом и что он умеет ещё, кроме создания иконок favicon.ico?
  • Как установить себе на сайт favicon.ico?
  • Как сделать анимированный favicon.ico?

Это конечно далеко не все вопросы, которые касаются иконок сайтов, но думаю, они самые основные. Начну с того, как я наткнулся на этот онлайн сервис. Задача передо мной стояла самая простая – сделать иконку для itpride.net, именно эта иконка сейчас установлена на данном сайте.

Перепробовав несколько сайтов по созданию favicon.ico, я уже начал было подумывать скачать программу с софтпортала, что-то по типу any2icon, но подумав о том, что «качать mail-сервер для отправки одного письма» это слишком. Я продолжил поиски в выдаче Google,  и вот — нашел отличный сервис, где можно легко создать качественный favicon.

Называется он — FavIcon from Pics, его скриншот  Вы видели в начале этого рассказа. Для непосвященного в английский язык (а сервис англоязычный) он, возможно,  вызовет некоторые трудности, которые мы сейчас попробуем решить.

Подробнее про favicon

Интерфейс сначала довольно простой, мы видим две кнопки для создания иконок favicon.ico. В первом случае Мы можем загрузить исходное изображение с компьютера. Во втором, при наличии аккаунта в Twitter, — просто вводим свой ник в твитере, и сервис автоматически скачает изображение Вашего аватара (безумно удобно).

Make favicon from JPG

Я выбрал первый вариант,  и загрузил изображение нашей иконки в разрешении 1000х1000(как Вы могли догадаться, сервис не устанавливает ограничений на размер) и ко всему прочему, сделать favicon он может из любого формата изображений, кроме специфических (RAW и т.д.).

После нажатия кнопки Generate Favicon.ico (1 — кстати, обратите внимание, что название кнопки изменилось на «Add Another…», т.е., приглашение добавить ещё одно изображение),  мы уже можем забрать готовую иконку по ссылке «Download Favicon Package» (2).

Сервис также сразу создает анимированную версию favicon с повтором логотипа.

favicon. what can do for this

Вот тот же скриншот, но уже ближе. Обращаю внимание на список того, что мы можем ещё сделать с помощью сервиса.

Перевод  пунктов сверху вниз (8 пунктов):

  • Изменение цвета, добавление текста, редактирование анимации, создание дополнительных иконок для iPod и другие полезности…
  • Посмотреть состав архива (обычно 2 файла иконок и файл со сведениями о компании)
  • Посмотреть на работу favicon в браузере (превьюшка, так сказать)
  • Валидация иконки, может кто-то и захочет
  • Добавить свой favicon в галерею (Может Вы художник, и тысячи пользователей будут использовать именно ваш favicon, кстати,  у них недурная галерея)
  • Написать отзыв о работе
  • Загрузить только favicon.ico
  • Загрузить только анимированную версию иконки

favicon, customize icon

Итак, если Вам этого было мало, можете нажать ссылку «EDIT» под анимированной версией иконки для перехода к редактированию. Тут нас ждет не менее широкий список возможностей, а именно — десять, после слов «customization…».

Что ещё можно сделать тут с favicon.ico:
  • Добавление текста к анимации (прокрутка), а также управление добавленными картинками (чуть позже подробнее)
  • Цвет текста в анимации (наверное,  потом добавят и шрифт)
  • Удалить анимацию из архива
  • Добавить в архив иконку для iPod
  • Выбор цвета подложки (бэкграунд) favicon
  • Добавить бордюр иконке, по-простому — рамка для favicon
  • Сделать подложку прозрачной
  • Конвертация в черно-белый вариант
  • Добавить иконки других размеров(16х16 256 цветов, 16х16 64К цветов …)
  • Удалить дополнительные иконки из архива

Остальные пункты смотрите выше, я их уже описал.

favicon with animated text

Вот так, кстати, выглядит выбор цвета для анимированного текста favicon.

favicon, ipod icon with border

А теперь,  Вы видите, что в архив добавились ещё одна иконка размером 32х32 (1), а также иконка для iPod(2). На скриншоте видно слабо, но синий бордюр тоже был добавлен.

favicon twopictures animated

Я уже несколько раз упоминал ранее, что можно загрузить ещё одно изображение (Add another image). Вернее не одно, а сколько пожелаете картинок. Сделав это,  Вы сможете:

  • сделать несколько различных favicons не запуская сервис снова
  • можно использовать обе (2,3,5…) картинки для создания яркой анимированной  favicon

favicon two pictures and animated

На этом рисунке Вы видите пример настройки анимации с двумя иконками, они называются {PIC1} {PIC2} и, что самое примечательное, их можно поставить несколько (например, рисованные буквы — А-Б-В…), а также вставить между ними текст. Тут уже как фантазия подскажет.

Да, вернёмся к началу нашего ликбеза по favicon.ico. На следующем изображении я  создаю себе иконку  из аватара в Twitter:

favicon from twitter avatar

Можете нас добавить к себе в follow list – http://itpride.net/twitter

Результаты работы сервиса для favicon:

animated_favicon_itpride

animated_favicon_two

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

Лучше я скажу о минусе этого сервиса (да есть и такой) – при загрузке третьей иконки автоматически открывается popup окно с рекламой от google, но думаю, — это небольшая плата за сервис. Ребята постарались и заслужили как минимум на «хлеб с маслом».

Им  удалось сделать один из лучших онлайн сервисов по созданию и редактированию иконок favicon.

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

Для установки на сайт иконок favicon.ico вставьте следующий код, между тегами в файле шапки Вашего сайта (для WordPress, к примеру, — это в header.php):

<lnkrel=“shortcuticon” href=“favicon.ico”> — для обычной иконки 

<lnk rel=“icon” type=“image/gif” href=“animated_favicon1.gif”>  и для анимированной

Ежели они у вас имеют другие имена, исправьте их в параметре «href»  и не забудьте скопировать иконки в директорию сайта на хостинге.

Запустить сервис сейчас:

Создать Favicon онлайн | Создать Favicon (⇒)

ЗЫ: Чуть не забыл, последнее и всё, я ушёл: если Вы знаете какой-то хороший или уникальный сервис или сайт,  или у Вас есть свой супер-сайт – присылайте его на наш email (admin(ET)itpride.net). Мы постараемся опубликовать о нем статью, или присылайте целую статью о своем сервисе. Лучшие – получат прямые ссылки на свои сайты.

 

Сейчас другие читают

itpride.net