Нарисовать favicon online – Бесплатный онлайн-генератор файлов favicon.ico (фавикон) на Favicon.by

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

пошаговая инструкция от А до Я

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

Для тех, кто не знает, что такое фавикон, дадим небольшую справку, которая позволит войти в курс дела. Фавикон – это небольшая иконка размером 16х16 или 32х32 пикселей, содержащая, как правило, логотип, первую букву бренда или характерное изображение, отражающее тип бизнеса или тематику сайта.

Почему фавикон важен?

Фавикон выполняет следующие функции:

— Брендинг.

— Идентификация сайта пользователем (удобство использования).

— Придает сайту профессиональный вид.

Остановимся более детально на основных преимуществах использования фавикон.

Узнаваемость бренда

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

Доверие

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

Повторные посещения

Известно, что люди лучше реагируют на изображение, чем на текст. Теперь предположим, что посетитель вашего сайта торопился, когда впервые посетил его, и решил добавить его в закладки, чтобы вернуться позже. Допустим, этот человек впоследствии решает снова посетить ваш сайт, для чего обращается к своим закладкам. Вам повезло, если у вас есть узнаваемый фавикон, такой, как заметная и уникальная буква G у Google и пользователь найдёт вас. Если фавикона нет, вас могут даже удалить из списка закладок.

Экономит время пользователя

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

Преимущества для SEO

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

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

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

Для этого следуйте пошаговой инструкции:

Шаг 1. Зайдите на Logaster и нажмите «Создать фавикон»

Шаг 2. Создайте логотип

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

Шаг 3. Введите название вашего сайта (или компании), выберите тип бизнеса

Шаг 4. Выберите понравившийся логотип

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

Как выбрать правильный дизайн?

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

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

Шаг 5. Создайте фавикон

Теперь, когда у вас есть логотип, нажмите «Создать фавикон с этим логотипом» на странице логотипа.

Шаг 6. Выберите необходимый дизайн фавикона

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

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

Найти вдохновения для фавиконки можно на сайтах:

The Favicon Gallery

Delta Tango Bravo

Fresh Favicons

Шаг 7. Скачайте фавикон

Вы можете приобрести фавикон отдельно, по цене 9.99$ или купить Дизайн-пакет, который включает в себя не только фавикон, но и логотип, визитную карточку, конверт и фирменный бланк. Как купить Дизайн-пакет, вы можете узнать здесь.

После оплаты вы можете скачать фавикон в форматах ico и png.

Где я могу использовать фавикон?

Вы можете использовать фавикон:

— на сайте;

— мобильных устройствах. Пользователь может добавить фавикон на домашний экран своего устройства (нечто вроде закладки) — Android, IOS, Windows Phone и т.п;

— программах и приложениях для РC/Mac.

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

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

Шаг 1.Вам необходимо загрузить файл favicon.ico на сервер. Чтобы это сделать, вам нужно скачать и установить ftp клиент, например, FileZilla. Затем ввести логин и пароль и загрузить файл. Более подробную инструкцию как загрузить файл фавикона вы можете прочитать здесь.

Шаг 2.Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам находить изображение вашего фавикона. При открытом окне FTP, найдите и скачайте с сервера файл index.html или header.php.

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

Откройте файл index.html в текстовом редакторе — Блокнот, Notepad++, Sublime Text.

Если ваш сайт содержит чистый HTML, вставьте специальный код в область HEAD файла index.html.

Код можно скопировать на странице фавикона на сайте Logaster.

Если вы используете WordPress, вставьте приведенный ниже код в область HEAD файла header.php.

Сделав это, загрузите файл обратно туда, где вы его взяли. Готово! Перезагрузите страницу вашего сайта, чтобы увидеть фавикон.

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

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

spark.ru

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

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

Содержание:

1. Что такое фавикон?
2. Зачем сайту фавикон?
3. Как нарисовать иконку самостоятельно?
4. Как сделать favicon.ico из картинки?
5. Как установить фавикон на сайт?
6. Как сделать иконку запоминающейся?

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

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

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

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

