Сделать стандартный значок favicon.ico для сайта онлайн. Favicon ico для сайта


Сделать стандартный значок favicon.ico для сайта онлайн

Обработка JPEG фотографий онлайн.

Главное нужно указать файл картинки на вашем компьютере или телефоне, нажать кнопку ОК. Остальные настройки выставлены по умолчанию.

Примеры со значком этого сайта с изменённым тоном цвета в настройках «цветовой коррекции»:

Если в Фотошопе была сделана картинка с прозрачным фоном и нужно, чтобы после её преобразования иконка для сайта тоже была с прозрачностью, то для этого следует сохранить её в формате PNG24 с поддержкой прозрачности (на англ. прозрачность - transparency) используя, например, функцию в Фотошопе «Сохранить для веб...» (Save for web), после этого нужно указать эту картинку в формате .png на этом сайте для её преобразования в значок favicon.ico.

Для отображения значка favicon на своём сайте его необходимо загрузить в корневой каталог сайта и указать в html коде между тегами <head>...</head> так: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> где favicon.ico - это название созданного значка.

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

Исходное изображение никак не изменяется. Вам будет предоставлен стандартный значок в формате .ICO для сайта.

1) Укажите изображение в формате JPEG, BMP, PNG: 2) Настройки генерируемого значка favicon.ico

Размер favicon.ico для сайта: 16x16 (стандарт)32x3248x4864x64

(Стандартный размер favicon для сайта 16x16, а вот, например, favicon.ico на сайте wikipedia имеет размер 48x48 пикселей.)

3) Цветовая коррекция favicon.ico (по умолчанию всё отключено)

Повысить резкость: (0-10) Насыщенность: (от -100 до 100) Тон цвета: (0-180, 100=не изменять) Яркость: (от -100 до 100) Контрастность: (от -100 до 100)

www.imgonline.com.ua

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

С месяц назад для блога pervushin.com сделал я иконку, в простонародье favicon. Так вот после долгих размышлений, раздумываний и рассусоливаний я решил написать эпопею о создании своего favicon.ico. В этой статье Вы найдёте небольшие обзоры оказавшихся у меня на пути сервисов по созданию таких иконок, несколько ссылок где можно скачать уже готовые иконки и как эту самую готовую иконку установить на сайт. В конце поста как обычно Вас ждёт жирный бонус и сладкое. Спасибо за Ваши комментарии и RT pls.

Favicon.ico: как сделать и установить на сайт

Начну с определения, вдруг кто не знает, favicon — это иконка, значок сайта (блога) или отдельной веб-страницы, которая отображается в адресной строке браузера, в закладках, в журнале, во вкладках и т.д. Стандартный, минимальный размер иконки 16×16, этот размер необходим для вышеуказанных мест, но есть пользователи, которые сохраняют адреса веб-страниц в виде ярлыков на рабочем столе или где-то в папках, в общем для таких целей предусмотрены размеры 24х24, 32х32, 48х48 и 64х64, все эти размеры включаются в один favicon.ico, но главное помнить, что размер файла от этого увеличивается, имею ввиду байты, что затрудняет загрузку сайта.

Favicon.ico в адресной строке браузера

Favicon на вкладках браузера

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

Favicon в результатах поиска Яндекс

У яндекса для это есть специальный робот, который ищет на сайтах фавикон, мой фавикон находится здесь http://pervushin.com/favicon.yandex.net/favicon/pervushin.com, понимаете да, чтобы проверить свой фавикон, поменяйте адрес сайта на свой. Так вот если Вы сменили иконку, то на яндексе она сразу не появится, ну максимум через месяц.

Создать favicon можно с помощью настольных программ, например Favicon Create или Icon Cool Studio, последняя кстати очень мощная, но лучше использовать онлайн сервисы :).

Favicon генераторы

Favicon.ru

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

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, для создания ярлыков можно включить два дополнительных размера 32х32 и 48х48, также на favicon.ru можно обрезать картинку, в случае если размеры её не пропорциональны.

