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


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

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

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



Иконка для сайта (файл favicon.ico) – это картинка размером 16Х16 пикселей, характерная для большинства профессионально сделанных сайтов.
Favicon – сокращение от Favorite Icon (любимая иконка) . Ее можно наблюдать в адресной строке, в папке Избранное(Закладки) , также во вкладках браузеров и в результатах выдачи  Яндекса.
По умолчанию в качестве иконки сайта отображается  неприметный стандартный значок:

Как сделать иконку для сайта? (файл favicon.ico)
Рис.1 Пример внешнего вида иконки в адресной строке
1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;
Как сделать иконку для сайта? (файл favicon.ico)
Рис.2 Пример внешнего вида иконки в Избранном(Закладки)
1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;
файл favicon.ico
Рис.3 Пример внешнего вида иконки во вкладках браузеров
1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;
файл favicon.ico
Рис.4 Пример внешнего вида иконки в результатах выдачи Яндекса
1 - Внешний вид при наличии иконки;
2 - Вид по умолчанию (без иконки) ;

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

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

Обычно, на иконке изображают мини-логотип компании...

Самый простой и быстрый способ сделать иконку для сайта - воспользоваться сервисом .

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

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

После того, как изображение найдено или сделано, его нужно загрузить на сервис , затем нажать кнопку "Создать favicon.iсo" , затем скачать получившуюся иконку, перейдя по ссылке "Скачать favicon.ico!" , и наконец главное, что нужно сделать, это закачать получившийся файл favicon.iсo в корневую директорию Вашего сайта(туда, где лежит главная страница). Браузер автоматически найдет этот файл и добавит его в адресную строку и закладки.

Если по каким-то причинам Вы не можете разместить этот файл в корне сайта, тогда нужно указать браузеру, где он находится, для этого в каждую страницу сайта , между тегами head нужно вставить тег link:

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

Как Вы наверное уже знаете, атрибут href указывает на расположение файла. В данном случае файл иконки favicon.iсo лежит в папке icon .

Оценить результаты Вашей работы можно сразу, для этого нужно ввести адрес сайта в браузере . Если все сделали верно, то иконка должна отображаться слева от адреса (так как показано на Рис.1) .

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

 Создан: 2009-02-24      Просмотров: 85531      Автор:Андрей Галямов

Комментарии:

Автор: Garry
Дата : 2009-02-25

Большое спасибо, очень интересный материал!

Автор: rekachili
Дата : 2009-02-25

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

Автор: Monc
Дата : 2009-02-25

Спасибки, мне оч понравилось)

Автор: Sati
Дата : 2009-02-25

Здорово! Спасибо, взяла кое-что из логотипа, получилось довольно симпатично... http://www.meteo-tv.am

Автор: Алексей
Дата : 2009-02-25

Спаибо, давно хотел узнать об этом.

Автор: Кирилл
Дата : 2009-02-25

Огромное спасибо! очень помогло

Автор: Леонид
Дата : 2009-02-25

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

Автор: Наталья Сычёва
Дата : 2009-02-25

Спасибо, Андрей!

Автор: Вадим
Дата : 2009-02-25

Спасибо, Андрей! Очень интересный материал, давно хотел сделать такое! ;)

Автор: Игорь
Дата : 2009-02-26

Спасибо Андрей, тема классная.

Автор: Agasi
Дата : 2009-02-26

Большое спасибо

Автор: Василий
Дата : 2009-02-26

спасибо, это как раз то, что надо!!!

Автор: artem
Дата : 2009-02-26

Спасибо =)

Автор: Гарик
Дата : 2009-02-26

Мелоч, а приятно. Такая деталь в адресной строке казалась чем-то нереальным. Оказывается всё очень просто. Андрею большое спасибо.

Автор: Саша
Дата : 2009-02-26

Супер спасибо!

Автор: Светлана
Дата : 2009-02-27

спасибо большое

Автор: Владимир
Дата : 2009-02-27

Отлично, Андрей. Молодец! Главное, всё кстати. Ждём ещё чего-нибудь интересного. Лучше пользоваться 2-3 -мя источниками, чем по всему нету бороздить.

Автор: саня
Дата : 2009-02-28

класс сайт знают как людей позабавить