Удивительно, но такие иконки имеют не все сайты, а среди тех, у которых они есть, большинство значков стандартные, вшитые в какую либо общедоступную систему управления сайтом, типа WordPress, или в тему оформления. На картинке видно, что владелец сайт на 17 позиции поленился создать favicon.

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

Зачем сайту фавикон?

У использования favicon для сайта есть много полезных преимуществ, но я бы выделил два:

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

Как нарисовать фавикон самостоятельно

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

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

Итак, создать картинку favicon.ico для сайта у нас получилось, ее нужно скачать.

Как сделать иконку из картинки?

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

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

Перейдите на iconizer.net и в строчку для поиска введите ключевое слово или фразу, которая характеризует или описывает тематику вашего блога. Например, WordPress или продвижение, раскрутка, заработок. Только, вводимое вами ключевое слово, должно быть написано английском языке. Если возникнут проблемы с переводом, то воспользуйтесь переводчиком Яндекс или Google. После ввода нажмите кнопку «Search».

Результаты будут выглядеть следующим образом:

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

Советую сделать настройки с точно такими же параметрами, которые показаны на изображении, чтобы избежать лишних проблем. И уже после этого нажать на «Generate Icon» и далее «Download».

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

Полученный файл favicon.ico нужно поместить в корневой каталог вашего сайта.

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

В моем браузере Хром фавикон подопытного сайта www.tb1000tur.ru, появился сразу, а вот в “Мозиле” пришлось подождать. Ч

biznessystem.ru

Онлайн инструмент рисования и создания Favicon — katvin.com

Онлайн инструмент для создания Favicon

Возможности

1. Прорисовка Favicon в онлайн режиме без перезагрузки страницы
2. Палитра из любых цветов на выбор в возможностью указания HEX цветов и выбор цвета с помощью ползунков
3. Инструменты:
   • Кисть — закрашивает 1px при одинарном нажатии курсора или точечном нажатии пальцем на мобильных девайсах
   • Стерка — стирает 1px, работает также как и кисть
   • Заливка — закрашивает всю часть иконки либо выделенную область favicon
   • Пипетка — определяет цвет который использовался ранее
   • Сетка — отображает сетку из пикселей (256 пикселей)
   • Фон — позволяет переключать фон из белого в сетчатый и обратно.

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

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

Примеры рисования Favicon нашим инструментом

Ниже опубликованы некоторые примеры рисования иконки Favicon с помощью нашего инструмента. На изображениях показана область рисования Favicon и непосредственно то как она выглядит в вкладке браузера.

На создания каждой иконки опубликованной выше, ушло от 1 до 5 минут. Данные изображения создавались и показаны только для примера. При тщательном подходе к рисованию Favicon нашим инструментом, можно достичь более лучших результатов.

Рейтинг: 0 Голосов: 0

katvin.com

Создаем и устанавливаем красивый фавикон (favicon) для сайта

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

Favorite Icon (“значок для избранного”) – именно так расшифровывается favicon.ico. Он был придуман еще в прошлом веке. В марте 1999 года, браузер “Internet Explorer 5” стал первым поддерживать эти значки. По сравнению с 99 годом, интернет-технологии ушли далеко вперед, а иконка осталась и используется по сей день. Конечно, за 16 лет она претерпевала ряд усовершенствований, о некоторых из них мы сегодня поговорим. Также расскажу о том, как можно нарисовать собственную иконку или сгенерировать ее из графического файла. Не обойду вниманием и сайты, где можно выбрать и скачать красивый favicon для своего сайта.

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

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

В самом начале, иконка имела расширение ICO, но сегодня этим дело не ограничивается, и можно встретить ее в таких форматах, как GIF, JPEG и PNG. Эти форматы поддерживаются и всеми современными интернет-браузерами, за исключением только поддержки JPEG в Internet Explorer.