Favicon.ico на favicon.ru

У меня была готовая картинка 50×50 пикселей, её я и закинул. После сервис показал мне как будет выглядеть иконка, если всё в порядке, то можно её тут же скачать, но мне не понравилось:

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

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

Графический онлайн редактор иконок

Favicon.cc

В отличие от первого подопытного на favicon.cc нам сразу предлагают воспользоваться своим графическим редактором. В центре расположен холст, состоящий из 16 горизонтальных и вертикальных квадратиков, каждый квадрат — пиксель, получается холст 16х16, т.е. favicon.ico.

Справа расположилась палитра цветов (оттенков) и несколько инструментов, а именно инструмент прозрачности, пипетка, для определения цвета на холсте и инструмент перетаскивания, которым можно таскать по холсту Ваше что-то там нарисованное :).

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

Графический онлайн редактор favicon.cc

Рисовать иконку в графическом онлайн редакторе? Мазахизм, не мой метод, потому слева от холста в основном меню кликаю на пункт «Import image»:

Импортируем готовое изображение на favicon.cc

Здесь всё довольно просто, указываем путь к изображению (нажатием кнопки «Обзор») и выбираем один из двух имеющихся вариантов обработки загружаемой картинки. Первый подходит к картинке с пропорциональными размерами всех сторон, моя 50х50, второй больше подходит к картинке с разными размерами, при этом варианте изображение сплюснет. Нажимаю кнопку «Upload» и вновь попадаю в редактор, но на холсте уже моя картинка, так сказать попиксельно. Если Вас устраивает конечный результат, можно скачивать иконку, мне не понравилась:

Конечный результат на favicon.cc

FavIcon from Pics

На очереди FavIcon from Pics, тупой такой, лёгкий до безобразия, ничего лишнего, но на нём я сделал свою фавиконку, которая сейчас стоит на pervushin.com, лучше чем здесь, мне не удалось сделать больше нигде. Самое удивительное, что из картинки которую загружаю (здесь тоже есть такая возможность) на сервис получается такая же шняга, как и у остальных, но этот сервис пошёл дальше, он делает favicon из аватарки твиттера! Кстати, если у кого нет твиттера, рекомендую завести, читаем здесь как, и присоединяемся ко мне :).

Favicon из twitter на FavIcon from Pics

Итак, я указал свой логин в твиттере @pervushin_com и нажал заветную кнопку «Generate Favicon«. Попадаем на следующую страницу с дополнительными настройками. Там всё на английском, но разобраться будет не трудно. Во-первых к своей иконке я добавил анимацию в виде бегущей строки «Sergey Pervushin.com». Далее настроил цвет — зелёный (green). Цвет фона прозрачный (transparent). Здесь же можно добавить иконки для iphone, ipad и т.д., но не переусердствуйте, помните про размер.

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

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

Я свой favicon сделал и мне он нравится, но сервисов ещё очень много, вот ссылки на них, посмотрите, может Вам нужно что-то другое:

* http://pervushin.com/www.cy-pr.com/tools/favicon/* http://pervushin.com/genfavicon.com/* http://pervushin.com/www.tools.dynamicdrive.com/favicon/* http://pervushin.com/favicon-generator.org/* http://pervushin.com/www.faviconfactory.com/* http://pervushin.com/shaheeilyas.com/favicon/* http://pervushin.com/www.degraeve.com/favicon/* http://pervushin.com/michurin.com.ru/favicon-editor.shtml

Скачать готовый Favicon для сайта

Если Вам лень делать иконку, хотя чего уж тут лениться, дело 2-х минут, то можно скачать готовые, ниже несколько адресов, где этих favicon.ico завались:

1. http://pervushin.com/www.audit4web.ru/favicon/ — более 15000 иконок.2. http://pervushin.com/www.iconj.com/ — более 18000 иконок, кто больше? Есть также и анимированные. Также и генератор favicon есть, причём очень даже не плохой.

