Как сделать Favicon — логотип вашего сайта. Книга favicon


Favicon для сайта. Создать favicon и установить на сайт

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Для чего используется favicon

Favicon — это изображение размером в 16х16 пикселей, которое отображается в адресной строке при посещении сайта.

Фавикон не просто привлекает внимание посетителя, а имеет свои положительные стороны:

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

 

Favicon для сайта: принцип работы поисковых роботов

Обычно с фавиконом больше всего работает такой робот, как Яндекс. Боты или роботы монотонно запрашивают главную страницу и выходят на favicon.ico, который располагается в корневой папке. На Яндексе иконка перекодируется в 16х16 пикселей формата PNG. Использование иконок в Яндексе имеет свои преимущества: даже если ваш ресурс расположен не на первых позициях, то использование запоминающегося изображения привлечет посетителей в любом случае.

Как сделать иконку более яркой?

Для этого необходимо следующее:

  • Если вы не собираетесь использовать логотип в качестве иконки сайта, то постарайтесь просто сделать иконку эксклюзивной. Для того чтобы пользователь обратил свое внимание на изображение и запомнил его, старайтесь менять его к праздникам. Например, приближается Новый Год: используйте в изображении сочную елку, яркого Деда Мороза или Снегурочку и т.д.
  • Иконка должна соответствовать тематике интернет-ресурса. Согласитесь, если у вас на продвижении сайт медицинской тематики, то изображать танк в виде иконки неестественно.
  • Вдохновитесь фавиконами зарубежных сайтов со схожей тематикой. Выберите идею, преобразите ее и создайте свою, уникальную иконку.

 

Как сделать favicon

Способ 1. Скачать готовые favicon на сайте

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

Способ 2. Создать уникальную иконку сайта favicon в Фотошопе

  1. Чтобы сохранить favicon в формате ico, надо скачать плагин.
  2. После того как вы успешно перешли по ссылке и скачали файл, разархивируйте его в папку "File Formats". Найти ее можно по адресу С:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats.
  3. На время установки, закройте программу Photoshop.

Если это покажется вам слишком хлопотным, то вам помогут онлайн-сервисы по генерации картинок из форматов jpg, png и gif в ico.

Способ 3. Онлайн-сервисы

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

Порядок создания:

- загружаем понравившуюся нам картинку;- если изображение подошло — сохраняем, если нет — редактируем попиксельно.

 

Примеры онлайн-сервисов:

favicon.cc

Для того, чтобы создать фавикон, нажимаем Create New Favicon и рисуем с помощью инструментов:

  • pick existing color — инструмент-пипетка, помогает выбрать цвет, который уже использовали для рисования;
  • move — двигать нарисованное изображение;
  • transparent – стереть нарисованный пиксель.

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

favicon.ru

У этого сервиса есть версия на русском языке, где все необходимые инструменты легко найти.

Способ 4. Самый идеальный

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

 

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

  1. Подключаемся по FTP-доступу к сайту через программу Total Commander.
  2. Загружаем иконку в корневую папку сайта. В зависимости от системы управления сайтом корень может называться по разному, например public_html, htdocs, www и т.п. В этой папке вы должны найти файл index.php.
  3. Открываем файл index.php или header.php и между тегамивставляем вот такой html код:

Первая строка для поисковой системы Internet Explorer с атрибутом rel="shortcut icon". Остальные браузеры распознают фавикон по значению rel="icon".

 

Как изменить фавикон для Joomla, WordPress, UCOZ?

Поисковый робот, как и браузер, ищет файл favicon в корневой папке сайта. Для смены иконки нужно установить FTP-соединение и скопировать в корень каталога новую иконку favicon.ico. Как только изображение будет сохранено, следует открыть в браузере сайт и проверить, поменялось ли изображение в адресной строке.

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

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

Вычислив адрес расположения иконки, нужно заново подсоединиться к сайту через FTP и поменять старый файл favicon.ico на новый.

Как прописать фавикон в шаблоне для Joomla, WordPress, UCOZ?

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

  • Рассмотрим сайты на Joomla. Как правило, на этих сайтах файл favicon заливается в папку с шаблоном. Путь до используемой иконки прописывается в файле index.php.

Код будет выглядеть следующим образом: templates/адрес/favicon.ico.

  • Что касается сайтов, созданных на WordPress, то путь до файла favicon.ico задается непосредственно в используемой теме. В соответствии с этим, картинка будет лежать по адресу: /wp-content/themes/адрес/favicon.ico
  • Существует ряд сайтов, созданных в системе uCoz. Для того чтобы сменить фавиконку, следует залить файл favicon.ico в корень каталога посредством FTP-соединения.

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

 

Почему favicon не отображается в выдаче?

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