Есть два основных способа создания иконки. Первый – ручная прорисовка favicon на специализированных онлайн-сервисах или при помощи графических редакторов типа Photoshop. Второй – работа уже с готовыми иконками или изображениями. Рассмотрим оба варианта, и пойдем по порядку…

Онлайн-сервисы для создания фавикон

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

Как правило, эти сервисы позволяют не только рисовать, но и конвертировать графический файл в стандарт ICO. Таких сервисов существует несколько, вот только некоторые из них:

1. Favicon.ru – русскоязычный сервис, скриншот из которого вы видите чуть выше. Позволяет как рисовать, так и конвертировать из других форматов в формат ICO.
2. Favicon.cc – англоязычный сервис, с аналогичными возможностями, но поддерживающий создание анимированных иконок.
3. Favicon.by – русскоязычный сервис (судя по домену белорусский). Функционал, также аналогичен предыдущим. Анимация не поддерживается, но есть возможность указав адрес сайта, «утащить» с него иконку для последующей переделки в редакторе.

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

Использование готовых иконок для сайта

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

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

1. IconSearch.ru – русскоязычный сервис, с приличным набором иконок. Размеры иконок от 16х16 до 128х128 пикселей. Есть возможность сохранения иконки в форматы ICO и PNG.
2. IconSeeker.com – аналогичный сервис, только англоязычный. Больших отличий нет, за исключением того, что попадаются иконки размера 256х256.
3. IconFinder.com – это один из моих любимых поисковиков иконок. Там правда много платных иконок, но и среди бесплатных есть что выбрать. Помимо упомянутых уже ICO и PNG форматов, можно скачать в SVG, или даже в AI (векторная графика Adobe Illustration). Иконки размерностью до 512х512 пикселей.

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

Прозрачность и размер иконки

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

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

Фавикон может быть использован и больше чем 16х16 пикселей. Например, размер моего favicon.ico составляет 256х256 пикселей. На компьютере или ноутбуке вы, конечно, вряд ли заметите разницу, т.к. она масштабируется автоматом. А вот в мобильных браузерах (на вашем смартфоне или планшете), большие и маленькие иконки могут отображаться о разному.

Так в мобильном Google Chrome, вместо иконки 16х16, можно увидеть цветной квадрат с первой буквой из названия сайта по середине. Другие браузеры могут растягивать маленькую иконку, что выглядит визуально не очень красиво. Доля мобильного трафика сегодня высока, и может достигать 20-25%. И с каждым годом только растет, поэтому, подумать о нем на будущее будет не лишним.

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

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

Если стандартной иконку и вас нет, и в админке она тоже не меняется, то необходимо прописать небольшие строчки в HTML код вашего сайта. Их нужно размещать между тегов <head> и </head>. У разных CMS структура шаблонов разная, поэтому, иногда приходится поискать в каком файле шаблона есть эти теги. У WordPress, например, этот файл называется «header.php», а у OpenCart – «header.tpl».

Если у вас иконка в формате ICO, то нужно вставить следующий код:

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

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

Данная запись справедлива, если фавикон находится в корне сайта. Если он имеет иной путь, то перед «/favicon.ico», нужно записать путь к файлу. Например, такой: «http://мой-сайт.ru/моя-папка/favicon.ico».

Код для иконки в формате GIF:

<link rel=»icon» href=»/favicon.gif» type=»image/gif»> <link rel=»shortcut icon» href=»/favicon.gif» type=» image/gif»>

<link rel=»icon» href=»/favicon.gif» type=»image/gif»> <link rel=»shortcut icon» href=»/favicon.gif» type=» image/gif»>

Код для иконки в формате PNG:

<link rel=»icon» href=»/favicon.png» type=»image/png»> <link rel=»shortcut icon» href=»/favicon.png» type=» image/png»>

<link rel=»icon» href=»/favicon.png» type=»image/png»> <link rel=»shortcut icon» href=»/favicon.png» type=» image/png»>

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

sa1nikov.ru

Создаем фавикон онлайн: favicon для сайта

Здравствуйте друзья! Создаем фавикон онлайн и с помощью кода установим его на сайт, смотрите сами, это делается легко и просто.

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

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

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

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

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

Изображение фавикона бывает и большего размера, например, 24х24; 32х32 и больше, но в основном используется 16х16, формат изображения «ico», хотя применяются и другие форматы.

Для установки фавикона на сайт можно использовать несколько вариантов:

• установка с админпанели Вашего сайта;
• установка в корневую папку сайта с помощью кода;
• установка на сайт с помощью плагина Favicons.

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

Работа по установке плагина и создание фавикон онлайн занимает считанные минуты. Как установить фавикон на сайт с помощью плагина мы подробно рассмотрели в одной из моих статей «Установка фавикона на сайт«.

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

Год назад я сам устанавливал фавикон на свой сайт с помощью плагина, но по мере развития блога, нужно было снижать нагрузку, уменьшать время открытия блога. Кстати, если Вам надо измерить время открытия блога, можете посмотреть эти статьи «Тест скорости загрузки сайта«, и «Ускорение загрузки сайта«, там есть подробная инструкция.

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

Итак, в данной статье мы рассмотрим два вопроса:

• как просто создать уникальный фавикон онлайн для сайта, создаем фавикон онлайн;
• как установить изготовленный фавикон на сайте без плагина с помощью кода?

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

В данной статье мы научимся создавать фавикон (Favicon) с помощью бесплатного онлайн генератора фавиконов для сайтов. Генераторов по созданию фавиконов в Интернете много. Могу порекомендовать зайти по адресу http://favicon.ru  и http://favicon-generator.org/, мне понравились оба сервиса, другие сервисы не пробовал.

Итак, заходим по второму адресу и попадаем на страницу сервиса (смотрите скрин 1).

Скрин 1

Если Вы хотите использовать готовое изображение, которое у Вас есть в папке компьютера, то делаете следующее. Нажимаете кнопку «Обзор», выбираете нужное изображение, фотографию и нажимаете кнопку «Создать Favicon» (на английском «Create Favicon»). В левом верхнем углу сгенерирован Ваш фавикон (смотрите скрин 2).

Скрин 2

Исходное изображение можно загружать в формате gif, jpeg, png – на выходе получите формат ico. Дело в том, что не все браузеры поддерживают форматы gif, jpeg, png, поэтому и делается универсальный формат ico для всех браузеров.

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

При желании, можем зайти в галерею и выбрать там готовый фавикон. Для изготовления уникального изображения заходим в раздел «Редактор» (Editor). В новом окне слева мы видим поле с квадратиками – здесь будем рисовать изображение (смотрите скрин 3),

Скрин 3

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

Ниже находятся инструменты – карандаш для рисования, пипетка, ластик и редактор, которые позволяют нарисовать фавикон.

После выбора цвета, выбираем режим рисования «Draw» и приступаем к закрашиванию полей. Хоть это и шаблон, работа все равно носит творческий характер. Советую рисунок в поле делать максимально большим, иначе при уменьшении детали рисунка будут мало заметны. Конечно, здесь надо поэкспериментировать, как с размерами, так и с цветом.

Не стоит обращать внимание на то, что получаются ступенчатые неровности – программа их устранит. После проверки, редактирования и исправления сохраняем полученное изображение, нажатием кнопки «Create Favicon» (Создать фавикон). В левом верхнем углу появился созданный нами фавикон (смотрите скрин 2), сохраняем его в папку на компьютер. Как видите, изображение создается просто и быстро.

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

• полученный ранее рисунок (фавикон) закачать в корневую папку сайта;
• в коде html «Заголовок» (header php) приписать код ссылки, которая показывает, где лежит картинка.

Рассмотрим размещение изображения для сайта, сделанном на движке WordPress. Картинку можно загрузить либо напрямую в папку с хостинга, либо с помощью FTP клиента.

Рассмотрим прямую загрузку. Через хостинг заходим в «Файловый менеджер» (хостинг TimeWeb), выбираем наш сайт, открываем папку public_html, выбираем папку wp-content, открываем папку themes (темы), выбираем тему, установленную на сайте.

