El principal problema relacionat amb afegir un favicon en HTML és que requereix una codificació addicional. Els favicons són petites icones que apareixen a la pestanya del navegador o a la barra d'adreces d'un lloc web. Per afegir un favicon a una pàgina HTML, heu d'incloure un element d'enllaç amb l'atribut rel definit com a "icona de drecera" i l'atribut href establert a la ubicació del fitxer de favicon. Això pot consumir molt de temps i difícil per a aquells que no estan familiaritzats amb la codificació HTML. A més, és possible que alguns navegadors no reconeguin certs tipus de favicons, per la qual cosa és important assegurar-vos que el vostre favicon sigui compatible amb tots els navegadors abans d'afegir-lo a la vostra pàgina.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
1. Aquesta línia de codi crea un enllaç a un fitxer extern, que s'utilitza per mostrar una petita icona al costat del títol de la pàgina a la pestanya del navegador.
2. L'atribut “rel” especifica la relació entre el document actual i el document enllaçat, que en aquest cas és una icona de drecera.
3. L'atribut “href” especifica la ubicació del document enllaçat, que en aquest cas és “favicon.ico”.
4. L'atribut “type” especifica el tipus de suport del document enllaçat, que en aquest cas és una imatge amb un format d'icona x.
Què és un favicon
Un favicon (abreviatura de "icona de favorits") és una imatge petita de 16×16 associada a un lloc web o pàgina web en particular. Es mostra a la barra d'adreces del navegador, al costat del títol de la pàgina i a la llista d'adreces d'interès. Els favicons s'utilitzen més habitualment per proporcionar una manera fàcil als usuaris d'identificar i navegar entre diferents llocs web.
Com puc afegir un favicon en HTML
Un favicon és una petita icona que apareix a la pestanya del navegador d'un lloc web. S'utilitza per ajudar a identificar el vostre lloc web i fer-lo més reconeixible pels visitants. Per afegir un favicon en HTML, haureu d'incloure el codi següent a la secció del vostre document HTML:
Substituïu "path/to/favicon.ico" pel camí d'accés a on heu desat el fitxer de favicon. El fitxer ha de tenir un format .ico i una mida de 16×16 píxels o 32×32 píxels.
Com afegir favicon SVG
1. Creeu un fitxer SVG: el primer pas és crear un fitxer SVG que vulgueu utilitzar com a favicon. Podeu crear-lo vosaltres mateixos mitjançant un editor de gràfics vectorials com Adobe Illustrator o Inkscape, o bé podeu descarregar-ne un des del web.
2. Converteix el format SVG a ICO: un cop tingueu el vostre fitxer SVG, heu de convertir-lo al format ICO. Això es pot fer mitjançant un convertidor en línia gratuït com Convertio o CloudConvert.
3. Afegiu l'etiqueta d'enllaç del favicon en HTML: un cop tingueu el vostre fitxer ICO, afegiu el codi següent a la secció del vostre document HTML:
Això indicarà als navegadors que aquest és el favicon del vostre lloc web i que l'han de mostrar quan algú visiti el vostre lloc.
4. Prova i soluciona problemes: finalment, prova el teu nou favicon visitant el teu lloc web en diferents navegadors i dispositius i assegura't que es vegi bé a tot arreu! Si hi ha cap problema, proveu de resoldre'ls amb eines com ara DevTools de Google Chrome o les eines per a desenvolupadors web de Firefox.