Чтобы проверить видимость favicon сайта для Google  и Яндекс введите в адресную строку:

Яндекс — http://favicon.yandex.net/favicon/www.site.ru

Google — http://www.google.com/s2/favicons?domain=www.site.com

 

Заменить www.site.ru и www.site.com на домен вашего сайта. Например, http://favicon.yandex.net/favicon/semantica.in

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

 

semantica.in

Фавикон для сайта, иконки ico | Интернет

Зачем нужен favicon.ico?

Если кратко и в двух словах, то фавикон – это яркая, броская картинка размером 16×16 пикселей формата ICO, которая привлекает внимание пользователей к вашему ресурсу.

Многие владельцы блогов, сайтов, особенно начинающие, не придают должного внимания такой “мелочи” и тем самым теряют многих посетителей.

Красивый уникальный favicon помогает владельцу ресурса выгодно выделяться на фоне его конкурентов и, как результат, помогает собирать поисковый трафик.

Как это происходит? Да очень просто.

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

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

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

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

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

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

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

// ]]>

Можно, конечно же, скачать и установить уже готовый favicon ico для сайта, но уникальным он уже не будет.

Вот несколько сайтов, где можно скачать фавикон для сайта.

www.iconj.com/gallery.php – в коллекции картинок представлен GIF и ICO формат

 

www.audit4web.ru/info/favicon/ – в галереи изображений более 15 000  иконки favicon ico

 

А здесь расположена http://www.favicon.cc галерея gif animation и статичные бесплатные иконки ic, которые можно без проблем править в редакторе этого онлайн сервиса.

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

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

 

Автор: Сергей Жук

// ]]>

jouk.com.ua

Фавикон для сайта | ИТ Шеф

Статья, в которой рассмотрим, как сделать правильный favicon для сайта.

Фавикон (favicon) – это значок, который связан с определённым веб-сайтом или веб-страницей. Наличие фавиконки у сайта позволяет, как правило, сделать его более узнаваемым. Это связано с тем, что данный веб-сайт (каждая его страница) будет иметь значок, посмотрев на который пользователь будет знать, что это за ресурс. Иконку favicon сайта можно увидеть в различных элементах браузера, таких как вкладка, адресная строка, история посещений (журнал), панель закладок и др. Кроме этого иконку фавикон можно также обнаружить в результатах поиска Яндекс рядом с названием сайта. Ещё иконка favicon используется при размещении ссылки (на страницу сайта) на главном экране операционных систем iOS (Safari), Android (Chrome), Windows 8 и 10.

Как добавить фавикон на сайт

Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.

В качестве инструмента для работы с графикой svg можно использовать профессиональный свободный векторный редактор как Inkscape.

Главная страница сайта inkscape.org

Подготовка изображения для favicon

Рассмотрим основные действия по подготовке изображения в формате svg для favicon.

Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).

Например, рассмотрим, как с помощью программы Inkscape можно подготовить изображение (иконку двери) в формате svg для фавикон.

  1. Используя сервис "Google Картинки" находим подходящие изображение двери и сохраняем его на компьютер.Изображение двери, найденное через поиск "Google Картинки"
  2. Открываем программу Inkscape и создаём в ней новый файл.
  3. Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
  4. Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр).Векторизованный растр двери
  5. Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру.Выравнивание изображения по центру содержимого страницы
  6. Сохраняем файл (например, под именем door.svg).

Примеры, подготовленных изображений (красная стрелка, лампочка, бабочка, часы, сердце и книга) для фавикон (для скачивания - в контекстном меню картинки выбрать пункт "Сохранить картинку как..."):

Генерация иконки favicon для всех платформ

Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.

Главная страница сайта realfavicongenerator.net

Для этого необходимо нажать на кнопку "Select your Favicon picture" и выбрать в диалоговом окне подготовленное изображение (door.svg).

После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).

Настройка фавиконки сайта для iOS (Safari)Настройка иконки favicon для Android (Chrome)Настройка фавиконки сайта для операционных систем Windows 8 и 10Настройка favicon для закреплённых вкладок браузера SafariНастройка параметров генерации favicon для сайта

После этого выбираем опцию "I will place …", которая говорит о том, что полученные файлы фавикон необходимо положить в корень сайта. Это действие обеспечит её поддержку в большинстве браузеров.

Далее нажимаем на кнопку "Generate your Favicons and HTML code".

После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.

Основные шаги, которые необходимо выполнить для того чтобы установить favicon на сайт

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

После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице "Install your favicon".

Основные шаги:

  1. Скачивание сгенерированного пакета (favicons.zip).Содержимое пакета favicon (форматы png, svg, ico)
  2. Распаковка его в корень сайта
  3. Вставка HTML-кода представленного на странице в секцию head ваших страниц: <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png"> <link rel="icon" type="image/png" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="theme-color" content="#ffffff">

Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.

Проверка favicon у сайта

Проверка favicon сайта осуществляется с помощью ссылки, представленной в 4 пункте (check your favicon). Данное действие также можно осуществить через главное меню Favicon -> Favicon checker.

Чтобы приступить к валидации favicon сайта выбираем в представленной форме протокол сайта (http:// или https://), вводим доменное имя и нажимаем на кнопку "Check Favicon".

Валидация фавиконки сайта

После этого убеждаемся, что favicon сайта прошёл проверку на сервисе realfavicongenerator.net и корректно отображается на всех платформах.

Индексация фавикон сайта поисковыми системами

Процесс индексации иконки у разных поисковых систем занимает разное время. Например, у Яндекса данный процесс может осуществляться несколько месяцев.

С помощью следующих URL можно проверить, как поисковые роботы видят иконку фавикон у сайта:

  • Яндекс - https://favicon.yandex.net/favicon/имя_домена
  • Google - https://www.google.com/s2/favicons?domain=имя_домена

Вместо имя_домена необходимо указать имя домена (например, itchief.ru).

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

itchief.ru

Favicon для сайта где можно подобрать

Favicon для сайта новичку

Содержание статьи

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

Зачем нужен favicon для сайта

Происхождение слова фавикон идет от английского Favorites Icon. Это слово переводится как небольшая картинка для избранного. Словом избранное называются закладки Internet Exprorer.

У уважающих себя ресурсов присутствует небольшая картинка вверху окна, напоминающая небольшой логотип сайта. Из таких фавиконов удобнее делать закладки, чем к примеру из их  url-адресов.  Фавикон обычно появляется справа адресной строки в браузере вначале URL ресурса. Также он виден в закладке перед заголовком.

Favicon для сайта — это небольшая картинка размером 16х16 пикс., которая имеет расширение .ico (данное расширение операционки используют, что бы хранить иконки). Favicon имеется почти у всех ресурсов, в независимости от хостинга или движка. Благодаря генераторам и галереям фавикон можно создать данную картинку в течение нескольких минут, используя для этого любое изображение. Можно создать ее с нуля, можно скачивать уже созданную и если на вашем ресурсе пока нет фавикона, советую его создать или скачать.

Зачем же нужен favicon для сайта

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

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

К слову, поисковика Яндекс существует бот, задача которого в индексации не контента сайта, а его фавиконов. Сделав такой рисунок и произведя его установку ну блог, остается подождать некоторое время, пока данный бот не произведет его индексацию. Данный процесс будет происходить от недели до четырех. Favicon для сайта должен быть проиндексирован, проверить это можно 3-мя методами:

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

Галереи Фавикон

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

 

 

1. http://www.thefavicongallery.com/ — коллекция с небольшим количеством фавиконов на разнообразные тематики. Включает в себя примерно триста картинок. Для скачивания понравившейся, кликните по ней правой клавишей мышки и выберите «сохранить как», потом сохраняем favicon на вашем ПК.

2. http://www.iconj.com/ — на данном ресурсе представлено примерно три тысячи картинок на любую тематику. Можно сохранять данные картинки с окончанием формата gif и ico. При желании можете скачать html-коды картинок. Здесь также присутствуют фавиконы в анимации. Недостатком данного сайта является то, что на страничке находится примерно тридцать картинок, поэтому для более лучшего выбора вам нужно будет просмотреть множество страниц.

3. http://www.favicon.cc/ – большая галерея фавиконов, на страничке имеется по двадцать штук, просматривать нужно будет долго.

4. http://www.favicon.co.uk/ — хорошая коллекция фавиконов. На ней представлено довольно много картинок. На одной страничке содержится 144 изображений. Что очень удобно пользователям. Тематика картинок самая разная.

5. http://favicon-generator.org/ — маленькая галерея картинок, 84 штучки. Но есть довольно неплохие.

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

С уважением     Андрей Зимин                       11.03.2014г.

Анекдот в каждой статье:

 

info-kibersant.ru

Иконки книг | Портал графики и дизайна

Иконки

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

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

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

Помимо этого, Вы можете назначить Вашему сайту favicon – это иконка сайта, которая будет отображаться в поле ввода url. Зачем она нужна? Она нужна для более легкого поиска сайта в закладках браузера.

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

Favicon обычно имеет размеры 16х16 пикселей, а используется она в формате ico. То есть название файла-картинки будет таким: favicon.ico. Фавиконку можно не только нарисовать, но и взять как часть любой большой картинки. Также можете взять ее бесплатно из разных коллекций. Для этого наберите в поиске иконки, затем укажите размер 16Х16, после чего поисковик выдаст вам множество вариантов иконок.

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

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

freedizain.ru