Установка Favicon.ico

У меня движок на wordpress, будем исходить из него, но принципиально установка favicon на других движках или html страницах ничем не отличается и проходит она в два этапа: 1. Загрузка файла на сервер; 2. Прописываем специальные теги в движок. Всё на самом деле очень просто.

Все поисковые роботы ищут иконку в корне сайта, т.е. иконка должна, точнее желательно, хоть и не обязательно, находится по адресу, например, http://pervushin.com//favicon.ico. Но для движков, таких как wordpress, в сети много разных тем, вместе с этими темами в комплекте часто идут свои favicon и пути у них прописаны соответственно расположению этого favicon в папках темы, например адрес.ру/шаблоны/тема/изображения/favicon.ico. Вам необходимо либо просто заменить стандартный ico на свой, либо перепрописать пути, я поступаю именно так.

Закинул оба файла в корень pervushin.com, это favicon.ico и animated_favicon.gif и в файле своего шаблона header.php между тегом <head></head> прописал следующее:

<link rel="shortcut icon" href="http://pervushin.com//favicon.ico" > </link><link rel="icon" type="image/gif" href="http://pervushin.com//animated_favicon.gif" > </link>

Готово! Стильного Вам фавикона и удачной работы!

Snapshot / @pervushin_com в twitter

Сладкое на сегодня: Славная бабулька, с юморцом :).

Читаем дальше:

11 на запись "Favicon.ico: как сделать и установить на сайт"

pervushin.com

Как создать фавикон для сайта (онлайн бесплатно)

Очень важным элементом дизайна блога является фавикон – небольшое изображение (16х16 пикселей). Маленькие размеры – но огромный эффект! Эта статья посвящена тому, как создать фавикон (favicon.ico) для сайта онлайн, с помощью специальных сервисов. Вы подробнее ознакомитесь с тем, что это за иконка фавикон, для чего она используется, какие у нее функции, как ее добавить на блог и создать в режиме online. Также вы узнаете, где скачать коллекцию готовых favicon ico для сайта.

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

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

1. Зачем нужна фавикон для сайта?

Favicon – сокращение из двух слов (англ. FAVorites ICON), что переводится, как иконка (очень маленькое изображение) для «Избранного». Избранное – так называются закладки в браузере Internet Explorer. Внешний вид favicon примерно такой:

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

Как выглядит Фавикон в ХромеИтак, favicon – это маленькое изображение размером 16×16 px, с расширением .ico (расширение иконок). Т.к. иконка приобрела широкую популярность, она имеется практически у каждого сайта, а это еще один повод, чтобы создать фавикон для сайта онлайн. При этом не важно, что за хостинг вы используете, на каком движке работает ваш блог – в любом случае вы сможете создать в режиме online, а затем установить favicon или же скачать готовый фавикон для сайта. Благодаря современным генераторам иконок, их создание не занимает много времени – одна-две минуты, и все готов.

У вас все еще нет фавиконки? Исправляйтесь скорее!

Для чего же используется эта мини-картинка. Во-первых фавикон для сайта – как логотип для торговой компании, это способ выделиться из общей массы. Посетители будут узнавать ваш сайт, взглянув на изображение favicon. Во-вторых, Яндекс тоже использует изображения фавикон, показывает их рядом с результатами выдачи, что позволяет сайтам с favicon лучше выглядеть на фоне других. А это значит, что пользователи будут чаще переходить на ваш сайт, ведь иконка будет «заманивать» их. Другими словами, это мини-изображение поможет вам бесплатно увеличить посещаемость сайта. Вот как все выглядит:

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

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

  • Наберите ваш сайт в окне поиска Яндекс, и вы увидите, есть ли рядом с ним favicon.
  • Наберите в браузере ссылку http://favicon.yandex.net/favicon/site.ru, где замените site.ru на адрес вашего сайта. Если фава проиндексирована, вы сможете ее увидеть.
  • Зайдите в панель Яндекс.Вебмастер, там тоже отражается фавикона.

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

