Блог
Анны Фёдоровой Как зарабатывать в интернете и на своём блоге?

Создание и установка фавикона на сайт

2014.04.21
Автор:

Здравствуйте, уважаемые читатели! Сейчас я расскажу, как создать фавикон, а потом мы перейдём к такому действию как установка фавикона на сайт.

как создать фавикон

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

Итак, favicon – небольшая картинка размером 16 х 16 или 32 х 32 пикселей, имеющая расширение «ico».

Как создать фавикон для своего сайта

Его можно сделать несколькими способами:

1). Скачать уже готовую иконку из интернета

2). Нарисовать фавикон с помощью фотошопа или онлайн — сервисов

3). Сделать favicon  из готового изображения

Теперь рассмотрим все эти способы по порядку.

Коллекции и галереи фавикон

Что касается первого способа, то думаю, проблем у вас никаких не будет. Сейчас очень много сайтов-галерей favicon, где можете скачать любой понравившийся значок. Например, iconj.com. Там очень много всяких иконок, свыше 3 тысяч.

Заходите в раздел User Favicon Gallery, переходите по ссылке и качаете. Всё элементарно просто.

Как создать фавикон для сайта с нуля

Конечно это способ лучше первого, поскольку вы создадите уникальную иконку и при этом потратите времени не больше 15 минут.

Если вы хотите создать фавикон в фотошопе, то тогда создаём документ 16 х 16 пикселей. Открываем программу фотошоп ( «Файл»-«Создать»). И в открывшемся окне в графу ширина и высота вписываем 16 и нажимаем ок.

Появляется маленький квадратик, для удобства увеличиваем его масштаб, нажав на «лупу». Выделяем нужным цветом  и собственно рисуем, что мы хотим увидеть. Обратно уменьшаем масштаб до 100% и сохраняем: «Файл»-«Сохранить как». В Имя файл пишем favicon.ico и выбираем JPEG и сохраняем.

создать фавикон

Если вы не умеете пользоваться фотошопом, тогда читайте дальше — самый простой способ создания фавикона с нуля.

Как создать фавикон с помощью сервиса

Переходим на сайт favicon.ru, определяемся с цветом  и рисуем иконку. Здесь всё элементарно думаю, разберётесь. Этот сервис позволяет осуществить предварительный просмотр иконки, поэтому смотрим, что получилось и скачиваем готовый favicon.ico к себе на компьютер.

создание и установка фавикона

Создаём фавикон из изображения

Так же воспользуемся этим же сервисом. Нажимаем на  «Обзор» и выбираем готовую картинку, редактируем её как вам нужно и нажимаем далее. И скачиваем готовый фавикон.

создание фавикона

Теперь, когда наша иконка готова, занимаемся установкой favicon.

Установка фавикона на сайт

Как установить фавикон на сайт? Есть три варианта установки:

из админки блога WordPress, благодаря настройкам шаблона

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

используя плагин Easy Favicons

Установка фавикона на сайт — занятие не сложное, поэтому не рекомендую лишний раз нагружать свой блог, а установить фавикон без плагина, к тому же это не займёт у вас много времени.

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

а). Если мы поставим галочку в первом варианте, то ваш граватар будет использован в качестве фавикона.

б). Во втором – указываем путь к иконке.

в). В третьем — выбираем нужный фавикон из представленных и нажимаем сохранить.

установка без плагина

Загрузите свой фавикон в корневую директорию сайта, т.е. туда, где находятся папки wp-admin, wp-content и wp-includes.

Только проследите, чтобы  он был сохранён как favicon.ico. Нажимаем «Загрузить файлы в текущую директорию»-«Обзор»-выбираем наш фавикон и нажимаем «Загрузить».

установка фавикона на сайт

Для того, чтобы ваш фавикон отображался в поисковой выдачи — нужно вставить код:

<link href="http://ваш сайт/favicon.ico" rel="shortcut icon" />
<link href="http://ваш сайт/favicon.ico" rel="icon" type="image/x-icon" />

в header.php перед тегом  </head>

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

Как поменять иконку сайта и проверить в поисковых системах

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

Если в корневой папки его нет, тогда идём в wp-content, themes, выбираем свою тему и там меняем фавикон.
Теперь обновляем сайт и любуемся результатом. Если вы хотите проверить свой фавикон в поисковых системах Яндекса и Google или он у вас не отображается, тогда читайте статью «почему не отображается фавикон в поиске Яндекса».

Ну вот и всё, сегодня мы рассмотрели  как создать фавикон, а так же разобрались с установкой фавикона на сайт. Чтобы не пропустить появление новых полезных статей, советую подписаться на обновление блога.

P.S. А каким способом вы создавали фавикон для своего сайта? Жду ваших комментариев!

С уважением, Анна Федорова

 

 

 


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

  1. Мишаня

    Лично мне фавиконы нравятся тем, что они служат опознавательными знаками сайтов. И чем интереснее фавикон, тем лучше и быстрее он запоминается.

    Ответить
  2. Мишаня

    Мне кажется, сделать собственными руками оригинальный фавикон — гораздо лучше. Тогда не будет повторений с другими сайтами, никто не спутает.

    Ответить
    1. Татьяна

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

      Ответить
  3. Татьяна

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

    Ответить

Оставить комментарий: