Сделать фавикон для сайта онлайн. Создать favicon ico для сайта онлайн


3 способа создать favicon для сайта бесплатно

Все о FaviconЧто такое Favicon? Как правильно создать favicon? Где создать favicon online? 3 простых правила успешного favicon, вы можете ответить на эти вопросы? Если да, то бежим в комментарии 😉 , если нет, то читаем статью, а перед этим подписываемся на бесплатную рассылку уроков от WpMen, я уверен, найдется еще много вопросов, на которые вам было бы интересно узнать ответ.

Что такое Favicon.ico?

Что такое FaviconЗамечали, когда ищете полезную информацию на Yandex, рядом с результатами поиска появляются маленькие картинки (Как оптимизировать изображения для сайта?), которые и отвечают на вопрос: Что такое Favicon? Правильно созданная мини-картинка позволяет выделиться из груды сайтов, с которыми вы конкурируете.

Как правильно создать Favicon?

Как создать FaviconСуществует множество способов создать собственный фавикон, от создания в online системах и самостоятельного составления например в Adobe Photoshop, до уменьшения готового, уже имеющегося изображения до нужных размеров — это 16×16 пикселей.

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

Список сайтов с готовыми фавикон:
  1. Iconj — На мой взгляд самая большая в интернете база с favicon изображениями.
  2. Favicon.cc — Еще один не плохой сайт с солидной базой фавикон, где вы так же можете создать свой online.
  3. audit4web — Русская база favicon (фавикон) иконок…

Если поискать в интернете вы найдете еще не малое количество готовых решений фавикон для вашего сайта, так что дерзайте…

Создать Favicon онлайн:

Создать favicon онлайнТеперь самое интересное, для того, что бы самостоятельно создать favicon online, мы с вами должны перейти на сайт Favicon.ru Вы так же можете создать онлайн и на сайте Favicon.cc, который я описывал ранее, по функционалу он очень похож, но мне нравится наш сайт…

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

Еще в красной рамочке я указал список возможностей, вы можете перемещать нужные объекты в изображении, пользоваться заливкой, захватом цвета и так далее… Функционал понятен на интуитивном уровне, что бы скачать, необходимо нажать на соответствующую кнопку — Скачать Favicon.

Создать Favicon onlineТеперь все что нам осталось — это добавить фавикон на сайт. Дело это такое же легкое, для этого вам в вашу коренную папку блога с названием favicon.icoс помощью программы FileZilla. Если есть, то нужно заменить старый файл, что бы ваша картинка начала отображаться в браузере.

Как добавить Favicon на сайтЕсли после этого изображение не отображается, то необходимо в фале header.php добавить код между тегами <head> и </head>. После чего сохранить и проверить. В коде вам нужно изменить адрес к картинке, то есть приписать адрес своего сайта:

<link rel="shortcut icon" href="http://адрес_сайта/favicon.ico"; type="image/x-icon" />

<link rel="icon" href="http://адрес_сайта/favicon.ico"; type="image/x-icon" />

Будьте внимательны, во многих современных темах, фавикон можно добавить в настройках темы, то есть шаблон (Как выбрать шаблон?) автоматически устанавливает загруженную вами тему, у меня например так smileНа этом все дорогие друзья, надеюсь урок вам понравился, дальше будет еще интереснее. Подписывайтесь на меня в Twitter, что бы постоянно следить за новыми статьями smile До встречи, жду ваших комментариев, ваш Альберт и WpMen… 😉Чуть не забыл, сегодня в сети нашел клон WpMen. Недавно созданный сайт, тематика сайта — схожа на мою, давайте вместе наблюдать как он будет развиваться 😉Нашелся сайт - клон WpMen

wpmen.ru

Как сделать фавикон онлайн — ico генератор.

Здравствуйте. В этой статье я расскажу: что же такое фавикон и для чего он нужен, а также как работать с favicon генератором.

План нашей статьи:

Собственно три небольших пункта, которые мы и разберем.

Что такое фавикон.

Фавикон — (на английском Favicon) иконка показывающаяся на закладках вашего сайта, раньше этим словом называли закладки в браузере internet explorer.

Вот так выглядят закладки с иконками в браузере Google Chrome:

фавикон генератор

С помощью иконки можно повысить узнаваемость вашего проекта (иконку википедии все помнят?). Но ради одной лишь узнаваемости многие не станут создавать favicon. Для чего же нужно сделать фавикон.

Дело в том, что некоторые поисковые системы отображают иконку в результатах поиска. Например:

favicon генератор

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

Где создать фавикон онлайн.

Создать фавикон онлайн можно на следующих сайтах:

  • favicon.ru
  • favicon.cc
  • cy-pr.com
  • genfavicon.com
  • tools.dynamicdrive.com
  • favicon-generator.org
  • faviconfactory.com

Я буду работать на примере favicon.ru. Основные моменты, которые нам необходимы знать:

  1. Размер изображения 16*16 пикселей для браузеров и поисковой системы Яндекс.
  2. Размер изображения 57*57 пикселей для мобильных устройств — iPhone.

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

Работаем с favicon генератором.

Захожу на favicon.ru и вижу 2 возможности:

  1. Нарисовать с помощью кисточки (я не художник мне не подойдет).
  2. Создать фавикон онлайн с помощью изображения.

Порядок действий:

1. Нажимаю на кнопочку “выберите файл”, выбираем файл и переходим к созданию нашей иконки.

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

2. Незабываем выбрать границы (их не расписываю, главное чтобы смысл картинки остался, а размер уменьшился).фавикон онлайн

Выбрав границы щелкаем кнопку “Далее” и картинка сама уменьшиться до 16*16.

3. Вам остается просто нажать кнопку скачать favicon и следовать инструкциям (вам должна прийти ссылка на ваш email с готовой фавикон иконкой). Не пугайтесь как увидите свою картинку большими точкам, это так и должно быть ведь картинка 16*16 точек.

В итоге мой favicon выглядит так: создать фавикон онлайн

Правильный вывод иконки на сайте (блоге).

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

1. С помощью FTP клиента положить вашу иконку в главный каталог сайта (блога). Например для меня это — webbomj.ru/favicon.ico

2. Просто зайти в административную панель на сайт и пройти в меню Темы => Редактор. И под тегом <head> в файле header.php (заголовок или шапка у всех по разному) и прописать следующие строчки:

<link rel="shortcut icon" href="http://путь_до_вашей_иконки/favicon.ico" type="image/x-icon" ><link rel="icon" href="http://путь_до_вашей_иконки/favicon.ico" type="image/x-icon">

Для Айфонов на понадобиться прописать еще ниже строку:

<link rel="apple-touch-icon" href="http:// путь до иконки/apple-touch-favicon.png">

[warning]Внимание для Айфонов нужно иметь иконку размером 57*57. Также не забудьте поменять в коде путь_до_вашей_иконки, на вашу ссылку где лежит сама иконка.[/warning]

Готовая иконка.

Для того, чтобы не работать с favicon генератором (для тех кто не хочет сделать фавикон онлайн) советую посмотреть следующие сервисы, на которых можно найти готовые, а главное достойные решения:

  • audit4web.ru/info/favicon/
  • favicon.co.uk/gallery.php
  • iconj.com/gallery.php

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

Для покупки дипломов Педагога есть этот сайт www.original-diplom.net.

Посмотрите похожие посты:

webbomj.ru

Favicon генератор. Создание фавиконки (favicon.ico) онлайн

