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

Содержание

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

Всем привет!

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

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

Что такое фавикон и почему он важен для СЕО

Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

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

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

Подведем небольшие итоги:

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

Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.

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

Где скачать готовый вариант

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

Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.

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

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

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

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

Онлайн-сервисы

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

Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.

Как видите, здесь все интуитивно понятно. Выбираем карандаш, настраиваем цвет и рисуем. Если вашему логотипу нужна какая-то основа, то вы можете воспользоваться “Импортом из файла” и “Импортом с сайта”.

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

Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера.

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

Adobe Photoshop

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

Итак, у нас есть два варианта:

  1. Сделать фавикон из картинки (логотипа компании или других).
  2. Просто выбрать шрифт и сделать его в виде буквы.

Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.

Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.

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

Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.

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

Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.

Фон как на скриншоте показывает, что я выбрал вариант “прозрачный” на первом этапе создания картинки.

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

Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.

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

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

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

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

Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.

При установке через плагины или тему можно использовать любое название и формат. Однако в случае с корневым каталогом файл должен иметь название favicon и формат – ICO.

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

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

Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.

С помощью корневого каталога

Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

Важно: размер должен быть 16 x 16 или 32 x 32. Название favicon, а расширение *.ico.

Теперь мы должны загрузить этот файлик в корень нашего сайта. Можно сделать это при помощи FTP-клиента или файлового менеджера.

Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:

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

Для этого идем во “Внешний вид” – “Редактор”, находим в боковой панели нужный файл и кликаем для редактирования. Код мы должны вставить внутри тега <head>.

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

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

Через тему WordPress

Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.

Плагины

Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.

Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.

Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple. В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант. Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

Заключение

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

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

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

iklife.ru

Как создать фавикон для сайта. Пошаговая инструкция от А до Я | Блог о создании лого и дизайне

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

Идеальный пример — фавикон сайта. Знаете ли вы, что такое фавикон? Эффективно ли вы его используете?

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

Для тех, кто не знает, что такое фавикон, дадим небольшую справку, которая позволит войти в курс дела. Фавикон – это небольшая иконка размером 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 и сохранен в корневом каталоге вашего сайта.

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

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

Статьи по теме:

www.logaster.ru

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

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

Для тех, кто не знает, что такое фавикон, дадим небольшую справку, которая позволит войти в курс дела. Фавикон – это небольшая иконка размером 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 для сайта

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

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

В блогосфере принято считать, что фавикон (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-летний опыт создания и ведения блога в виде интеллект карты. По ней Вы сможете проверить правильно Вы создавали блог или нет, и при необходимости исправить ошибки. Скачать интеллект карту можно с блога. Статьи тоже сильно влияют на продвижение блога. О том, как правильно писать и оптимизировать статьи написано в моей бесплатной книге «Как написать статью для блога», её можно скачать.

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

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

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

biz-iskun.ru

Как сделать фавикон (favicon.ico) для сайта

Здравствуйте, дорогие друзья! Сегодня я бы хотел очень серьезно затронуть тему, важную для любого веб-мастера, владельца своего ресурса или ресурсов и прочих специалистов, считающих интернет своим вторым домом. Все мы так или иначе стараемся увеличить количество посетителей своего сайта или сайтов. Для этого мы используем множество весьма сложных инструментов и сервисов, но есть также и мелкие детали, которые, порой, просто забываются в общей толчее. Одним из таких элементов является фавикон для сайта.

Что же это за птица такая и зачем он нам нужен? Начнем, пожалуй, с простого определения данного понятия.

Итак, Favicon представляет собой некоторую аббревиатуру, сокращение от английских слов “Favorite” и “Icon”. На русский это можно перевести, как «значок для избранного», значок для веб-страницы или сайта целиком.

Отображается эта картинка размером 16х16 пикселей рядом с адресом сайта или его именем в закладках и прочих блоках интерфейса. Вот вам примеры различных фавиконок.

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

Значение фавиконки для сайта

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

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

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

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

Вот вам пример запроса и списка сайтов к нему подобранного.

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

1)    «Найдите» свой сайт с помощью поисковика Яндекс. Если изображение уже загружено, то оно будет видно.

2)    Попробуйте вставить в адресную строку своего браузера http://favicon.yandex.net/favicon/site.ru, где site.ru будет названием вашего ресурса.

3)    Если пользуетесь инструментом Яндекс.Вебмастер, то сможете проверить состояние своих фавиконок с его помощью (они отображаются рядом с сайтами).

Генератор favicon онлайн и коллекции готовых значков

Думаю, всем очевидно, что этот «маленький» вопросик как-то надо решать. Я предлагаю вам несколько вариантов, точнее два с половиной.

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

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

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

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

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

Коллекции готовых значков

Где же можно подобрать более-менее приличный элемент, который сможет украсить ваш ресурс, придав ему необходимые шарм и привлекательность?

TheFaviconGallery

Ссылка. Элементарный сайт, содержащий более 450 различных изображений. Среди них есть и весьма симпатичные, и уже известные. На мой взгляд, подбор иконки здесь имеет смысл для отдельных страниц сайта. Ну, к примеру, страница посвящена каким-нибудь пунктам быстрого питания, а фавикон для нее выглядит, как значок Макдональдс. В этом смысле подобный «плагиат» смотрится вполне уместно.

Audit4web.ru

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

Favicon.co.uk

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

Favicon.cc

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

Findicons.com

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

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

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

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

Она может иметь целую кучу расширений от ICO до JPEG. Размер, обычно, составляет 16 на 16 пикселей. Самый элементарный способ сделать такую картинку — это взять и нарисовать ее в любом графическом редакторе, хоть в том же Пейнте. Правда, такой вариант подходит лишь тем, кто имеет хотя бы какой-то минимальный талант и навыки в этом искусстве. В противном случае ничего хорошего не выйдет.

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

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

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

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

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

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

Antifavicon.com

Не надо бояться приставки «анти». Ресурс, как никакой другой, помогает создать достаточно оригинальный фавикон по той простой причине, что делается это здесь весьма интересным способом. Здесь можно сделать не какую-то картинку, а надпись на цветном фоне. Просто вводим нужные буквы и выбираем цвет. Как по мне, так вот этот способ можно назвать идеальным. Вспомните иконки ВКонтакте и Википедии. Все гениальное просто.

Amichurin.Appspot.com

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

Favicon.cc

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

что я тут нарисовал, сам ума не приложу

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

Favicon-Generator.org

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

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

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

Создание анимированных favicon

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

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

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

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

Как сделать favicon? Полезные советы

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

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

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

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

Ну и в-пятых, интернет-браузеров много и все они работают по-разному. К примеру, тот же IE 6 не показывает эти элементы, только если сайт будет добавлен в «избранное».

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

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

<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"/>

Добавление иконки на блог в WordPress

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

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

<link rel="icon" type="image/x-icon" href=" /favicon.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">

Если же нужной строки вы не найдете, то просто вставьте две указанные в блок между тегами «head» и «/head». Другими словами, действуем точно также.

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

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

Можно ли заработать на создании фавикон?

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

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

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

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

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

Ух… объемная же получилась статья. Надеюсь, и полезная. На этом у меня все. Пока-пока.

Загрузка...

Подпишитесь на обновления блога Life-Webmaster.ru и получайте в числе первых новые статьи про создание блога, раскрутку и заработок на нем!

life-webmaster.ru

Как создать и разместить фавикон на сайте.

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

В качестве фавикона используется картинка формата png или gif размером 16×16 пикселей (или 32×32 с 8 или 16-битной глубиной цвета).

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

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

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

Как должен выглядеть фавикон?

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

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

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

Существует несколько хороших сервисов по самостоятельному созданию фавиконки для сайта.

  • Favicons.com – генерирует фавиконку сайта из любого имеющегося изображения, однако желательно, чтобы она была квадратной.
  • ICO Format – специальный плагин для Photoshop, который  расширяет возможности редактора для работу с форматом ico.
  • В интернете можно найти массу галерей готовых фавиконок для сайтов. Среди них легко найти подходящую по тематике сайта. Однако велика вероятность, что такая пиктограмма вашего сайта не будет уникальной.

Как разместить фавикон на сайте?

Чтобы сделанный файл favicon.ico отображался в браузере, его необходимо поместить  в корневой каталог сайта.  В блоке <head>head>  достаточно вставить следующие строки (если их там нету):

 

 

favicon.ico” type=”image/x-icon”>

 

favicon.ico” type=”image/x-icon”>

 

Вернуться назад

Статьи по теме:

www.kasper.by

Как сделать favicon ico (фавикон) для сайта за 5 минут в фотошопе?

Здравствуйте, уважаемые друзья! Сегодня я напишу о том, как сделать фавикон для сайта или блога. Причем, я рассмотрю 2 способа создания фавикона. Вы узнаете, как сделать favicon ico в фотошопе и при помощи онлайн сервиса.

Перед тем, как перейти к прочтению этой статьи, я советую также ознакомиться с другими полезными постами, которые позволят улучшить ваш ресурс:  «Красивая страница 404 для сайта», «Как сказать спасибо за комментарий?», «Красивая подписка на комментарии в WordPress».

А теперь вернемся к теме поста. Если на сайте нет фавикона, то он теряет многое. Во-первых, фавикон способен увеличить посещаемость с Яндекса. Спросите как? Очень просто. Дело в том, что Яндекс рядом с заголовком Title показывает еще и фавикон сайта. И если заголовки и описания двоих ресурсов примерно одинаковые, но на одном будет фавикон, а на другом нет, то посетитель, скорее всего, перейдет на ресурс с фавиконом.

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

Как сделать favicon для сайта с нуля

Для создания фавикона я буду использовать сервис www.favicon.cc. Пользоваться ним очень просто. Для начала вам нужно указать цвет, который вы будете использовать при создании фавикона. Для этого задайте оттенок и насыщенность.

После того, как вы выбрали цвет, начинаем рисовать фавикон. Если вы нарисовали что-то неверно, то это можно удалить. Для этого поставьте галочку возле инструмента «прозрачный».
Вот я на за несколько минут сделал такой фавикон ;-).

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

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

Вы можете сделать фавикон с любого изображения. Это может быть ваша фотография, логотип сайта или что-то другое. Для этого нужно открыть программу фотошоп и загрузить туда изображения, которое вы хотите переделать на фавикон. Нажмите «Файл» — «Открыть».

Потом нужно обрезать изображения так, чтобы оно стало квадратным. Для этого я выбираю инструмент «Кадрирования» обвожу часть фото, которую я хочу оставить и нажимаю «Enter».

Потом нужно уменьшить изображения до 16 рх. Для этого выбираем на панели инструментов Изображения – Размер изображения.

Указываем ширину и высоту 16 рх и нажимаем «Ок».

Теперь нам нужно сохранить фавикон на компьютер. Для этого выбираем на панели инструментов Файл – Сохранить как. Указываем название изображения, формат iso и нажимаем «сохранить».

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

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

  • www.audit4web.ru/info/favicon
  • www.favicon.cc — уже знакомый сервис
  • www.iconj.com
  • www.favicon.co.uk/gallery.php
  • thefavicongallery.com
  • favicon-gallery.ru/gallery

Как сделать favicon для wordpress

После того, как вы сделали или скачали фавиконку, ее нужно как-то прикрутить до сайта. Я сейчас покажу, как это сделать на движке wordpress.

Сначала нужно закачать иконку на хостин по такому адресу: wp-content/themes/названия темы/images/

После этого зайдите в Панель управления – Внешний вид – Редактор, откройте файл header.php и пропишите там вод такой код, перед тегом «/head»:

В этом коде нужно изменить:

  • vachevskiy.ru – укажите свой домен;
  • BusinessBlog – укажите названия своей темы;
  • favicon.ico – укажите названия своей иконки, которую вы загрузили на хостинг.

Теперь сохраните изменения и смотрите, что у вас получилось:

Может быть и такое, что после обновления сайта вы не увидите никаких изменений. Это связано с тем, что браузер загружает ваш сайт не с сервера, а с кэша. Поэтому вам нужно очистить кэш в браузере.
А если у вас на сайте есть плагин кэширования, например, Super Cache, то удалите кэш и там.

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

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

Ну, а теперь все, что касается вопроса, как сделать favicon ico для сайта. Всем пока.

vachevskiy.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о