2. Online генераторы и коллекции favicon

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

  1. Скачать уже готовую фаву из галереи.
  2. Создать самому с помощью генератора фавикон.
  3. Сделать из готового изображения (опять же с помощью favicon generator’а)

2.1 Коллекции и галереи фавикон

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

  1. http://www.thefavicongallery.com/ — хоть и небольшая коллекция, но полезная. Здесь вы найдете иконки на самые разные тематики. Всего их около 300 штук. Для того, чтобы скачать понравившуюся favicon ico для сайта, нажмите на нее правой кнопкой мыши и сохраните на свой компьютер.
  2. http://www.iconj.com/favicon-gallery-page1.html — еще одна коллекция favicon для сайта, которая содержит более 3 тысяч мини-картинок. Сохранить понравившуюся можно в двух форматах (ico или gif). Но есть и недостаток: вы можете просматривать за раз только 30 иконок, чтобы увидеть следующие, нужно перейти на новую страницу.
  3. http://www.favicon.cc/?action=icon_list&order_by_rating=1 – благодаря этой галереи, вам не придется самому онлайн создавать фавикон. Просто выберите и скачайте понравишуюся картинку. Опять же, за раз можно просматривать 20 фавикон, что замедляет процесс выбора.
  4. http://www.favicon.co.uk/gallery.php — этот сайт позволяет не только делать фавикон для сайта, но и скачивать готовые варианты. За раз вы можете проглядывать по 144 иконки, что намного удобнее, чем в двух предыдущих вариантов. Фавы на самые разные темы.
  5. http://favicon-generator.org/gallery/ — хоть и маленькая, но полезная коллекция из 84 штук фавиконок. Выбирайте любую!

2.2 Как сделать Фавикон для сайта с нуля

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

2.2.1 Logaster.ru

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

LogasterСкачать файлы фавикона можно в форматах ICO или PNG.Более подробно, как создать фавикон с помощью Логастер можно прочитать здесь

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

2.2.2 Favicon.cc – генератор фавиконок

Этот незамысловатый генератор – один из самых простых и популярных, используемых для online создания favicon для сайта. Вы сможете нарисовать каждый пиксель будущей фавы (всего их 256). Перейдя на сайт, вам станет доступно рабочее окно, в котором вы можете экспериментировать.

Генератор favicon.ccСиним цветом на скрине выше показана рабочая область – здесь вы и будете непосредственно создавать фавикон для сайта. Чуть ниже можно заметить, как смотрится фава в оригинальном масштабе (выделено черным).

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

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

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

Чтобы скачать получившийся фавикон, который вы делали для сайта, нажмите на ссылку Download Favicon (выделена красным).

2.2.3. Генератор Amichurin.Appspot.com

Еще один Generator красивых favicon, в котором в режиме online можно создать красивую картинку. Весь генератор на русском, но его функционал будет попроще, чем в предыдущем случае.  Кстати, подписи, сделанные бардовым цветом, – не мои.

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

2.2.4 Генератор Favicon-Generator.org

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

Генератор favicon-generator.org2.3 Favicon из готового изображения

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

Заранее подготовьте картинку, которую вы хотите взять как основу.

2.3.1 Сервис Favicon.ru

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

Русскоязычный генератор favicon.ruДобавить картинку или фотку (основу) вы можете так:

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

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

2.3.2 Сервис Favicon.cc

Похожий генератор, но с более мощным функционалом. Чтобы создать фаву из готовой картинки, сначала перейдите во вкладку «Import Image».

Генератор favicon.ccТеперь нажмите «Выберите файл» и добавьте загружаемый файл. На его основе и будет создана favicon ico для вашего сайта. Кстати, вам может понадобиться функция растяжения изображения:

  • Keep dimensions – при уменьшении соотношения сторон картинки останутся такими же
  • Shrink to square icon – стороны изображения будут приведены к квадратному виду (картинка может исказиться).

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

3. Как добавить favicon на блог WordPress

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

Как правило, фавикона расположена в корне сайта (в корневой папке) – на это мы и будем ориентироваться. Если ваша фава лежит не в корне, просто перенесите ее туда.

Добавляется favicon.ico в два шага.

ШАГ ПЕРВЫЙ

Первым делом вам нужно найти в вашей теме ту строчку кода, которая отвечает за вывод фавикона. Откройте для редактирования файл Заголовок (header.php) и найдите такую (или похожую) строчку:

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

Если вообще нет ничего похожего и содержащего слово favicon.ico, тогда просто добавьте эти две строчки куда-нибудь между тегами  <head> и </head>.

ШАГ ВТОРОЙ

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

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

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

Подпишитесь на обновления и получите в подарок книгу: "Десятипальцевый метод набора вслепую"

blog-craft.ru

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

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

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

Как создать фавикон (favicon.ico)

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

Как создать favicon.ico для сайта

Есть несколько способов.

  • Можно нарисовать фавикон вручную, с помощью графического редактора (фотошоп не умеет сохранять файлы с расширением .ico поэтому нужен будет или специальный плагин, или другая программа) главное помните — размеры должны быть 16х16.
  • А можно из готовой картинки сделать фавикон,  воспользовавшись одним из онлайн-сервисов которых сейчас довольно много.  Я использовал вот этот при создании фавикона для ruskweb.ru. Раньше я пользовался другим сервисом, но там иконки получались размытыми, этот мне понравился гораздо больше, иконки более четкие.

Делов тут на пол минуты. Заходим на сайт, жмем кнопку Import Image

Как создать фавикон (favicon.ico)

Выбираем наше изображение, из которого хотим сделать иконку

Как создать фавикон (favicon.ico)

И скачиваем его к себе на компьютер Как создать фавикон (favicon.ico)

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

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

Как сделать еще более уникальным ваш блог на WordPress можно прочитать в других моих постах.

 

ruskweb.ru

Как поставить свою favicon.ico на сайт

Итак, вопрос:

vik wrote:я хотел бы узнать как поставить лого сайтаперед урлом.у вас это—«W»у маил ру это»@»

И собственно ответ:

Favicon («избр. значок»; этот термин образован от слова «Favorites», обозначающего меню избранных ссылок в Internet Explorer) — это небольшая картинка, которая отображается рядом с названием вашего сайта в «Избранном», или в «Закладках», и рядом с адресом вашего сайта в адресной строке браузера вместо стандартной.

Обычно используется изображение размера 16?16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon.ico, так как исторически сложилось, что там его ищет Internet Explorer. Все современные браузеры понимают явное указание положения значка в HTML-коде и могут использовать вместо формата ICO формат PNG, GIF, BMP и других.

Путь к файлу, его формат и размеры изображения могут быть любыми, допустимыми для WWW (за исключением Internet Explorer, который допускает для значка только формат ICO, «лежащего» в корне сервера).

На сегодняшний день Internet Explorer — это единственный браузер, который показывает иконку сайта только если сайт добавлен в «Ибранное» (Закладки), иконка называется favicon.ico и лежит только в корневой папке сервера, но в последующих версиях разработчики обещают это исправить. К сайту иконка подвязывается прописанием в коде документа между тегами <head></head> следующего кода:

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

Если, например, вы используете WordPerss, то этот код нужно разместить между тегами <head></head> в файле темы header.php.

Для того чтобы создать иконку для сайта можно воспользоваться несколькими способами:

  1. Использовать специальные программы Microangelo, QTam Bitmap to Icon, Axialis IconWorkshop.
  2. Использовать специальный плагин для Photoshop, например — IconBuilder-XP100
  3. Использовать онлайн ресурсы для создания favicon. Например — http://favicon.ru/

Делаем favicon онлайн

Сайт Favicon.ru полностью посвящен иконкам сайта favicon.ico. Сайт содержит форму, позволяющую загрузить собственную картинку размером не более 300 Кб для создания иконки. В этой форме предусмотрена возможность поставить галочки для добавления в favicon.ico значков 32х32 и 48х48 для десктопа.

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

В принципе, думаю что вопрос раскрыт более-менее полно. Если вы считаете, что вопрос раскрыт недостаточно полно, то напишите, что еще вам нужно знать (или добавте что знаете вы) о favicon.

www.master-web.info

что это такое и как сделать

Иконка для сайта

Доброго времени суток! А у вас есть  favicon на сайте? Это важный элемент сайта, он будет отображаться в поисковой выдаче! Про то, что это такое и как его установить за несколько минут — читайте в статье.

Фавикон — это иконка для сайта, неотъемлемый атрибут, индивидуальность вашего ресурса. С помощью faviсon читатель вашего онлайн-проекта с лёгкостью определит и найдёт его в "панели закладок" на своём браузере или в некоторых поисковых системах, например, Яндекс.

У меня на данный момент  favicon выглядит так:

data-ad-client="ca-pub-8243622403449707"data-ad-slot="1319308473"data-ad-format="auto">

Теперь я думаю вы поняли что это за "штуковина" — favicon. Давайте разберём, как его сделать.

Как сделать favicon 

Вообще, favicon должен быть размером 16×16. Саму картинку под иконку вы можете сделать самостоятельно с помощью графического редактора Photoshop , либо найти картинку в интернете и уменьшить её до размера фавикона (16×16 в данном случае). Проблема лишь в том, что фотошоп, да и многие другие графические редакторы не сохраняют изображения в формате ICO, а нам нужен именно этот формат!

Но как говорится в поговорке: "Кто ищет — тот всегда найдёт". И я нашёл решение — это онлайн сервис, который преобразует формат вашей картинки (фавикона), обычно это формат PNG или JPG, в формат ICO. Это сервис  image.online-convert.com.

Для того, чтобы преобразовать формат картинки в формат иконки ICO, нужно нажать на кнопку "Обзор", выбрать картинку, установить размер пикселей 16×16 и нажать на кнопку "Преобразовать файл".

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

Если не хочется утруждать себя созданием фавикона, можете скачать его на различных сервисах в Интернете, уже в формате ICO. Например, сервис iconsearch.ru. Здесь можете найти  favicon, для этого нужно ввести в строку "Поиск" слово, которое несёт смысл вашей фавиконки. Например, "Деньги" — далее отобразятся все иконки, подходящие по смыслу.

С этим я думаю, мы с вами разобрались. Теперь уже скачанный favicon нам нужно загрузить на Интернет-ресурс, для этого можно воспользоваться программами Total Commander или FileZilla, а также можно загрузить через файловый менеджер вашего хостинга.

Загрузить нужно в корень сайта, обычно это папка public_html, как загружать файлы с помощью программы Total Commander можете узнать из этой статьи.

Далее, если Интернет-проект создан на движке WordPress, то нужно найти файл header.php.

Данный файл можете найти по адресу: wp-content/themes/папка с используемой вами темой.

Затем, когда откроете файл header.php, после тега <head> нужно будет вставить код:

<link rel="shortcut icon" href="favicon.ico" />

Сохраняете изменения. Всё favicon готов!

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

P.S.

Как вам статья? Рекомендую получать свежие статьи блога на e-mail, чтобы не пропустить много новой интересной информации!

С уважением, Александр Сергиенко

int-net-partner.ru

Favicon для сайта - создание и установка

Здравствуйте, уважаемые читатели. Сегодня, в продолжение темы «самостоятельное создание сайта» поговорим о создании и установке иконки для Вашего сайта. Своего рода это логотип сайта или блога, который виден в браузере и в результатах поиска Яндекс. А называется эта иконка – Favicon (значок веб-сайта или веб-страницы).