Автор: andrij-ka
Дата : 2009-02-28

очень полезная штука

Автор: Максим
Дата : 2009-02-28

Только сидел и думал как это сделать. Даже чувствовал, что все очень просто, а как сделать....? И тут этот урок. Супер.

Автор: валера
Дата : 2009-03-07

я через юкоз маю та прошче воно автоматично ставить яку ти тіки незахочеш іконку

Автор: Олег
Дата : 2009-03-09

Андрей, спасибо за помощь неучам.

Автор: роман
Дата : 2009-03-21

блин, а у меня не выходит http://iprivet.ru/ вот гляньте, в опере иконка отображается, а в эксплорере и яндексе нет. что не так делаю?

Автор: роман
Дата : 2009-03-21

ах парднон, оказывается и правда достаточно было воспользоваться http://favicon.ru/ а я до этого иконку делал с помощью ArtIcons Pro

Автор: Victor
Дата : 2009-03-22

Интересный русскоязычный сервис по созданию http://www.favicon.erus.info/ Позволяет создавать анимированные иконки и со скроллинг-текстом

Автор: www.lekal.ru
Дата : 2009-03-30

Прочитав сразе же поставил себе на http://lekal.ru кулебяку. Доволен. Спасибо автору.

Автор: владислав
Дата : 2009-08-21

люди, спасите! в опере - работает, в фаерфоксе - тоже, а в ИЕ - нет! кто-нить знает в чём дело? помогите, плиз _

Автор: владислав
Дата : 2009-08-22

блин, я заметил, что с видео на моём сайте тоже самое! не понимаю в чём дело((

Автор: Сергей
Дата : 2009-09-10

Подскажите пожалуйста, при индексации, например Яндексом, иконка одновременно с сайтом индексируется или как получится?

Автор: Сергей
Дата : 2009-10-01

Чето я крутил вертел эту иконку и так и сяк ставил не отображается и все.

Автор: Сергей
Дата : 2009-10-02

Блин блинский в опере отобразилась а в мозиле не отображается.

Автор: xJlaIIax
Дата : 2009-11-08

Спасибо за урок, это то что я искал!

Автор: Вадим
Дата : 2009-11-09

Спасибо Андрюха ! Инфа просто супер !!! http://www.magnomer.narod.ru

Автор: Мак дак
Дата : 2009-12-06

А я себе такую сделал http://seosites.ucoz.com/

Автор: slon29
Дата : 2009-12-31

Спасибо андрей вы как всегда на высоте благодаря вашему сайту мой тоже преобразился www.slonrecords.com.ua

Автор: Александр
Дата : 2010-01-14

Спасибо!!!

Автор: Лана
Дата : 2010-01-20

Подскажите плиз, как так в платном хостинге отображается иконка а на бесплатном не отображается, хотя все то же самое и код и иконка???

Автор: Николай
Дата : 2010-05-15

А как делают широкие иконки ?

Автор: Владимир
Дата : 2010-05-28

У меня на сайте когда вводишь vipkulinar.ru всё выходит, а когда пишешь www.vipkulinar.ru почему то не отображается!

Автор: Елена
Дата : 2010-06-04

В Эксплоере отображается, а в Мозилле - нет :(

Автор: Александр Hecfrjd
Дата : 2010-06-15

Продается иконка для Google. Цена 25 000 долл.

Автор: triuer
Дата : 2010-07-07

Спасибо!

Автор: Vlad
Дата : 2010-07-31

спс

Автор: ольга
Дата : 2010-08-15

Самое лучшее объяснение на 5+, спасибо!

Автор: Evgeniy
Дата : 2010-08-24

Огробное спасибо за информацию. ...Очень полезная тема, особенно для начинающих :)

Автор: Настя
Дата : 2010-10-25

Спасибо, Андрей, Ваши уроки очень полезны! подскажите плиз скинула иконку в корневую папку, а отображается все равно иконка джумлы, как её поменять можно?

Автор: Настя
Дата : 2010-10-25

Урра!! заработало! Не обратила сразу внимание, что у вас есть еще и замечательный форум, где есть ответы на многие вопросы)

Добавить комментарий:


Источник: http://www.zvirec.com/view_post.php?id=33


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

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

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

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

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

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

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

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

Новое на сайте: