Favicon иконка для сайта – Сделать favicon для сайта — онлайн генератор фавикона

Для того, чтобы создать фавикон, нажимаем 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

Favicon.ico (фавикон) иконка для сайта

Favicon — это иконка (небольшое изображение), отображаеться на вкладке браузера рядом с названием сайта/веб-страницы, закладках, в избранном, а также в результатах поиска, в некоторых поисковых систем.

Для отображения иконки сайта в браузере и результатах поиска, необходимо разместить в корневой папке сайта (на хостинге) изображение с именем файла favicon в формате .ico (favicon.ico) размером 16×16 пикселей.

В HTML-исходнике страницы/сайта, между тегами <head><head> — прописать:

<link href=»favicon.ico» rel=»shortcut icon» type=»image/x-icon»>

Или, как рекомендует Вебмастер — Яндекс.Помощь, вариант №1

<link rel=»icon» href=​»http://site.ru/favicon.ico» type=»image/x-icon»>

Вариант №2 от Вебмастер — Яндекс.Помощь

<link rel=»shortcut icon» href=​»http://site.ru/favicon.ico» type=»image/x-icon»>

Если иконка (favicon) размещена не в корне сайта, тогда Вам необходимо в атрибуте href прописать полный путь к файлу favicon.ico.

Форматы и размеры для «Фавикон»

Рекомендовано использовать фавикон в формате .ICO — поддерживает одновременно несколько изображений в одном файле, с разным размером и битностью (современные браузеры выберут из этого файла наиболее подходящие изображение).

Форматы для Фавикон:

Рекомендуемые форматы: ICO; GIF; JPEG; PNG и BMP.

Пример кода для указания форматов PNG и BMP:

<link rel=»icon» href=»http://site.ru/favicon.png» type=»image/png»>
<link rel=»icon» href=»http://site.ru/favicon.bmp» type=»image/bmp»>

Рекомендуемые размеры favicon в формате .ico

16х16 (стандартный), 32х32, 48х48 в одном .ico файле

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

Favicon в программе WYSIWYG Web Builder

Фавикон для сайта могут установить и пользователи программы WYSIWYG Web Builder в настройках «Свойства сайта», а также можно сделать разный favicon для разных страниц одного сайта, как именно будет описано ниже.

Фавикон для всего сайта:

Главное меню — вкладка — Страница — Свойства сайта — вкладка — Общие

Иконка: выберите ваш файл
Иконка для Apple: выберите файл

Разный favicon для разных страниц:

Сначала установите иконку для всего сайта, как указано выше и обязательно с именем файла favicon в формате *.ico, *.png и т.п. (например: favicon.ico).

Для второй иконки пропишите имя файла, например: favicon2.ico

Выберите страницу, на которой хотели бы установить другую иконку.

Контекстное меню: Свойства страницы — Общие — Иконка: favicon2.ico

В Яндекс и Маил поиске будет отображаться только иконка с именем favicon.ico, а в браузере пользователя favicon2.ico при переходе на эту страницу. Делайте разные фавиконы, только на некоторых страницах вашего сайта.

dlod.ru

>>ВИДЕО УРОК: Как создать favicon для сайта, favicon.ico, Иконки для сайта, Генераторы иконок

Для начала давайте разберемся, что такое favicon?

Favicon – иконка (значок) для сайта, которая отображается в адресной строке браузера. Используемый формат .ICO. Разрешение иконки 16х16 пикселей. Используется как для красоты, так и для формирования бренда. Способствует лучшему восприятию и запоминаемости сайта.

Как создать favicon?

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

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

Второй вариант, воспользоваться готовым фавиконом. Найти подходящий favicon для сайта не составит труда, в Интернете полно сайтов имеющих целые галереи иконок. Вот лишь некоторые из них:

www.iconj.com
www.audit4web.ru
www.favicon.co.uk
www.favicons.com.ua
www.favicon.cc

Сервисы, генераторы иконок

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

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

www.favicon.cc
www.favicon.by

Преобразовываем favicon в формат .ICO и заливаем на сервер

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

1. Открываем подготовленное вами изображение в генераторе иконок и преобразовываем в формат .ICO

2. Устанавливаем FTP-соединение с сервером

3. Заливаем полученную иконку в папку с темой (для WordPress). Вот путь: public_html/wp-content/themes/ваша_тема. Иконка должна иметь: favicon.ico

4. После чего в папке с вашей темой находим файл header.php, открываем его с помощью блокнота Notepad++ и вставляем между открывающим и закрывающим тегом head, вот этот код:

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