Иконка favicon

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

Favicon в закладках

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

Что такое иконка сайта favicon

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

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

Какой самый быстрый способ получить favicon

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

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

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

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

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

Как создать favicon

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

Шаг 1. Поиск подходящей иконки

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

Поисковый запрос

Для этого в поле поиска, вводим поисковый запрос и нажимаем кнопку Search (Поиск). Учтите, запрос тоже необходимо делать на английском языке, но это я думаю не проблема, ведь есть переводчик от Гугла :-).

Мне понравилась гитара, отмеченная на скриншоте.

Выбор иконки

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

Скачиваем иконку 16х16

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

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

Шаг 2. Создание favicon

Если Вы скачали иконку нужного Вам размера и формата (16х16, ICO), то Вам достаточно переименовать скачанный файл в файл вот такого вида: favicon.ico

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

Итак, переходим на главную страницу этого генератора favicon.ico Generator.

Этот сервис позволяет создать иконку с нуля, нарисовав её прямо в специально отведённом окошке. Пример моего творчества ниже:

Создание иконки с нуля

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

Скачать иконку

Но нас интересует ещё она возможность данного генератора – это преобразование нашего, заранее подобранного изображения в иконку favicon. Для этого переходим на вкладку Import Image и загружаем нужное для преобразование изображение. В нашем случае, это гитара.

Преобразование изображения

Теперь, Вы можете, если это необходимо внести корректировки и сохранить готовый favicon на свой компьютер.

Скачать иконку favicon

Теперь, когда у нас есть готовый favicon.ico, надо этот файл скопировать в корневую папку Вашего сайта.

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

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

Но как же скопировать файл на сайт? Для этого можно использовать FTP соединение в любом из файловых менеджеров (Total Commander или FileZilla). А также можно использовать файловый менеджер в панели управления Вашего хостинга. Пример использования файлового менеджера на хостинге, можно посмотреть здесь.

Я же использую для таких целей файловый менеджер Total Commander. Для начала нужно настроить FTP соединение:

Настройка FTP соединения

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

После настройки соединения, подключаемся к сайту.

Подключение к сайту

Теперь нужно открыть папку Вашего сайта, как правило, это /public_html/папка вашего сайта/ и скопировать в эту папку файл favicon.ico.

Копируем favicon на сайт

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

Очистка кэша

Как прописать путь к favicon в шаблоне WordPress

Для начала открываем административную панель WordPress и переходим в раздел «Внешний вид» — «Редактор». Где нужно открыть файл заголовка (header.php) и вставить вот такой код:

<link href="/favicon.ico" rel="shortcut icon" />

между тегами <head>…</head>

Редактор шаблона

По большому счёту это всё. Но следует рассказать ещё о нескольких возможностях установки favicon.ico. Так если Вы захотите установить иконку в формате GIF, PNG или JPEG, следует добавить тип файла в вышеуказанный код. Кстати, Вы также можете установить анимированный favicon в формате GIF. Но такая иконка будет, двигаться только в браузере Firefox. И надёжней будет прописать в коде шаблона второй путь к иконке в формате ICO.

Примеры:

иконка в формате PNG

<link href="/image.png" rel="icon" type="image/png" />

иконка в формате GIF

<link href="/ikonka.gif" rel="shortcut icon" type="image/gif" />

Вам не обязательно использовать имя файла favicon. Достаточно правильно указать тип файла (type) и путь к этому файлу (href)

<link href="/site/image/ico.png" rel="shortcut icon" type="image/png" />

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

<link href="http://timvet.ru/img/icon.png" rel="shortcut icon" type="image/png" />

Вот теперь вроде всё. Если, что упустил, прошу, добавьте в комментариях. Желаю удачи с установкой favicon.

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

С уважением, Максим Зайцев.

Адаптивная, SEO подготовленная WordPress тема

1zaicev.ru