Favicon (сокр. от англ. FAVorites ICON — "значок для избранного", от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в вкладках и в других элементах интерфейса.

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

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

Большинство версий основных браузеров поддерживают фавиконки. Например Internet Explorer 5/6/7+, Firefox 1/2 +, Mozilla 1/2+, Netscape 7+, Opera 7+, Avant 1.1, Konqueror 3 +, Safari и другие.

Исходное изображение (Максимальный размер: 150 Кб):

Favicon – лицо вашего ресурса в браузере

Очень часто, открывая сайт в браузере, пользователи видят небольшой значок рядом с URL ресурса - favicon (фавикон, фавинконка), который, по сути, является лицом интернет-проекта. Favicon – это сокращение от английского словосочетания "favorites ICON", обозначающего "значок для избранного". Если вы "укомплектовали" свой ресурс фавиконкой, то он сможет выгодно выделиться на фоне остальных сайтов, открытых пользователем во вкладках браузера. Очень часто фавикон является уменьшенной копией логотипа интернет-проекта или компании (например, как у Википедии, Google или Facebook), но можно увидеть и специально созданные значки, просто отображающие суть или тематику проекта. Первый значок favicon появился в 1999 году, когда поисковая корпорация Microsoft представила свой веб-обозреватель Internet Explorer 5: именно в этой версии браузера началась поддержка миниатюрных значков для сайтов. А в 2003 году формат favicon был официально зарегистрирован в Internet Assigned Numbers Authority (IANA). Сейчас Microsoft утратила монополию в этой нише, и все современные браузеры (как десктопные, так и мобильные) поддерживают фавиконки. Для чего предназначен инструмент "Генератор Favicon"? С помощью инструмента "Генератор Favicon" вы сможете создать уникальную фавиконку для своего сайта. Для этого необходимо лишь загрузить в специальном поле исходное изображение, размер которого не должен превышать 150 Кб, выбрать необходимый размер будущей иконки (16х16 или 32х32 пикселей) и нажать кнопку "Конвертировать". Полученный значок в формате ICO можно использовать для размещения в Сети: он будет совместим с большинством современных браузеров. Примите к сведению, что многие современные веб-обозреватели осуществляют автоматическую загрузку favicon.ico из корня ресурса, не требуя указания в кодах страниц. Однако, если веб-мастер хочет использовать отдельный фавикон для каждой страницы сайта, то он должен указать его положение внутри секции в HTML-коде ресурса. Также учтите, что значок не отобразится в браузере, если его Content-type в ответе веб-сервера не совпадет с указанным полем заголовка в коде страницы. Как должен выглядеть хороший фавикон? Несмотря на то, что размер фавикона очень мал (16х16 или 32х32 пикселей), этот значок несет в себе очень большую смысловую нагрузку, и его создание является достаточно сложным процессом, который занимает у веб-дизайнеров столько же времени, сколько и разработка полноценного логотипа. Очень часто бывает так, что логотип компании абсолютно не подходит на роль фавикона. В таком случае, вам придется пустить в ход все свое мастерство и фантазию. Будущий favicon должен врезаться в память пользователя так сильно, чтобы в будущем этот значок ассоциировался у него исключительно с вашим ресурсом. При создании фавикона у вас не будет возможности "разбрасываться" пикселями: каждый из 256 (или 1024) пикселей имеет значение. Подкорректируйте заранее вручную пиксели, которые имеют "туманный" цвет, потому как при сжатии рисунка значок может получиться размытым и потребует корректировки в графическом редакторе. Учтите, что фоторедактор Adobe Photoshop не сохраняет изображения в формате ICO, поэтому конвертировать изображение в этот формат вы сможете с помощью нашего сервиса "Генератор Favicon".

www.cy-pr.com

Сделать фавикон для сайта онлайн

Сделать фавикон для сайта можно с помощью генераторов

сделать фавикон для сайта 1

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

Как сделать фавикон сервис Favicon.cc

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

Когда вы перейдете на этот сайт favicon.cc, вы увидите следующее окно:

сделать фавикон для сайта, Favicon.cc

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

сделать фавикон для сайта, Favicon.cc 1

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

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

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

Для скачивания готового фавикона, жмем по клавише «Скачать Фавикон».

Генератор favicon.ico

Данный генератор фавиконок русскоязычный, но он менее функционален, относительно предыдущего. Вначале пройдите по ссылочке:

http://www.michurin.net/online-tools/favicon-editor.html

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

сделать фавикон для сайта, Faviconico

Сделать Фавикон для сайта с помощью сервиса Favicon-Generator.org

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

Favicon-Generator.org

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

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

 

 

Favicon.ru

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

Favicon.ru

Добавить картинку на сайт можно двумя методами:

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

После загрузки вашего файла вам придется кликнуть по кнопке «Сделать favicon из изображения!», далее просто подождите немного времени. Затем скачайте полученное изображение на свой ПК.

Favicon.cc

Данный генератор фавиконок не только мощнее, но и сложнее. Вначале зайдите на его главную страницу, потом кликните по кнопке «Image File», расположенной слева страницы.

Затем жмем по кнопке «Импорт изображений» и загружаем наше изображение. Из этой картинки мы постараемся сделать фавикон для сайта. Далее выберете, что сделать с картинкой после ее уменьшения: при выборе Keep dimensions мы оставим пропорции изображения неизменным, если мы выберем Shrink to square icon, то приведем картинку в квадратный вид. В этом случае изображение может выглядеть искаженно.

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

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

На сайте ваш фавикон будет находиться по адресу http://название вашего домена/favicon.ico.

ПЕРВОЕ. Можно загрузить фавикон на сайт довольно быстро, для этого я использую программу FileZilla. Фавикон находится в папке uploads. Этот файл найдем по адресу /public_html/wp-content/uploads/год/месяц/название фавикона.ico. (На вашем хостинге он может находиться немного в другом месте).  Для этих целей включите данную программу, соединитесь с сервером и просто перекиньте фавикон в папку uploads.

ВТОРОЕ. Добавим favicon в главную папочку сайта. Для этого на хостинге поместим в папочку с блогом файлик, который назовем favicon.ico. Не забудьте, favicon должен быть 16 на 16 пикс.

ТРЕТЬЕ. Внутри сайта заходим в настройки вашей темы, там может быть меню «General», заходим в него, выбираем раздел «Иконка сайта», жмем по кнопке «Upload Now», загружаем его с ПК. При данной загрузке не забудьте, что он должен иметь расширение .ico. Но такой раздел есть не на всякой теме.

Также можно загрузить фавикон при помощи строки html-кода, но мы этот метод рассматривать сейчас не будем.

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

Теперь я думаю вам не составит труда сделать фавикон для сайта.

Успехов! Андрей Зимин                 13.03.2014г.

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

а160

 

 

info-kibersant.ru

Редактор favicon.ico онлайн

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

Но кроме этого редактора на сайте теперь имеется онлайн конвертер, который позволяет преобразовать один или более PNG в ICO.

Если вы видите этот текст, значит что-то пошло не так. Возможно у вас отключён JavaScript.

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

Загрузка иконок и файлов

В мае 2014 года запущена новая функция (о которой многие и давно просили) — загрузка изображений из файла. Расскажу о специфике.

От браузера требуется поддержка двух достаточно современных технологий — HTML5 convas и file API. То есть, вам понадобится Internet Explorer не ниже версии 10, или Firefox 28 и выше, или Google Crome 31 и выше. Подойдёт последние версии Safari и других браузеров.

Формат картинки в файле любой, поддерживаемый вашим браузером. Все браузеры поддерживают JPEG, PNG и GIF. Многие браузеры поддерживают и другие форматы.

Размер картинки может быть любым в пределах разумного. Картинка будет уменьшена до 16x16.

Цветность будет уменьшена до 16 цветов. Редактор пытается построить адаптивную палитру, но алгоритм пока далёк от совершенства. Я бы рекомендовал сперва подготовить картинку в полноценном редакторе.

Прозрачность преобразуется к однобитной по границе 50%.

Буду рад любым отзывам и либо уберу эту функцию, если она никому не нужна, либо доработаю, если обнаружатся какие-то ошибки. Спасибо.

favicon — это небольшая картинка, являющаяся логотипом сайта. Она появляется в шапках вкладок, в адресной строке (кроме новейших версий Chrome и Firefox †), в закладках.

В одном файле favicon.ico может быть несколько изображений разного размера. Чаще всего используется изображение 16x16. Бо́льшие размеры используются, например, в Windows, при создании закладки прямо на рабочем столе. В этом случае размер зависит от версии операционной системы и настроек рабочего стола.

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

Проще всего просто положить иконку в корень сайта. Она должна стать доступна по адресу http://ваш_домен/favicon.ico. Именно тут её будут искать браузеры.

Обратите внимание, что браузеры не сразу обнаруживают, что у сайта появилась/изменилась иконка. Возможно, чтобы увидеть новую иконку вам придётся почистить кэш.

Вы так же можете явно указать браузерам, что у вас есть favicon.

Для этого надо включить в секцию <head> код такого вида:

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

Что касается type, тут есть неоднозначность. Стандартным типом является image/x-icon. Я бы советовал использовать его. Однако, особо древние версии IE предпочитают тип image/vnd.microsoft.icon. Подозреваю, что все современные браузеры поддерживают этот тип, но кто знает. Каждые пару месяцев появляется новый современный браузер и поручиться за все современные браузеры я не могу.

Возможно вас так же заинтересует конвертер PNG в ICO и онлайн генератор обоев, фонов и заливок.

Отправить

www.michurin.net