5. Сохраняем файл header.php и заливаем его обратно на сервер.

Есть еще один вариант, отредактировать файл header.php можно и непосредственно в админ-панели вашего блога. Найти его можно в разделе «Дизайн -> Редактор». А дальше все по аналогии.

После того как все изменения сохранены, заходим на блог и любуемся результатом!

Это была информация для более продвинутых блоггеров.

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

Видео урок: Как создать favicon

[SWF]http://www.line-training.ru/free/fav.swf,600,450[/SWF]

.

Скачать видео урок в лучшем качестве

Успехов вам дорогие друзья!

С вами был Сергей Довбыш
Как создать бизнес блог

Tags: favicon, Иконка для сайта, Как создать favicon

www.biznes-start.ru

Создание Favicon для сайта — рекомендации и пошаговое изготовление

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

Кроме этого мы рассмотрим процесс создания и добавления Favicon для сайта.

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

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

Вот некоторые рекомендации, которые необходимо учитывать при создании Favicon.

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

#2. Не используйте стандартные значки. Многие после создания сайта на той или иной CMS, оставляют значок этого движка сайта, ничего, не меняя. В результате в выдаче поисковой системы может находиться не один сайт с таким значком, а множество. Этим вы не как не выделите свой сайт, поэтому используйте только уникальные иконки Favicon созданные специально для вашего сайта. Сюда же можно отнести ситуацию, когда используют иконки из различных коллекций или элементов интерфейса других сайтов. Помните для того чтобы выделяться вам нужна уникальная Favicon.

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

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

Теперь рассмотрим непосредственно сам процесс создания Favicon. Для этого существует множество сервисов. Однако они больше подходят для тех у кого уже есть готовая иконка которую они где нибудь содрали или взяли из какой-то коллекции. Но как я уже говорил выше, иконка должна быть уникальной, поэтому здесь я рассмотрю процесс ее создания при помощи программы Photoshop, на примере сайта WebMasterMix.ru.

Создание заготовки Favicon в Photoshop

#1. Создайте новый документ в Photoshop размером 64*64px, для этого пройдите в меню «Файл» >> «Новый…» или нажмите сочетание клавиш Ctrl+N. Вообще сам значок должен быть 16*16px, но лучше вначале создавать его таки размером, а потом уменьшить до необходимого.

#2. В моем случае у меня нет какого либо логотипа для сайта поэтому я решил использовать символ «W» с которого начинается адрес сайта, а также те цвета которые преобладают в верхней части сайта это синий и желтый. Поэтому я установил значение цвета #6A91D0 и при помощи инструмента «Заливка» (G) задал синий цвет ранее созданному документу.

#3. После этого я выбрал инструмент «Текст» (Т) добавил символ «W» и задал ему следующее значение цвета #FAC31D.

Для того чтобы символ более выделялся на синем фоне я добавил ему обводку черным цветом и размером 2px. Для этого необходимо пройти в пункт меню «Слой» >> «Стиль слоя» >> «Обводка», выбрать цвет и размер обводки.

После этого необходимо объединить слои, для этого необходимо пройти в пункт меню «Слой» >> «Объединить видимые» или нажать сочетание клавиш Shift + Ctrl + E.

Для того чтобы линии были плавные без засечек я добавил размытие. Для этого необходимо пройти в пункт меню «Фильтр» >> «Размытие» >> «Размытие по Гауссу…» и установить радиус 0,3 пикселя.

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

#4. Теперь необходимо изменить размер значка. Для этого нужно пройти в меню «Изображение» >> «Размер изображения» и установить размер 16*16px.

#5. Осталось сохранить значок. Иконка Favicon должна иметь имя favicon и расширение .ico. Все дело в том что по умолчанию Photoshop не сохраняет изображения в формате .ico. Поэтому сохраните его в формате .png, для этого пройдите в пункт меню «Файл» >> «Сохранить как…» и из раскрывающегося списка выберите пункт PNG.

Конвертирование изображение в формат .ICO

После этого мы конвертируем его в формат .ico при помощи сервиса favicon.ru. Зайдите на данный сервис и при помощи кнопки «Обзор» выберите  ранее сохраненный файл в формате PNG после чего нажмите на кнопку «Создать favicon.ico».

После этого на загрузившейся странице появится ссылка «Скачать favicon.ico!» кликнув по которой можно сохранить готовую иконку Favicon на компьютер.