В моем случае это zeestyle, тоже открываем ее и открываем папку «images» (рисунки). Теперь в эту папку закачиваем наш ранее изготовленный рисунок. Можно определить и другую директорию для закачки, важно правильно потом прописать путь в коде. Как закачивать картинку, здесь рассматривать не будем, сложного там ничего нет. Если возникнут у новичков трудности, обращайтесь.

Теперь переходим ко второму действию – размещаем ссылку на нашу картинку в коде html «Заголовка» (header php). Для этого идём в админпанель сайта, «Внешний вид», «Редактор», «Заголовок» (header php). Находим закрывающий тег </head> и перед ним вставляем код (скрин 4):

 <link rel="shortcut icon" type="image/ico" href="http://biz-iskun.ru/wp-content/themes/zeestyle/images/favicon.ico"/>

Скрин 4

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

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

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

С уважением, Иван Кунпан.

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

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


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

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

Вы можете почитать:

biz-iskun.ru

Как сделать favicon собственными руками?

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

Как изготовить фавикон? Процесс условно можно разделить на 2 этапа:

1. Изготовление фавикона или нахождение уже готового;
2. Установка его на сайт.

К первой задаче, как было обозначено, может быть несколько подходов. Если вы по каким-то причинам вы не хотите изготавливать favicon сами, вам лень, нет времени или не умеете, а пробовать и эксперементировать желания нет, его можно найти на одном из сайтов-библиотек готовых фавиконов. Главный недостаток этого варианта — вряд-ли ваша иконка окажется оригинальной. Скорее всего она уже используется на десятках, а то и сотнях или тысячах сайтов. Поэтому, в данном случае, актуальным вопрос: «Нужен ли такой фавикон вообще?». По мне, так этот элемент обязательно должен быть уникальным, даже если он прост как «3 копейки».

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

Графические редакторы

Начать изготовление фавикона можно в десктопной программе или с помощью специально сервиса. В первом случае необязательно прибегать к помощи десктопного приложения (например, Photoshop), можно воспользоваться бесплатным онлайн растровым графическим редактором. Все что вам нужно — создать документ 16х16 пикселей и что-нибудь на этом «холсте» изобразить. Залить фон, попробовать что-то нарисовать «карандашом» или поставить какой-нибудь символ или букву.

На скриншоте пример «шедевра», который я начал изображать с помощью сервиса Pixlr:

Результат можно сохранить в формате «.gif» или «.png».

Онлайн сервис Favicon.cc

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

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

Онлайн генераторы фавиконки

Еще один вариант решения задачи — веб-сервисы, которые в автоматическом режиме генерируют картинку. Например проект Логастер.

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

Установка favicon

Какой бы из вариантов вы бы не выбрали, создание фавикона дело не очень сложное и интересное. Установка так же проблем не доставит. После того как вы сохраните готовую иконку на компьютере, ее можно будет конвертировать в формат «.ico», или использовать файлы «.gif» или «.png». Принципиальной разницы не будет, практически любой вариант при желании в последующем можно будет анимировать. Остается последнее — залить фавикон в «корень» сайта (с именем favicon) и добавить фрагмент кода в head секцию:

<link rel="shortcut icon" href="Путь_к_иконке/favicon.ico" type="image/ico" /> <link rel="icon" href="Путь_к_иконке/favicon.ico" type="image/x-icon" />

<link rel=»shortcut icon» href=»Путь_к_иконке/favicon.ico» type=»image/ico» /> <link rel=»icon» href=»Путь_к_иконке/favicon.ico» type=»image/x-icon» />

(Если у вас фавикон формата отличного от «.ico», нужно указать нужный тип файла)

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

P.S. Постовой. Читаем и смотрим про Web-дизайн в стиле ретро — интересная статья!
Важный шаг в раскрутке это поисковая оптимизация сайта или блога.
Полезный онлайн журнал handmade — все, что сделано своими руками.

design-mania.ru