Теперь пришло время добавить Favicon к вашему сайту, чтобы она отображалась для всех его страниц. Для этого поместите иконку в корневую папку вашего сайта. Если ваш сайт уже находится на хостинге то обычно эта папка называется «public_html». Затем, в каждую страницу вашего сайта, перед закрывающим тегом </head> добавьте следующие строки:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

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

Если вы используете WordPress то пройдите в папку wp-content/themes/папка-с-вашей-темой/ найдите в ней и откройте файл header.php, а заетм вставьте необходимы строки и сохраните файл.

Если вы используете Joomla то пройдите в папку templates/папка-с-вашей-темой/ и откройте файл index.php вставьте необходимые строки и сохраните.

В некоторых темах в WordPress и Joomla уже могут быть прописаны свои пути к файлу favicon.ico в таком случае удалите их и замените на свои.

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

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

Материал подготовлен проектом: WebMasterMix.ru

Рекомендуем ознакомиться:

Подробности

Опубликовано: 06 Январь 2011

Обновлено: 14 Октябрь 2013

Просмотров: 13649

webmastermix.ru

Как создать Фавикон (Favicon.ico) для сайта — сервисы с бесплатными фавиконами

Доброго дня читатели SeoVast. Сегодня в уроке мы поговорим о том что такое фавикон (Favicon) и для чего он нужен и самое главное как сделать фавикон для своего сайта.

Создать favicon (иконку) для сайта

Favicon.ico (Фавикон) — (от англ. FAVorites ICON, означающего — иконка для «Избранного»)

Так называются закладки в браузере Internet Explorer (отсюда взялось название), Favicon вы можете видеть в адресной строке браузеров, перед URL адресом открытой страницы и в закладках браузеров, перед названием закладки, а так же в поисковой выдаче сайтов.

При использовании фавикона ваш сайт приобретает индивидуальность и гораздо лучше запоминается (Ведь при виде логотипа Яндекс или Google все сразу понимают чей это фавикон).

Мы с вами рассматривали при размещении блоков от Google Adsense карту кликов сайта, те части страницы на которые больше обращает внимание человек при посещении сайта. Вернемся теперь к карте кликов, но уже в поисковой выдаче:

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

Как легко сделать Favicon (Фавикон)

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

Переходим на сайт Favicon.ru и нажимаем кнопку  «Выберите файл» — находим у себя на компьютере картинку, которая по вашему мнению более подходит к вашему сайту. Жмем «Создать фавикон».

На следующей странице будет показано изображение с нашим Фавиконом, если оно вас не удовлетворяет, то можно его редактировать или обрезать. В случае положительного результата жмем «Скачать Favicon».

_______________________________________________________________

Готовые иконки не хранятся на сервере — обязательно скачивайте их на компьютер!

________________________________________________________________

Теперь нам нужно установить Favicon (Фавикон) на свой сайт. Для этого закачиваем готовый значок (Будьте внимательны он должен иметь название — favicon.ico) в основную, корневую папку сайта (public_html — если ваш хостинг TimeWeb).

Переходим в редактор тем своего сайта и открываем файл Header.php и  прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>):

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

Скачать Favicon (Фавикон)

Возможно, что на вашем компьютере не найдется подходящей картинки к вашему сайту, как тогда быть? А все очень просто — можно воспользоваться готовыми  иконками для сайта. Таких сервисов достаточно много, вот некоторые из них:
iconj

• На данный момент 95 страниц, на каждой по 30 фавиконок.
• (Всего иконок 2 850)
• Можно скачать два формата иконок(.GIF .ICO).
• Можно взять html-коды иконок.

favicon

• (Всего иконок 123.543)
• Иконки даны двух размеров.
• Есть анимированные иконки.

siteicon

• На данный момент 57 страниц, на каждой по 35 фавиконок.
• (Всего иконок 1 995)
• Каждая иконка даётся трёх размеров (16×16,32×32,64×64).
• Нет анимированных иконок.

thefavicongallery

• На данный момент 2 страницы, на каждой по 256 фавиконок.
• (Всего иконок 512)
• Есть анимированные иконки.

favicon.co

• На данный момент 31 страница с favicon, на каждой странице по 144 фавиконки.
• (Всего иконок 4 464)

favicon-gallery

• Всего страниц 3, на каждой по 800 фавиконок.
• (Всего иконок 2 100)
• Много иконок на странице.
• Все иконки даны по несколько картинок, поэтому, чтобы взять одну иконку, нужно скачать всю картинку, а потом вырезать оттуда эту иконку.
• Нет анимированных иконок.

Так же читайте:

Также вы можете просмотреть Все записи блога

seovast.ru